案例7.?? 形狀：唯一選中項

案例來源:

京東APP-手機充值

案例效果：

整體界面效果：(圖1-35)

原型實現效果：(圖1-36)

案例描述：

點擊每一個金額按鈕時，當前按鈕變為紅色背景與白色字體，其它按鈕恢復白色背景與黑色字體。

元件準備：

頁面中：(圖1-37)

思路分析：

按鈕有兩種狀態與樣式，可以通過元件的交互樣式來實現；(操作步驟1)

點擊按鈕時，通過設置當前的元件為被選中的狀態使其變色；(操作步驟3)

只允許有一個按鈕呈現被選中的樣式，可以通過給所有按鈕元件設置選項組名稱來實現效果。(操作步驟2)

操作步驟：

1、在頁面上添加一個矩形元件，在元件屬性中為其設置【選中】的樣式，可參考基礎23；(圖1-38)

2、在元件屬性中，{設置選項組名稱}為“Price”；(圖1-38)

3、為元件的【鼠標單擊時】添加“用例1”，設置動作【選中】“當前元件”。(圖1-39)

4、最后將此元件復制多個，排列整齊，更改金額文字；(圖1-40)

5、將第一個元件的【選中】勾選，讓其在頁面加載時即為已選中的狀態。(圖1-38)

補充說明：

本案例中的按鈕默認樣式設置包括：

圓角半徑：5；

陰影：偏移(0,0)；模糊(5)；

本案例中使用了“FontAwesome4.4.0”圖標字體元件庫，需要安裝字體文件支持，并進行Web字體設置。(參考案例1的補充說明)

~~~~~~~~~~~~ 正文結束 下面沒了 ~~~~~~~~~~~~

小樓老師全新打造Axure RP 9精品課程，以獨有的教學方法與技巧，幫助你以最短的時間高效的完成學習目標。

《Axure RP 9 萌新修煉視頻》-----從零入門進階的優質課程------【點此查看詳情】

喜歡 (32)or分享 (0)

總結

以上是生活随笔為你收集整理的axure7 地址选择_AxureRP8实战手册-案例7（形状：唯一选中项）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。