Accordion

Accordion 主要由 .accordion.accordion_head.accordion_content 組成,如你所見所有組件容器以 .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
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 3 Disabled
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.
<div class="accordion"> <h5 class="accordion_head is:on">~略~</h5> <div class="accordion_content">~略~</div> <h5 class="accordion_head">~略~</h5> <div class="accordion_content">~略~</div> <h5 class="accordion_head is:off">~略~</h5> <div class="accordion_content">~略~</div> </div>

Bordered

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

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
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 3
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.
<div class="accordion :bordered"></div>

Separated

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

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
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 3
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.
<div class="accordion :separated"></div>

Summary

<summary> 是 HTML5 新標籤之一,經常與 <details> 搭配使用。Lazy4 將 Accordion 樣式套用到 <summary><details> 上,使用方式也很相似。

<details> 相當於 <div class="accordion">,則 <summary> 則是 <h5 class="accordion_head">,另外則需要一個裝載內容的容器,需要 <div class="details_content"><details> 本身內建 [open] 屬性,所以可以使用它來取代 is:on。與 Accordion 可以一次多組資料不同的是,<details><summary> 一次只能搭配一組。

Summary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ipsam odio soluta. Aliquid, incidunt laudantium nulla odio odit recusandae. Amet at aut delectus eveniet exercitationem explicabo nemo rerum suscipit vitae!

Summary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ipsam odio soluta. Aliquid, incidunt laudantium nulla odio odit recusandae. Amet at aut delectus eveniet exercitationem explicabo nemo rerum suscipit vitae!

<details open> <summary></summary> <div class="details_content"></div> </details>

Styles

<details> 也可以套用 :bordered:separated 樣式,只要加在 <details> 就完成了。

Summary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ipsam odio soluta. Aliquid, incidunt laudantium nulla odio odit recusandae. Amet at aut delectus eveniet exercitationem explicabo nemo rerum suscipit vitae!

Summary

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ipsam odio soluta. Aliquid, incidunt laudantium nulla odio odit recusandae. Amet at aut delectus eveniet exercitationem explicabo nemo rerum suscipit vitae!

<details :bordered></details> <details :separated></details>