根據組件的用途,可以分為六大類:Feedback 反饋、form 表單、basic 基礎、data 數據 、navigation 導航、other 其他。
表單在網頁中主要負責信息數據採集功能,用戶需要填寫輸入信息數據並且提交到後端數據庫,以此完成信息的採集,則這種組件就是表單組件。
本文主要講解表單中的treeselect樹選擇、datepicker日期選擇器和timepicker時間選擇器。
treeselect樹選擇
定義:
具有層級關係的選擇器。
使用場景:
需要使用選擇器,同時可以提供層級結構的枚舉項時。彈出一個下拉選項給用戶選擇操作。具有單選和多選的功能。例如用戶搜索關鍵詞時,需要對搜索結果進行二次篩選,常見的使用樹選擇有城市、組織架構等。
基礎樣式:
只能選擇枚舉,不支持在選擇框中進行關鍵詞搜索,且為單選。用戶選擇選項後,浮層收起,表單為完成態。
對於選項中層級結構是否展開收起,則根據父子層級架構來看待,例如省市比較多,默認展開的話,查找起來會變得很困難,收起的話則可以快速找到省,再次點擊可快速找到市。
選擇框支持搜索,在用戶輸入字符串過程中,枚舉項動態匹配,且匹配的子集展開。當搜索無結果時出現搜索無結果提示,點擊無交互效果。
含有搜索樣式(可選擇空選項):
用戶如果選擇空值,則提交數據為城市為空。
含有搜索樣式(可清空已選項):
如果用戶已選擇,可提供用戶清空已選擇的機會。用戶如果已選擇選項,則鼠標hover,出現叉號,點擊叉號,清空選擇框。
含有搜索樣式(多選):
用戶在輸入字符串時,選項中出現匹配選項,點擊複選框,輸入框出現選項tag同時清空輸入框。選擇框支持搜索,在用戶輸入字符串過程中,枚舉項動態匹配,且匹配的子集展開。點擊選擇器和選擇浮層以外其他區域,則浮層收起,樹選擇器為完成態。
datepicker日期選擇器
定義:
選擇日期的組件。
使用場景:
當用戶需要填寫年月日/年月時點擊選擇框,出現日期選擇浮層例如在boss直聘填寫工作經理的表單中,需要填寫在職時間,這裡使用的就是datepicker日期選擇器。
基礎樣式:
非時間段日期選擇器。點擊選擇框,出現日期選擇浮層,默認停留在用戶當天日期。用戶未選擇時,清空按鈕默認置灰,已選清空按鈕恢復正常狀態。
年月樣式:
只能選擇年月,用戶激活輸入框,出現年月選擇浮層。默認停留在用戶當月,清空按鈕默認置灰。用戶點擊選擇時,浮層收起,選擇框出現已選擇當年月。
時間段樣式:
時間段日期組件在結束時會多一個選項為至今。用戶選擇至今,則結束時間一直持續到未來。
timepicker時間選擇器
定義:
用於用戶具體選擇時間點時。
使用場景:
當用戶需要選擇具體時/分點擊選擇框,出現時間選擇浮層。基礎樣式:
點擊選擇框,出現時間選擇浮層,用戶可以用戶鼠標上下滾動滑輪選擇具體的時間點。
分鐘刻度樣式:
有的場景,不需要具體的分鐘,具體的分鐘在選擇起來因為選項太多而變得麻煩,用戶更多的使用場景是按照刻度來設置。點擊選擇框,出現時間選擇浮層,用戶可以用戶鼠標上下滾動滑輪選擇大概的的時間點。
日期和時間組合樣式:
有的表單,既要提交日期也要提交時間,這種情況可以用兩個表單設計,datepiecker和timepicker兩者組合,也可以在一個表單上完成,如下所示,用戶在選擇了日期後,出現時間選擇浮層。