Accordion

Prefix accordion

Accordion 主要由 .accordion、.accordion_head 與 .accordion_body 組成，如你所見所有組件容器以 .accordion 為類別名稱並且以此作為子組件前綴詞。另外啟用狀態請在 .accordion_head 加上 is:on，如果是取消狀態則加上 .is:off。可選擇不同級數的 Header 來決定 .accordion_head 的字級樣式，也可使用 Button 取代。

Accordion Header 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi blanditiis dolorum ipsa maxime placeat quae qui quia quod sunt voluptatibus. Est excepturi hic labore neque nisi officia quaerat quibusdam velit.

Accordion Header 2

Accordion Header 3

<k-accordion> <k-accordion-item v-for="(v, k) in data" :title="v.title"> {{v.content}} </k-accordion-item> </k-accordion>

Bordered

框線樣式可在 .accordion 加上 :bordered。

Accordion Header 1

Accordion Header 2

Accordion Header 3

<k-accordion stl="bordered"> <k-accordion-item v-for="(v, k) in data" :title="v.title"> {{v.content}} </k-accordion-item> </k-accordion>

Separated

框線樣式可在 .accordion 加上 :separated。

Accordion Header 1

Accordion Header 2

Accordion Header 3

<k-accordion stl="separated"> <k-accordion-item v-for="(v, k) in data" :title="v.title"> {{v.content}} </k-accordion-item> </k-accordion>

Vue

組件名稱為 <k-accordion>。每一個內容項目為 <k-accordion-item>。

Accordion Attributes

屬性名	資料類型	值	預設	範例	說明
stl	String	`bordered`, `separated`	`null`	`stl="bordered"`	變更樣式
index	String \| Number	0~*	`0`	`index="1"`	預設開啟第幾個項目，與陣列計算相同，從 0 開始
collapse	Boolean	`true`, `false`	`false`	`:collapse="true"`	可同時顯示多個項目

Accordion Header 1

Accordion Header 2

Accordion Header 3

<k-accordion stl="separated"></k-accordion>

<k-accordion index="1"></k-accordion>

<k-accordion :collapse="true"></k-accordion>

Accordion Item Attributes

<k-accordion-item> 可設置連結，若是設置連結則不需要顯示內容。

屬性名	資料類型	值	預設	範例	說明
title	String	無，但為必需項目。若沒有值，不顯示這個 Item	`null`	`title="Hello World!"`	標題設置
h	String \| Number	如同 h1 ~ h6，可設置 6 種字級變化	`5`	`h="6"`	標題字級設定
disabled	Boolean	`true`, `false`	`false`	`:disabled="true"`	當為 true 時，該項目為禁用狀態。
href	String	無	`null`	`href="/product"`	可指定頁面或網址連結。
target	String	`_self`, `_parent`, `_top`, `_blank`	`_self`	`target="_blank"`	設定連結開啟方式，搭配 href 使用
to	String \| Object	無	`null`	`to="/"`	使用 Vue router 指定路徑，若同時設定 href 則以 href 優先。
replace	Boolean	`true`, `false`	`false`	`:replace="true"`	設定是否記錄於 router 的 history，若為 true 則不紀錄。

Hello World

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dicta dignissimos officia quo repellat repellendus, veritatis. Beatae cupiditate deleniti ducimus, fugit maxime molestiae non perspiciatis quasi quisquam soluta sunt, voluptates.

<k-accordion-item title="Hello World"></k-accordion-item>

<k-accordion-item title="Hello World" h="4"></k-accordion-item>