中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本篇文章為大家展示了如何實(shí)現(xiàn)checkbox多選框效果~

checkbox多選框和radio一樣在任何Web和APP應(yīng)用中都非常常見，且形式更多樣，我們所要實(shí)現(xiàn)的效果如下：

實(shí)現(xiàn)步驟如下：

1. 從Sketch或Adobe XD導(dǎo)入設(shè)計(jì)內(nèi)容，內(nèi)容中分別包含多選內(nèi)容框（觸發(fā)圖標(biāo)）和選中效果框。

2. 我們?yōu)椤癮rt-icon”添加觸發(fā)效果：選中“art-icon”圖層 – 選擇“單擊”觸發(fā)器；

點(diǎn)擊“單擊”下方的“+”號(hào)選擇“條件” – 設(shè)置“rectangle-ART”圖層 – 選擇“透明度” – 選擇“=”條件 – 選擇“1a數(shù)值” – 填入“0”；

在“條件”下選擇“透明度” – 選擇“rectangle-ART”圖層 – 選擇“透明度變至” – 輸入“100”或?qū)⒒瑒?dòng)條滑至最右。

按照上述方法，添加“條件”當(dāng)“rectangle-ART”圖層的透明度“=”“100”時(shí)，設(shè)置“rectangle-ART”的透明度變至“0”。

通過以上操作，我們?cè)O(shè)置好了“ART”的選中/未選中切換效果。

完整的操作步驟如下：

特別注意：如果“rectangle-ART”圖層在“art-icon”圖層的上方，造成當(dāng)“ART”為選中狀態(tài)時(shí)，“rectangle-ART”遮蓋掉“art-icon”，使得“art-icon”圖層無法被觸碰到，此時(shí)必須要選中“rectangle-ART”圖層的“可觸碰低層級(jí)圖層”選項(xiàng)，才能得到正確的交互效果。

3. 按照步驟2依次設(shè)置其他幾個(gè)多選框的效果。

4. 按照步驟2的方式，我們可以設(shè)置“ALL”的選中/未選中切換效果：同樣的，我們添加條件“rectangle-ALL”的“透明度”“=”“0”的，將所有9個(gè)選中框的透明度設(shè)置為100；再添加條件“rectangle-ALL”的“透明度”“=”“100”時(shí)，將所有9個(gè)選中框的透明度設(shè)置為0。

5. 至此，我們已經(jīng)設(shè)置好了所有多選框的觸發(fā)效果，可以在預(yù)覽窗內(nèi)查看實(shí)際效果了。

本文由 @ROGER 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議