折叠和展开内容区块，非常适合常见问题和内容较多的区域。
<flux:accordion> <flux:accordion.item> <flux:accordion.heading>What's your refund policy?</flux:accordion.heading> <flux:accordion.content> If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance. </flux:accordion.content> </flux:accordion.item> <flux:accordion.item> <flux:accordion.heading>Do you offer any discounts for bulk purchases?</flux:accordion.heading> <flux:accordion.content> Yes, we offer special discounts for bulk orders. Please reach out to our sales team with your requirements. </flux:accordion.content> </flux:accordion.item> <flux:accordion.item> <flux:accordion.heading>How do I track my order?</flux:accordion.heading> <flux:accordion.content> Once your order is shipped, you will receive an email with a tracking number. Use this number to track your order on our website. </flux:accordion.content> </flux:accordion.item></flux:accordion>可以直接将 heading 文本作为属性传入，从而减少标记量。
<flux:accordion.item heading="What's your refund policy?"> If you are not satisfied with your purchase, we offer a 30-day money-back guarantee. Please contact our support team for assistance.</flux:accordion.item>启用展开过渡，让交互更加顺滑。
<flux:accordion transition> <!-- ... --></flux:accordion>限制某个手风琴条目被展开。
<flux:accordion.item disabled> <!-- ... --></flux:accordion.item>确保任意时刻只有一个手风琴条目处于展开状态。
<flux:accordion exclusive> <!-- ... --></flux:accordion>默认展开特定的手风琴条目。
<flux:accordion.item expanded> <!-- ... --></flux:accordion.item>将图标显示在标题之前，而不是之后。
<flux:accordion variant="reverse"> <!-- ... --></flux:accordion>|
属性
|
说明
|
|---|---|
| variant | 当设置为 reverse 时，会把图标显示在标题之前，而不是之后。 |
| transition | 当 true 时，会启用展开过渡，让交互更顺滑。默认值：false。 |
| exclusive | 当 true 时，任意时刻只能有一个手风琴条目处于展开状态。默认值：false。 |
|
Prop
|
Description
|
|---|---|
| heading | 用于简写 flux:accordion.heading 的内容。 |
| expanded | 当 true 时，该手风琴条目默认处于展开状态。默认值：false。 |
| disabled | 当 true 时，该手风琴条目无法展开或收起。默认值：false。 |