Options

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

Option

Prefix option

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

Checkbox

選項為複選或可取消選擇時，請使用 Checkbox。若使用 Vue 組件，則為 <k-checkbox> 並設置 v-model。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ea id labore necessitatibus nesciunt obcaecati porro possimus quaerat. Deleniti eaque inventore laborum maiores natus numquam praesentium quaerat repudiandae sapiente voluptatibus.

Output: false

<k-checkbox name="demo1" v-model="">{文字}</k-checkbox>

Radio

選項為單選時，請使用 Radio。若使用 Vue 組件，則為 <k-radio>。

Male

Female

Output: male

<k-radio name="demo2" label="male" v-model="demo2">Male</k-radio> <k-radio name="demo2" label="female" v-model="demo2">Female</k-radio>

Group

Option 可使用一個 <div class="option-grp"></div> 做群組化。

使用 vue 組件時，可使用 <k-checkbox-grp> 或 <k-radio-grp> 作為 <k-checkbox> 與 <k-radio> 的父組件，同時可將 v-model 設置在 Group 上，這樣就可以省去每一個單元組件都要設定 v-model 的瑣事，同時也可以在父層群組組件使用 name 屬性，這麼一來再一次省去每一個單元組件的設置。

Male

Female

Output: male

<k-radio-grp v-model="demo3" name="demo3"> <k-radio label="male">Male</k-radio> <k-radio label="female">Female</k-radio> </k-radio-grp>

Status

可設置 Waring 與 Danger 狀態到 Option 上，可使用 .warning 或 status="warning"。使用 Vue 組件時，可新增 status 屬性。

Warning

Danger

Output: []

Warning

Danger

Output:

<k-checkbox status="warning"></k-checkbox> <k-checkbox status="danger"></k-checkbox>

Choice

Prefix choice

自定義樣式的 Checkbox 與 Radio，主要用於單選項，因此建議使用 Radio。使用類別名稱為 .choice 並以此為子元件前綴詞。可使用 .choice-grp 群組化。可使用 [disabled] 或 .is:off 表示禁止。

使用 Vue 組件，可在 <k-checkbox-grp> 或 <k-radio-grp> 加上 ui="choice"。

Output: 25

<k-radio-grp ui="choice" v-model="demo5" name="demo5"> <k-radio label="25">25</k-radio> <k-radio label="26">26</k-radio> <k-radio label="27">27</k-radio> </k-radio-grp>

Primary Color

另外可於 .choice-grp 上新增 .clr:primary，讓被選擇項目呈現 Primary 色彩。若使用 Vue 組件可加上參數 clr="primary"。

<k-radio-grp ui="choice" clr="primary" name="demo6" v-model="demo6"> <k-radio label="xs">XS</k-radio> <k-radio label="sm">SM</k-radio> <k-radio label="md">MD</k-radio> <k-radio label="lg">LG</k-radio> <k-radio label="xl">XL</k-radio> </k-radio-grp>

Spirit

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

<k-radio-grp ui="choice" clr="primary" name="demo7" v-model="demo7"> <k-radio label="8" badge="日">8</k-radio> </k-radio-grp>

色票

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

圓形樣式

將每個 .choice 設定為圓形，加上 .:circle 即可。可在 Vue 組件加上 stl="circle"。

<k-radio-grp ui="choice" stl="circle" name="demo8" v-model="demo8"> <k-radio label="" color="{color}"></k-radio> </k-radio-grp>

尺寸

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

Switch

Prefix switch

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

使用 Vue 組件，可在 <k-checkbox-grp> 或 <k-radio-grp> 加上 ui="switch"。

Output: false

<k-checkbox ui="switch" name="demo11" v-model="demo11"></k-checkbox>

圓形樣式

在 .switch 加上 .:circle。

Output: false

<k-checkbox ui="switch" stl="circle" name="demo12" v-model="demo12"></k-checkbox>

Chip

Prefix chip

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

使用 Vue 組件，可在 <k-checkbox-grp> 或 <k-radio-grp> 加上 ui="chip"。

米漿

豆漿

Output: []

<k-checkbox-grp ui="chip" name="demo13" v-model="demo13"> <k-checkbox label="米漿">米漿</k-checkbox> <k-checkbox label="豆漿">豆漿</k-checkbox> </k-checkbox-grp>

搭配頭像

在 .chip_obj 內加上 Avatar 組件。若使用 Vue 組件，則可使用 k-avatar 組件，並加上 slot="avatar"。

米漿

豆漿

Output: []

<k-checkbox-grp ui="chip" name="demo14" v-model="demo14"> <k-checkbox label="米漿"> <k-avatar slot="avatar" src=""></k-avatar> 米漿 </k-checkbox> <k-checkbox label="豆漿"> <k-avatar slot="avatar" src=""></k-avatar> 豆漿 </k-checkbox> </k-checkbox-grp>

Large Size

可在 .chip 加上 .sz:lg 讓 Avatar 頭像放大約 130%。在 Vue 組件可加上屬性 sz="lg"。

Kei Cheng

Output: []

<k-checkbox-grp ui="chip" sz="lg" name="demo15" v-model="demo15value"> <k-checkbox label="1"> <k-avatar clr="dark" slot="avatar">K</k-avatar> Kei Cheng </k-checkbox> </k-checkbox-grp>

Vue

使用 Checkbox 時，請使用 <k-checkbox> 與 <k-checkbox-grp>；若使用 Radio 則使用 <k-radio> 與 <k-radio-grp>。

Checkbox Attributes

屬性名	資料類型	值	預設	範例	說明
ui	String	`option`, `choice`, `switch`, `chip`	`option`	`ui="chip"`	用於切換不同 UI 介面
status	String	`warning`, `danger`	無	`status="warning"`	顯示狀態
name	String	any	無	`name="gender"`	表單元件名稱，用於傳遞至 input 上的 name 屬性的值
label	String, Number, Boolean, Array	any	無	`label="male"`	複選時作為 value 屬性值
checked	Boolean	`false`, `true`	`false`	`:checked="true"`	可設定資料已選取，僅 Checkbox 組件可用
disabled	Boolean	`false`, `true`	`false`	`:disabled="true"`	可設定成失效、無法選取的狀態
color	String	色碼	無	`color="#F90"`	當 ui 為 choice 時，可設定 color 來當作色票選取使用。
badge	String, Number	any	無	`badge="月"`	當 ui 為 choice 時，可設定附屬資訊。

Radio Attributes

屬性名	資料類型	值	預設	範例	說明
ui	String	`option`, `choice`, `switch`, `chip`	`option`	`ui="chip"`	用於切換不同 UI 介面
status	String	`warning`, `danger`	無	`status="warning"`	顯示狀態
name	String	any	無	`name="gender"`	表單元件名稱，用於傳遞至 input 上的 name 屬性的值
label	String, Number	any	無	`label="male"`	複選時作為 value 屬性值
disabled	Boolean	`false`, `true`	`false`	`:disabled="true"`	可設定成失效、無法選取的狀態
color	String	色碼	無	`color="#F90"`	當 ui 為 choice 時，可設定 color 來當作色票選取使用。
badge	String, Number	any	無	`badge="月"`	當 ui 為 choice 時，可設定附屬資訊。

Checkbox/Radio Group Attributes

屬性名	資料類型	值	預設	範例	說明
ui	String	`option`, `choice`, `switch`, `chip`	`option`	`ui="chip"`	用於切換不同 UI 介面，若設定在 Group 上，則子元件不需要再設定 ui 屬性
name	String	any	無	`name="gender"`	表單元件名稱，用於傳遞至 input 上的 name 屬性的值。若設定在 Group 上，子元件不需要個別設定 name 屬性。