Input 輸入框

2022-05-16, Yii

# 標題 內容
1 Status 數據輸入
2 Zeplin https://zpl.io/bePdjkD
3 Ant Design https://ant.design/components/input-cn/
4 Web #
5 App #

定義

使用者可透過鍵盤輸入內容。

何時使用

需要使用者填寫資訊時。提供組合型輸入框,帶搜索的輸入框等。

位置

位於卡片、搜尋條件裡面。

規則

  1. 搜尋輸入框至多可輸入100字元為限,超過輸入框範圍時滑鼠光標停留在輸入的最後一個字。
  2. 搜尋條件裡的輸入框皆不設定必填,預設為搜尋所有項目。
  3. Spec 需註明各個輸入框的限制條件(字數限制、只可輸入中文、英文或數字;或不可輸入什麼,除了註明輸入的限制外,若有必要需設定對應的錯誤提示)。
  4. 編碼類:至少需輸入前綴 3 字元,採模糊搜尋。
  5. 名稱類:至少需輸入 2 字元,採模糊搜尋。

類型

1. 字數限制
  • 有字數限制:列表內的基本輸入框皆應有字數限制,除了無法定義字數限制的欄位之外(例如:Email、網址)。
  • 無字數限制:搜尋條件的搜尋框皆無字數限制,以及列表內無法定義字數限制的欄位(例如:Email、網址)也無字數限制。
2. 多行輸入
  • 用於備註,有字數限制。
  • 高度預設顯示 3 行,可縮放高度。
3. 前置/後置標籤

輸入一些特定的標籤,通常在需要添加展示時使用。

4. 組合輸入框

用於一些固定組合或固定格式輸入的場景,如輸入電話號碼,地址。

5. 數字輸入框
  • 數字輸入框由增加、減少、數字輸入組成。
  • 每次點擊增加按鈕(或減少按鈕),數字增加(或減少)的量是標準的按鈕。
  • 在輸入幅度達到最大或灰色限制時,按鈕不可點。
6. 登入輸入框