组件分类 · 折叠
FAQ 与折叠面板组件
常见问题、折叠面板和可展开的说明。答案默认收起，展开时有平滑过渡，适合定价页和产品页底部。
共 7 个 · 更新于
适合用在哪里
常见问题（FAQ）、折叠面板、可展开的说明和设置分组。
怎么用
- 打开任意一个组件，看实时预览，切换深色 / 浅色背景。
- 点「复制提示词」，粘贴到 Claude Code、Cursor、Codex 或 Trae；模型会读你的项目，把组件改写成你的框架，并把颜色、字体接到你的设计变量。
- 或者在终端用 8pt CLI 装进项目，也可以在已接入 8pt MCP 的编辑器里直接说需求。
npm i -g @8pt-dev/cli 8pt login 8pt search "FAQ 与折叠面板" 8pt add dark-accordion-footer
全部 7 个FAQ 与折叠面板组件
- Dark Accordion Footer 深色折叠页脚
近黑底的大页脚：右侧三分之二宽度是九组细线分隔的折叠链接，点击展开、同时只开一组，箭头旋转；底部三栏依次是品牌标志与社交图标、使命说明、登录入口外链。
- Chevron FAQ List 箭头问答列表
细线分隔的极简问答列表，基于原生 details：悬停问题变紫，展开时右侧箭头翻转并变色，答案轻微下滑淡入；同一时间只展开一项，没有脚本也能正常折叠。
- Two Column FAQ 双栏常见问题
双栏排布的常见问题手风琴：十个浅灰圆角问答条，左右两列各自排列，点击展开答案并把加号变为关闭符号，同一时间只展开一条，展开项底色变浅蓝。
- Soft FAQ Accordion 柔和问答折叠
白色圆角问答条目纵向排列，点击后答案以高度过渡展开，右侧加号旋转成叉并变为绿色底，展开项加深投影；可同时展开多项。
- Rounded FAQ Stack 圆角问答折叠
基于原生 details 的圆角卡片问答列表，每题独立成卡，展开时加号旋转成叉号、卡片浮起阴影、答案轻微下滑淡入；同一时间只展开一项，没有脚本也能正常使用。
- Plus FAQ Accordion 加号问答折叠
基于原生 details 的问答列表，细线分隔，展开时加号旋转成叉号，答案轻微下滑淡入；同一时间只展开一项，没有脚本也能正常工作。
- Accordion 手风琴
单开模式的折叠面板，加号旋转成叉，内容淡入；键盘可操作。
常见问题
8pt 的FAQ 与折叠面板组件能用在 React、Vue 或 Next.js 项目里吗？
能。组件源码是原生 HTML、CSS 和少量 JS；复制提示词交给模型后，它会按你项目的技术栈改写成 React、Vue、Svelte 等写法，并把颜色、字体接到你已有的设计变量上。
怎么把FAQ 与折叠面板组件装进项目？
三种方式：在组件页复制提示词交给模型；用 8pt CLI 运行 8pt add <组件 slug>；或者接入 8pt MCP 后在对话里直接说需求。复制提示词、CLI 和 MCP 需要 Builder 方案（Builder 方案 ¥45/月、¥128/季或 ¥379/年；另有创始终身版 ¥899，一次付款，限 100 席）。
FAQ 要写几条？
五到八条最常被问的问题就够了：价格、退款或取消、能不能商用、支持哪些工具、怎么联系。答案第一句直接回答，再补充细节。
可以用在商业项目里吗？
可以。你可以在自己的项目（含商业项目）中使用复制或安装的代码，但不能把 8pt 的内容整体转售或搭建同类素材库。