Options

各種客製化單選與複選類表單元件,有各自的類別名稱。


Option

自定義樣式的 Checkbox 與 Radio。使用類別名稱為 .option 並以此為子元件前綴詞。可使用 .option-grp 群組化。另外可在 .option 加上狀態類別或屬性。Option 與 Choice 不需要 .is:on,只要在被選取項目的 <input> 加上 [checked] 就可以了。




<div class="option-grp"> <label class="option"> <input type="{checkbox / radio}" class="option_input"> <span class="option_obj">{文字}</span> </label> </div>

Choice

自定義樣式的 Checkbox 與 Radio,主要用於單選項,因此建議使用 Radio。使用類別名稱為 .choice 並以此為子元件前綴詞。可使用 .choice-grp 群組化。可使用 [disabled].is:off 表示禁止。另外可於 .choice-grp 上新增 .clr:primary,讓被選擇項目呈現 Primary 色彩。


<div class="choice-grp"> <label class="choice"> <input type="{checkbox / radio}" class="choice_input"> <span class="choice_obj">{文字}</span> </label> </div>

Spirit

可新增附加訊息於 Choice 上。在 .choice 內新增 .choice_spirit

<div class="choice-grp"> <label class="choice"> <input type="{checkbox / radio}" class="choice_input"> <span class="choice_obj">{文字}</span> <sup class="choice_spirit">{文字}</sup> </label> </div>

色票

Choice 除了可以作為尺碼、尺寸、日期等選擇項目之外,也可以作為色票提供使用者選擇。作法與之前的方式相同,只需要在 .choice_color 設定色碼即可。這裡的色碼取決於產品配色而不是 Framework 的配色。如果在深色背景上可在 .choice_color 加上 .:light


<div class="choice-grp"> <label class="choice"> <input type="{checkbox / radio}" class="choice_input"> <span class="choice_color" style="background-color: {color}; color: {color};"></span> </label> </div> <div class="choice-grp"> <label class="choice"> <input type="{checkbox / radio}" class="choice_input"> <span class="choice_color :light" style="background-color: {color}; color: {color};"></span> </label> </div>

圓形樣式

將每個 .choice 設定為圓形,加上 .:rounded 即可。

<label class="choice :rounded"></label>

尺寸

可設定 .sz:sm.sz:xs 來調節大小。


<label class="choice sz:sm"></label> <label class="choice sz:xs"></label>

Switch

自定義樣式的 Checkbox。使用類別名稱為 .switch 並以此為子元件前綴詞。

<label class="switch"> <input type="checkbox" class="switch_input"> <span class="switch_obj"></span> </label>

圓形樣式

.switch 加上 .:circle

<label class="switch :circle"> <input type="checkbox" class="switch_input"> <span class="switch_obj"></span> </label>

Chip

用以多選項目按鈕化的 Checkbox。使用類別名稱為 .chip 並以此為子元件前綴詞。

<label class="chip"> <input type="checkbox" class="chip_input"> <div class="chip_obj"> <span class="chip_txt"></span> </div> </label>

搭配頭像

.chip_obj 內加上 Avatar 組件。可在 .chip 加上 .sz:lg 讓 Avatar 頭像放大約 130%。


<label class="chip"> <input type="checkbox" class="chip_input"> <div class="chip_obj"> <div class="avatar"></div> <span class="chip_txt"></span> </div> </label>