輸入欄位 - Tocas UI

範例

明暗色系

遵循使用者設定

亮色

暗色

縮放

標準

放大

標準

縮小

<div class="ts-input">
    <input type="text" placeholder="搜尋關鍵字…">
</div>

狀態

停用的

使輸入欄位呈現無法互動、點擊的模樣。

<div class="ts-input">
    <input type="text" placeholder="使用者帳號" disabled>
</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>