墨刀基础篇(一) ：4.常用组件(表单、导航)

一：表单

1.1 单行输入 & 多行输入

1.2 下拉选择器

双击进入编辑模式，可以新增选项，只能单选，不能设置选项的样式。而下拉菜单支持多选，支持设置选项样式。

1.3 选择文件

1.4 单选&复选

• 单选支持两种类型：单选和多选，即可以将单选改为多选
• 禁用：表示单选按钮是否允许选中
• 可以调整选项之间的间距
• 可以设置默认选中的值
• 可以为每个选项添加交互事件
• 可以调整单选的边框的颜色、字体颜色以及选中状态时边框的颜色和字体颜色
  

1.5 安卓开关&IOS开关

可以设置禁用、开启样式、关闭样式。

1.6 滑动条

• 可以设置滑块的位置
• 可以设置轨道的填充颜色和进度条填充颜色
• 可以设置滑块的填充颜色和边框颜色、边框粗细等。
  

1.7 数字步进器

• 双击组件可以点击➖和➕调整值
• 可以设置数值的区间范围
• 可以设置默认值
  

二：导航

2.1 下拉菜单

下拉菜单支持单选和多选，选中后支持回显，可以快速添加选项，设置选项的外观。

2.2 弹出菜单

弹出菜单也是使用动态组件绘制而成，不同的是可以通过设置样式来改变一些外观，默认有两个状态。状态1只有一个图标，可以设置为其它图标，点击图标切换到状态2，状态二除了有➕图标以外还有内容，点击图标然后再切换到状态1。

弹出菜单很多地方都在使用，常见的就是微信的导航栏的右上方就有。

2.3 导航菜单

导航菜单墨刀将其独立抽象成独立的组件，我觉得这点就比Axure高出一个境界，这也是我认可墨刀的原因。菜单导航常用于Web后台。

• 可以在外观中快速添加菜单选项
• 可以快速更改菜单的图标
• 可以设置菜单默认选中项
• 可以为菜单添加事件
• 可以设置一级菜单和子菜单的背景色
• 可以调整一级菜单和子菜单的高度
• 可以设置一级菜单和子菜单的文本的字体、字号等
• 可以设置选中的子菜单的背景颜色、字体、字号等
• 可以设置整个菜单最右侧的边框的颜色（分界线）
  

2.4 垂直菜单

垂直菜单和普通菜单唯一不同的就是二级菜单不在下面显示而是在右边显示。

2.5 水平菜单

水平菜单常用于Web网站。

2.6 树形组件

树形组件常用于显示 部门、机构、省市区等具有层级的树形数据。

2.7 移动端导航

• 可以修改图标和文字
• 可以设置选中的图标颜色和文字颜色
• 可以设置导航栏的填充色

2.8 分段器

• 设置填充、边框等样式
• 设置文本、选中项、选中项文本的样式
  

2.9 折叠面板

2.10 标签页

• 可以设置选中项的颜色和指示器线段的粗细

2.11 分页器1&分页器2

• 可以设置最大码值