axure商城

Axure教程之美化單選框復選框按鈕

先看下視覺效果(想怎么好看,完全看你的個人設計水平)

1.png

圖層原件

復選按鈕

2.png

單選按鈕

3.png

開始制作,兩種選框圖層元素的是一樣的,此處不做重復,拿復選框作案例

1、 首先從元件庫,拖一個復選框進來

4.png

5.png

隨便起個名字,這里我起的名字叫“原件”,并且將原件設置為隱藏

6.png

2、畫個圓角矩形,顏色隨意,你自己喜歡

7.png

起名為“背景”(叫什么不重要,重要的是方便)

3、畫個選中狀態

9.png

從元件庫Icons里拖一個對號進來,起名為“選中”,調整合適大小,放到矩形的中間

4、將矩形和對號編組,并起個名字

10.png

5、給原件添加交互動作

動作1:

給剛剛的編組添加一個動作,動作如下

11.png

111.png

鼠標點擊時,切換復選框“原件”的選中狀態

動作2:

給復選框原件添加動作,動作如下

12.png

選中時顯示“對號(選中)”,取消選中時隱藏“對號(選中)”

6、最后,我們把原件整體打個包便于復制多個

13.png·

這里需要注意的是,設定一下選中狀態,如果為未選中,則先隱藏“對號”原件

14.png

7、關于單選框的不同點

單選框因為沒有反復點擊,并且聯動需要編組,所以會有一些不同,大家注意一下!

首先是一定要給“單選按鈕”原件設定編組名稱

15.png

然后就是編組的動作需要加上條件,表面重復點擊

16.png

17.png

18.png

單選框演示

https://9h9y3w.axshare.com/#g=1&p=%E5%8D%95%E9%80%89%E6%A1%86%E5%8F%AF%E7%BC%96%E7%BB%84

復選框演示

https://9h9y3w.axshare.com/#g=1&p=%E5%A4%8D%E9%80%89%E6%A1%86

來源:https://www.okjn.cn/html5/Information/share/2018/0622/433.html

給TA買糖
共{{data.count}}人
人已贊賞
案例教程

axure教程之畫百分比環形圖

2018-5-27 15:54:27

案例教程

Axure 8.0制作水平方向上一直來回移動的箭頭

2018-6-26 10:37:53

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo