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

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

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