檔案上傳

可供使用者從裝置中選擇檔案。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-file">
    <input type="file" />
</div>
狀態
停用的

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

<div class="ts-file">
    <input type="file" disabled />
</div>
外觀
實心填充的

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

<div class="ts-file is-solid">
    <input type="file" />
</div>
底線的

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

<div class="ts-file is-underlined">
    <input type="file" />
</div>
負面的

令一個欄位看起來帶有負面或危險的狀態,通常可能是指這個欄位沒有選擇檔案。

<div class="ts-file is-negative">
    <input type="file" />
</div>
尺寸

更改檔案上傳的尺寸與文字大小。

<div class="ts-file is-small">
    <input type="file" />
</div>
<div class="ts-file">
    <input type="file" />
</div>
<div class="ts-file is-large">
    <input type="file" />
</div>
密度

變更檔案上傳的高度,看起來更緊密或是令人感到寬鬆。

<div class="ts-file is-dense">
    <input type="file" />
</div>
<div class="ts-file">
    <input type="file" />
</div>
<div class="ts-file is-relaxed">
    <input type="file" />
</div>
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標