摹客 Mockplus

摹客 Mockplus

让设计更快更简单

树组件

树组件可以用清晰的层级结构展示信息,可以展开或者折叠。

添加树组件

从组件面板的扩展类目中,拖出树组件。

树组件1.png

编辑组件内容

双击树组件,即可编辑文本信息。

树组件2.png

其中,每行代表一个节点,节点前的“.”则代表该节点的层级,而大括号中的加号和减号分别代表该目录节点是否为展开状态。

设置属性

选中树组件,在右侧属性面板上可以设置树组件的文字颜色、字体字号、边框等属性。

树组件3.png

重要属性

在“选择”属性栏中可以更改树组件的默认选中项和选中项的样式。

树组件4.png

而在“扩展”属性中,可以对树组件中的样式进行微调,比如图标大小、是否有滚动条等等。

树组件5.png

设置交互

拖动树组件对应节点的拖拽点,链接其它组件,可以设置各个节点的交互效果。

树组件6.png

 

 

相关阅读:

  • 菜单栏组件
  • 垂直选项卡组件
  • 折叠面板组件

MockplusMockplus,100万产品经理和设计师的选择
免费下载Mockplus,开始你的设计!