Axure中默認的單選框和復選框并不好看,想要修改單選框和復選框的樣式,該怎么修改呢?下面我們就來看看詳細的教程。
一、如何美化復選框
1、從元件庫,拖一個復選框到編輯區,隨便起個名字,將原件設置為隱藏,這個是用來控制全選或全不選的。
2、從元件庫,拖一個矩形框,設置下圓角和顏色,再拖出一個矩形框,改變形狀,將其調整成勾選樣式,將背景設置成灰色,這個用做未選時的狀態,在復制一個,將背景設置成白色并將原件設置為隱藏,這個用做選中時的狀態。
3、給原件添加交互事件,將原件編組然后添加點擊事件,設置選中狀態為復選框,值選擇toggle即可,這樣當鼠標點擊時就會切換到復選框“原件”的選中狀態。
4、我們選擇復選框,給復選框添加交互事件,當我們選中時將白色的勾選顯示出來,取消選中時隱藏,設置好之后我們再給其加上文本標簽用來顯示當前復選框后面的內容即可。
二、如何美化單選按鈕
1、同樣用之前的原件,這里只是把復選框改成單選框,同樣將原件編組然后添加點擊事件,這里我們需要先對原件進行判斷,當原件不可見時設置選中狀態為單選,值選擇toggle即可,這樣當鼠標點擊時就會切換到單選框“原件”的選中狀態。
2、接著我們給單選按鈕設置交互事件,當我們選中時將白色的勾選顯示出來,取消選中時隱藏,這里需要注意的一點就是我們要給要給“單選按鈕”原件設定編組名稱,這樣當你選擇其他單選按鈕時這個按鈕才會被隱藏(否則每個按鈕都是獨立的單選按鈕了)。
重點:一定要給“單選按鈕”原件設定編組名稱,不然當你切換其他按鈕時當前按鈕不會被隱藏,這樣就沒法實現重復點擊該按鈕的狀態了,下面是單選按鈕視覺效果演示。
以上就是Axure修改默認的單選復選框按鈕樣式的教程,希望大家喜歡,請繼續關注武林網。
相關推薦:
新聞熱點
疑難解答
圖片精選