<div class="ts-select">
<select>
<option>蘋果</option>
<option>西瓜</option>
<option>香蕉</option>
</select>
</div>
使下拉選擇欄位呈現無法互動、點擊的模樣。若你希望真正地停用選取行為,請在該下拉選擇欄位增加 disabled
標籤以符合 HTML 規範。
<div class="ts-select is-disabled">
<select>
<option>MySpace</option>
<option>Facebook</option>
<option>Twitter</option>
</select>
</div>
帶有實心背景的欄位能更明確地呈現這是可供互動的元素。
<div class="ts-select is-solid">
<select>
<option>Golang</option>
<option>PHP</option>
<option>Node.js</option>
</select>
</div>
以實心背景和底線明顯呈現一個欄位,讓使用者如填寫表單一樣。
<div class="ts-select is-underlined">
<select>
<option>台東</option>
<option>高雄</option>
<option>台南</option>
</select>
</div>
移除所有多餘的結構,僅呈現下拉文字與輔助圖示。
<div class="ts-select is-basic">
<select>
<option>AMD</option>
<option>Intel</option>
</select>
</div>
令一個欄位看起來帶有負面或危險的狀態,通常可能是指這個欄位沒有被選擇。
<div class="ts-select is-negative">
<select>
<option>Yami Odymel</option>
<option>Mac Taylor</option>
<option>Val Pyen</option>
</select>
</div>
使欄位的寬度符合父容器的寬度。
<div class="ts-select is-fluid">
<select>
<option>千導院楓</option>
<option>粒櫻杏子</option>
<option>若葉昴</option>
</select>
</div>
更改下拉式選擇的大小。
<div class="ts-select is-small">
<select>
<option>小型欄位</option>
</select>
</div>
<div class="ts-select">
<select>
<option>預設欄位</option>
</select>
</div>
<div class="ts-select is-large">
<select>
<option>大型欄位</option>
</select>
</div>