Collapse 折叠面板
折叠面板用于显示和隐藏内容。
| 类名 | 类型 | |
|---|---|---|
| collapse | 组件类 | Container element |
| collapse-title | 组件类 | Title element |
| collapse-content | 组件类 | Container for content |
| collapse-arrow | 装饰类 | Adds arrow icon |
| collapse-plus | 装饰类 | Adds plus/minus icon |
| collapse-open | 装饰类 | Force open |
| collapse-close | 装饰类 | Force close |
也可以查看 Accordion 手风琴 的例子
# Collapse with focus
This collapse works with focus. When div loses focus, it gets closed
Focus me to see content
tabindex="0" attribute is necessary to make the div focusable
# Collapse with checkbox
This collapse works with checkbox instead of focus. It needs to get clicked again to get closed.
Click me to show/hide content
hello
# Collapse using <details> and <summary> tag
`collapse-open` and `collapse-close` doesn't work with this method. You can add/remove `open` attribute to the <details> instead
Click to open/close
content
Using
<details> tag, we can't have animations because <details> tag doesn't allow CSS transitions.# With border and background color
Focus me to see content
tabindex="0" attribute is necessary to make the div focusable
# With arrow icon
Focus me to see content
tabindex="0" attribute is necessary to make the div focusable
# With arrow plus/minus icon
Focus me to see content
tabindex="0" attribute is necessary to make the div focusable
# Force open
I have collapse-open class
tabindex="0" attribute is necessary to make the div focusable
# Force close
I have collapse-close class
tabindex="0" attribute is necessary to make the div focusable
# Custom colors for collapse that works with focus
Use Tailwind CSS `group` and `group-focus` utilities to apply style when parent div is focused
Focus me to see content
tabindex="0" attribute is necessary to make the div focusable
# Custom colors for collapse that works with checkbox
Use Tailwind CSS `peer` and `peer-checked` utilities to apply style when sibling checkbox is checked
Click me to show/hide content
hello
你有什么问题么？ 向社区提问题
你发现了 bug 么？ 在 GitHub 提 issue
你喜欢 daisyUI？ 在 twitter、知乎、微博宣传 daisyui 吧！
支持daisyUI的开发:
Open Collective
