本文從輸入框的定義、使用場景、相關組件、交互說明都有詳細的分析,作者還附上輸入框的源文件供大家參考學習。
往期回顧:
交互控件科普系列!Banner 的常見樣式和設計注意事項總結
當你需要展示一段持續提示,卻又不想打斷用戶操作。用 Dialog 彈窗會打斷用戶操作,Toast 又不夠明顯,Snackbar 會自動消失,那麼不妨就來跟我一起認識下能滿足該要求的 Banner 控件吧。
閱讀文章 >>
定義
通過鼠標或鍵盤輸入文字、字母、数字、符號內容。
使用場景
- 填寫表單時;
- 需要輸入文本數據時。
相關組件
- 當僅需要輸入数字時,使用 InputNumber 数字輸入框;
- 當進行搜索時,使用 Search 搜索框;
- 當需要進行包含圖片、文本等內容的複雜輸入時,使用 RichText 富文本編輯器。
交互說明
1. CASE1 輸入框高度說明
輸入框根據行數分為三種類型:單行輸入框、定高文本域、自適應高度文本域。
2. CASE2 輸入框寬度說明
- 輸入框寬度根據實際情況確定,寬度固定無自適應;
- 為方便閱讀,不可過寬(具體寬度由 UI 定義)。
3. CASE3 輸入內容說明
- 可輸入文字、字母、数字、符號;
- 如無特殊說明,不可輸入 emoji 表情;
- 如無特殊說明,第一個字符不可為空格或回車;
- 過濾文本樣式、鏈接;
- 輸入的內容為保密信息時,显示圓點,不直接显示字符。
4. CASE4 控件狀態說明
輸入框共分為啟用、聚焦、禁用、輸入中、加載、報錯、符合條件 7 種狀態。
5. CASE5 暗提示說明
未輸入任何內容時,輸入框中需显示暗提示:
6. CASE6 字數限制說明
輸入框必須對可輸入的字數進行限制,分為以下兩種限制方式:
源文件
下載鏈接: https://pan.baidu.com/s/1aq7dc2Iv3qpEF6g2PVF5uA 提取碼: ridu
備用下載鏈接:https://share.weiyun.com/5xrRyZ0
歡迎關注作者的微信公眾號:「愚者筆記」
未经-摩登3注册-摩登3测速官网-允许不得转载:摩登3注册-摩登3测速官网 » 無極五娛樂怎麼樣?_這個交互描述怎麼寫:InputText 輸入框