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

本文主要講解的是級(jí)聯(lián)組件、數(shù)字輸入、單復(fù)選框和開(kāi)關(guān)，一起來(lái)文中看看~

cascade級(jí)聯(lián)組件

定義：存在父子層級(jí)關(guān)系的選擇枚舉組件。

使用場(chǎng)景：

1. 用于含有層級(jí)關(guān)系的枚舉組件，例如：省市、組織架構(gòu)、不同導(dǎo)航層級(jí)等；
2. 點(diǎn)擊激活選擇框，出現(xiàn)級(jí)聯(lián)選擇浮層。

例如：boss直聘首頁(yè)搜索，前置公司所在城市，點(diǎn)擊城市出現(xiàn)城市選擇組件，鼠標(biāo)hover出現(xiàn)下級(jí)選項(xiàng)。

基礎(chǔ)樣式：只能選擇枚舉，不支持在選擇框中進(jìn)行關(guān)鍵詞搜索，且為單選。用戶選擇選項(xiàng)后，浮層收起，表單為完成態(tài)。

存在下級(jí)菜單的選項(xiàng)會(huì)出現(xiàn)右箭頭，提示用戶含有下一級(jí)選項(xiàng)，鼠標(biāo)hover出現(xiàn)下一級(jí)選項(xiàng)。

清空樣式：用戶可以使用空選項(xiàng)填寫表單，防止用戶輸入數(shù)據(jù)后沒(méi)法取消所輸入的數(shù)據(jù)。

激活，出現(xiàn)第一級(jí)的級(jí)聯(lián)浮層，如果存在下一級(jí)則對(duì)應(yīng)選項(xiàng)出現(xiàn)右箭頭，hover出現(xiàn)下一級(jí)選項(xiàng)。含有清空選項(xiàng)的枚舉項(xiàng)，選擇清空則數(shù)據(jù)為空提交。

含有搜索樣式（可選擇空選項(xiàng)）：可通過(guò)搜索快速查詢到所需要到枚舉項(xiàng)。輸入關(guān)鍵詞，出現(xiàn)的下拉選擇以路徑的形式展示，匹配關(guān)鍵詞高亮。

inputnumber數(shù)字輸入

定義：僅允許輸入數(shù)值的組件，如果涉及到日期的話，且數(shù)值以年份日期的數(shù)據(jù)存儲(chǔ)，例如：今年是2018年，inputnumber工作年限為5年，則后端儲(chǔ)存為2013年，到了2019年數(shù)值變?yōu)?年。

使用場(chǎng)景：

1. 當(dāng)用戶需要輸入數(shù)值時(shí)；
2. 僅允許數(shù)字格式。

基礎(chǔ)樣式：只能輸入數(shù)值，當(dāng)輸入其他格式的時(shí)候，出現(xiàn)報(bào)錯(cuò)提示，同時(shí)輸入框的輸入內(nèi)容清空。

變種樣式：含有人民幣，百分比的數(shù)值等，需要將人民幣、百分比的符號(hào)體現(xiàn)出來(lái)，這時(shí)候就要用到輸入點(diǎn)的樣式。

radio單選組件

定義：一組互斥的選項(xiàng)，僅單選。

使用場(chǎng)景：

1. 選項(xiàng)低于五個(gè)時(shí)，且為單選；
2. 和select的區(qū)別是選項(xiàng)全部展示出來(lái)。

例如：boss直聘填寫個(gè)人信息時(shí)，性別選擇男女時(shí)，就是一個(gè)radio單選組件。

基礎(chǔ)樣式：當(dāng)單選時(shí)，且選擇項(xiàng)比較少時(shí)，選擇項(xiàng)都展示出來(lái)，使用單選組件。

變種樣式：選項(xiàng)和控件合為一體，整體更直觀。

checkbox復(fù)選框

定義：對(duì)于同一組選項(xiàng)，可以選擇多項(xiàng)的組件。

使用場(chǎng)景：

1. 在一組可選項(xiàng)中進(jìn)行多項(xiàng)選擇時(shí)；
2. 單獨(dú)使用可以表示兩種狀態(tài)之間的切換。

基礎(chǔ)樣式：多項(xiàng)選項(xiàng)需要選擇時(shí)使用。

單獨(dú)使用：單獨(dú)使用可以表示選中或非選中兩種狀態(tài)之間的切換。

switch開(kāi)關(guān)

定義：用于開(kāi)啟/關(guān)閉的選擇。

使用場(chǎng)景：

1. 需要表示開(kāi)關(guān)狀態(tài)/兩種狀態(tài)之間的切換時(shí)；
2. 表示兩種相互對(duì)立的狀態(tài)間的切換。

基礎(chǔ)樣式：默認(rèn)打開(kāi)關(guān)閉根據(jù)業(yè)務(wù)需求決定，僅展示開(kāi)關(guān)控件。

帶有文字樣式：默認(rèn)打開(kāi)關(guān)閉根據(jù)業(yè)務(wù)需求決定，開(kāi)關(guān)控件上有文字提示該控件的狀態(tài)。

禁用樣式：不可操作，只可查看開(kāi)關(guān)按鈕狀態(tài)。

相關(guān)閱讀

如何構(gòu)建Web端設(shè)計(jì)規(guī)范

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)理念篇

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇－反饋類

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇－文本與選擇器

設(shè)計(jì)規(guī)范 | Web端設(shè)計(jì)組件篇－樹(shù)和日期時(shí)間選擇器

#專欄作家#

UX，微信公眾號(hào)：UEDC，人人都是產(chǎn)品經(jīng)理專欄作家。前華為ITUX交互組組長(zhǎng)，現(xiàn)美團(tuán)點(diǎn)評(píng)高級(jí)交互設(shè)計(jì)師。

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

題圖來(lái)自 unsplash ，基于 CC0 協(xié)議