Axure制作:自制树状图

2025-10-15 21:44:52

1、新建2个“箭头”图标,4个复选框和1个动态面板。

分别命名为:

“箭头”图标:open_1

“箭头”图标:close_1

动态面板:kuang1

4个复选框分别命名为:单行输入框、单行输入框_1、单行输入框_2、单行输入框_3

----

其中动态面板尺寸是120*80

复选框尺寸100*16

---

如下图所示:

Axure制作:自制树状图

2、其中,“图标:close_1”是“图标:open_1”旋转270度的样式。

Axure制作:自制树状图

3、按下图排列各个控件:

1.默认把“图标:close_1”隐藏,并把“图标:close_1”和“图标:open_1”重叠在一起

2.”复选框:单行输入框_1、单行输入框_2、单行输入框_3“放入"动态面板"中

3.复选框相互间隔是8

4.组合这些控件下,并命名为A01

Axure制作:自制树状图

4、复制A01组,排版如下图所示,其他两组分别命名为A02和A03

Axure制作:自制树状图

5、调整内容及各个控件的命名,如下图所示:

Axure制作:自制树状图

6、设置”组合:A01“中的各个控件动作:

7、“图标:close_1”的“鼠标单击时”

---

1.显示图标:open_1

2.隐藏图标:close_1

3.设置”动态面板:kuang1“尺寸为120*80

4.分别移动”组合:A02“和“组合:A03”的相对位置(0,72)

---

Axure制作:自制树状图

8、“图标:open_1”的“鼠标单击时”

---

1.显示图标:close_1

2.隐藏图标:open_1

3.设置“动态面板:kuang1”尺寸为120*0

4.分别移动“组合:A02”和“组合:A03”的相对位置(0,-72)

---

Axure制作:自制树状图

9、“复选框:单行输入框”的“鼠标单击时”

---

设置“动态面板:kuang1”为”选中“状态

---

Axure制作:自制树状图

10、“复选框:单行输入框_1、单行输入框_2、单行输入框_3”的操作都一样,当“取消选中时”

---

设置“复选框:单行输入框“取消”选中“

---

Axure制作:自制树状图

11、设置“组合:A02”中的各个控件动作:

12、“图标:close_2”的“鼠标单击时”

---

1.显示图标:open_2

2.隐藏图标:close_2

3.设置”动态面板:kuang2“尺寸为120*80

4.分别移动”组合:A03“的相对位置(0,72)

---

Axure制作:自制树状图

13、“图标:open_2”的“鼠标单击时”

---

1.显示图标:close_2

2.隐藏图标:open_2

3.设置“动态面板:kuang2”尺寸为120*0

4.分别移动“组合:A03”的相对位置(0,-72)

---

Axure制作:自制树状图

14、“复选框:多行输入框”的“鼠标单击时”

---

设置“动态面板:kuang2”为”选中“状态

---

Axure制作:自制树状图

15、“复选框:多行输入框_1、多行输入框_2、多行输入框_3”的操作都一样,当“取消选中时”

---

设置“复选框:多行输入框“取消”选中“

---

Axure制作:自制树状图

16、设置”组合:A03“中的各个控件动作:

17、“图标:close_3”的“鼠标单击时”

---

1.显示图标:open_3

2.隐藏图标:close_3

3.设置”动态面板:kuang3“尺寸为120*80

---

Axure制作:自制树状图

18、“图标:open_3”的“鼠标单击时”

---

1.显示图标:close_3

2.隐藏图标:open_3

3.设置“动态面板:kuang3”尺寸为120*0

---

Axure制作:自制树状图

19、“复选框:单选框”的“鼠标单击时”

---

设置“动态面板:kuang3”为”选中“状态

---

Axure制作:自制树状图

20、“复选框:单选框_1、单选框_2、单选框_3”的操作都一样,当“取消选中时”

---

设置“复选框:单选框“取消”选中“

---

Axure制作:自制树状图

21、这些设置好后,就可以看下效果了……

更多的树状目录,无非就是这些操作的叠加……

Axure制作:自制树状图

22、觉得不错,对你有帮助的话,请投个票,加个赞哦~

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢