🎉 daisyUI 5.0 升级指南

折叠面板

折叠面板组件用于显示和隐藏内容，但一次只能保持一个项目打开状态。

类名		类型
collapse
组件
Collapse
collapse-title
部分
标题部分
collapse-content
部分
内容部分
collapse-arrow
修饰符
添加箭头图标
collapse-plus
修饰符
添加加号/减号图标
collapse-open
修饰符
强制打开
collapse-close
修饰符
强制关闭

折叠面板使用与collapse 组件相同的样式，但它可以使用单选输入框。您可以通过选中/取消选中隐藏的单选输入框来控制哪个项目处于打开状态。

所有具有相同名称的单选输入框协同工作，并且一次只能打开其中一个。如果页面上有多个折叠面板项集，请为每个集上的单选输入框使用不同的名称。

使用单选输入框的折叠面板

如何创建账户？
点击右上角的“注册”按钮，并按照注册流程操作。
我忘记了密码。我该怎么办？
在登录页面点击“忘记密码”，并按照发送到您电子邮件的说明操作。
如何更新我的个人资料信息？
转到“我的账户”设置，然后选择“编辑个人资料”进行更改。
<div class="$$collapse bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-1" checked="checked" />
  <div class="$$collapse-title font-semibold">How do I create an account?</div>
  <div class="$$collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>
<div class="$$collapse bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-1" />
  <div class="$$collapse-title font-semibold">I forgot my password. What should I do?</div>
  <div class="$$collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
</div>
<div class="$$collapse bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-1" />
  <div class="$$collapse-title font-semibold">How do I update my profile information?</div>
  <div class="$$collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
</div>
<div class="$$collapse bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-1" checked="checked" />
  <div class="$$collapse-title font-semibold">How do I create an account?</div>
  <div class="$$collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>
<div class="$$collapse bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-1" />
  <div class="$$collapse-title font-semibold">I forgot my password. What should I do?</div>
  <div class="$$collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
</div>
<div class="$$collapse bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-1" />
  <div class="$$collapse-title font-semibold">How do I update my profile information?</div>
  <div class="$$collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
</div>

带有箭头图标的折叠面板

如何创建账户？
点击右上角的“注册”按钮，并按照注册流程操作。
我忘记了密码。我该怎么办？
在登录页面点击“忘记密码”，并按照发送到您电子邮件的说明操作。
如何更新我的个人资料信息？
转到“我的账户”设置，然后选择“编辑个人资料”进行更改。
<div class="$$collapse $$collapse-arrow bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-2" checked="checked" />
  <div class="$$collapse-title font-semibold">How do I create an account?</div>
  <div class="$$collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>
<div class="$$collapse $$collapse-arrow bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-2" />
  <div class="$$collapse-title font-semibold">I forgot my password. What should I do?</div>
  <div class="$$collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
</div>
<div class="$$collapse $$collapse-arrow bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-2" />
  <div class="$$collapse-title font-semibold">How do I update my profile information?</div>
  <div class="$$collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
</div>
<div class="$$collapse $$collapse-arrow bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-2" checked="checked" />
  <div class="$$collapse-title font-semibold">How do I create an account?</div>
  <div class="$$collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>
<div class="$$collapse $$collapse-arrow bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-2" />
  <div class="$$collapse-title font-semibold">I forgot my password. What should I do?</div>
  <div class="$$collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
</div>
<div class="$$collapse $$collapse-arrow bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-2" />
  <div class="$$collapse-title font-semibold">How do I update my profile information?</div>
  <div class="$$collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
</div>

带有加号/减号图标的折叠面板

如何创建账户？
点击右上角的“注册”按钮，并按照注册流程操作。
我忘记了密码。我该怎么办？
在登录页面点击“忘记密码”，并按照发送到您电子邮件的说明操作。
如何更新我的个人资料信息？
转到“我的账户”设置，然后选择“编辑个人资料”进行更改。
<div class="$$collapse $$collapse-plus bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-3" checked="checked" />
  <div class="$$collapse-title font-semibold">How do I create an account?</div>
  <div class="$$collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>
<div class="$$collapse $$collapse-plus bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-3" />
  <div class="$$collapse-title font-semibold">I forgot my password. What should I do?</div>
  <div class="$$collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
</div>
<div class="$$collapse $$collapse-plus bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-3" />
  <div class="$$collapse-title font-semibold">How do I update my profile information?</div>
  <div class="$$collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
</div>
<div class="$$collapse $$collapse-plus bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-3" checked="checked" />
  <div class="$$collapse-title font-semibold">How do I create an account?</div>
  <div class="$$collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>
<div class="$$collapse $$collapse-plus bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-3" />
  <div class="$$collapse-title font-semibold">I forgot my password. What should I do?</div>
  <div class="$$collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
</div>
<div class="$$collapse $$collapse-plus bg-base-100 border border-base-300">
  <input type="radio" name="my-accordion-3" />
  <div class="$$collapse-title font-semibold">How do I update my profile information?</div>
  <div class="$$collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
</div>

一起使用折叠面板和 Join

将项目连接在一起并自动处理边框半径
如何创建账户？
点击右上角的“注册”按钮，并按照注册流程操作。
我忘记了密码。我该怎么办？
在登录页面点击“忘记密码”，并按照发送到您电子邮件的说明操作。
如何更新我的个人资料信息？
转到“我的账户”设置，然后选择“编辑个人资料”进行更改。
<div class="$$join $$join-vertical bg-base-100">
  <div class="$$collapse $$collapse-arrow $$join-item border-base-300 border">
    <input type="radio" name="my-accordion-4" checked="checked" />
    <div class="$$collapse-title font-semibold">How do I create an account?</div>
    <div class="$$collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
  </div>
  <div class="$$collapse $$collapse-arrow $$join-item border-base-300 border">
    <input type="radio" name="my-accordion-4" />
    <div class="$$collapse-title font-semibold">I forgot my password. What should I do?</div>
    <div class="$$collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
  </div>
  <div class="$$collapse $$collapse-arrow $$join-item border-base-300 border">
    <input type="radio" name="my-accordion-4" />
    <div class="$$collapse-title font-semibold">How do I update my profile information?</div>
    <div class="$$collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
  </div>
</div>
<div class="$$join $$join-vertical bg-base-100">
  <div class="$$collapse $$collapse-arrow $$join-item border-base-300 border">
    <input type="radio" name="my-accordion-4" checked="checked" />
    <div class="$$collapse-title font-semibold">How do I create an account?</div>
    <div class="$$collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
  </div>
  <div class="$$collapse $$collapse-arrow $$join-item border-base-300 border">
    <input type="radio" name="my-accordion-4" />
    <div class="$$collapse-title font-semibold">I forgot my password. What should I do?</div>
    <div class="$$collapse-content text-sm">Click on "Forgot Password" on the login page and follow the instructions sent to your email.</div>
  </div>
  <div class="$$collapse $$collapse-arrow $$join-item border-base-300 border">
    <input type="radio" name="my-accordion-4" />
    <div class="$$collapse-title font-semibold">How do I update my profile information?</div>
    <div class="$$collapse-content text-sm">Go to "My Account" settings and select "Edit Profile" to make changes.</div>
  </div>
</div>
您发现 bug 吗？ 在 GitHub 上提交 issue
您喜欢 daisyUI 吗？ 发帖宣传一下吧！
支持 daisyUI 的开发： Open Collective
daisyUI store

NEXUS
daisyUI 官方仪表盘模板

在 daisyUI 商店提供

更多详情
请升级您的浏览器