輸入欄位 - Tocas UI

停用的

使輸入欄位呈現無法互動、點擊的模樣。若你希望真正地停用輸入行為，請在該輸入欄位增加 disabled 標籤以符合 HTML 規範。

<div class="ts-input is-disabled">
    <input type="text" placeholder="使用者帳號">
</div>

實心填充的

帶有實心背景的輸入欄位能更明確地呈現這是可供互動的元素。

<div class="ts-input is-solid">
    <input type="text" placeholder="傳送訊息…">
</div>

底線的

以實心背景和底線明顯呈現一個輸入欄位，讓使用者如填寫表單一樣。

<div class="ts-input is-underlined">
    <input type="text" placeholder="搜尋">
</div>

基本的

僅帶有基本結構而沒有框線或是內距。

<div class="ts-input is-basic is-start-icon">
    <span class="ts-icon is-magnifying-glass-icon"></span>
    <input type="text" placeholder="輸入關鍵字…">
</div>

圓角的

使角落以圓形呈現。

<div class="ts-input is-circular">
    <input type="text" placeholder="搜尋 1,382 位使用者…">
</div>

可調整尺寸的

用於多行輸入欄位可以讓使用者拖曳角落邊緣重新調整輸入欄位的高度。

<div class="ts-input is-resizable">
    <textarea placeholder="回覆此訊息…"></textarea>
</div>

帶標籤的

輸入欄位的開頭或結束位置可以擺放文字標籤，作為前輟或後輟提示。

$

https:// .co

.00

<div class="ts-input is-start-labeled">
    <span class="label">$</span>
    <input type="text">
</div>
<div class="ts-input is-labeled">
    <span class="label">https://</span>
    <input type="text">
    <span class="label">.co</span>
</div>
<div class="ts-input is-end-labeled">
    <input type="text">
    <span class="label">.00</span>
</div>

負面的

表示輸入欄位出錯可能不符合表單驗證規則。

<div class="ts-input is-negative">
    <input type="text" placeholder="電子信箱地址">
</div>

側邊圖示

欄位的左右兩側可以擺放輔助圖示令使用者更加一目瞭然其用途。

<div class="ts-input is-start-icon">
    <span class="ts-icon is-phone-icon"></span>
    <input type="text" placeholder="電話號碼">
</div>
<div class="ts-input is-icon">
    <span class="ts-icon is-phone-icon"></span>
    <input type="text" placeholder="電話號碼">
    <span class="ts-icon is-triangle-exclamation-icon"></span>
</div>
<div class="ts-input is-end-icon">
    <input type="text" placeholder="密碼">
    <span class="ts-icon is-lock-icon"></span>
</div>

尺寸

更改輸入欄位的大小。

<div class="ts-input is-small">
    <input type="text" placeholder="小型輸入欄位">
</div>
<div class="ts-input">
    <input type="text" placeholder="預設輸入欄位">
</div>
<div class="ts-input is-large">
    <input type="text" placeholder="大型輸入欄位">
</div>

密度

變更輸入欄位的高度，看起來更緊密或是令人感到寬鬆。

<div class="ts-input is-dense">
    <input type="text" placeholder="緊密欄位">
</div>
<div class="ts-input">
    <input type="text" placeholder="預設欄位">
</div>
<div class="ts-input is-relaxed">
    <input type="text" placeholder="寬鬆欄位">
</div>

顏色選擇器

透過原生的輸入欄位選擇指定的顏色。

<div class="ts-input">
    <input type="color">
</div>

日期與時間

HTML 有提供數種用於時間、日期與週期的輸入欄位。

<div class="ts-input">
    <input type="datetime-local">
</div>
<div class="ts-input">
    <input type="date">
</div>
<div class="ts-input">
    <input type="time">
</div>
<div class="ts-input">
    <input type="month">
</div>
<div class="ts-input">
    <input type="week">
</div>