Skip to content
Mewx CMS UI

常见问题 FAQ

概览

Section titled “概览”

FAQ 组件提供了一个优雅的折叠面板界面，用于高效地展示问答列表。

实时预览

Section titled “实时预览”
Frequently Asked Questions

常见问题

使用方法

Section titled “使用方法”
import { FAQ } from '@goenhance/cms-ui';


const Example = () => (
  <FAQ
    title="常见问题"
    list={[
      { question: "...", answer: "..." }
    ]}
  />
);

属性说明 (Props)

Section titled “属性说明 (Props)”
属性类型默认值说明
titlestring-FAQ 区域的标题
subtitlestring-副标题（可选）
listArray<{ title: string, description: string }>[]问答列表

特性

Section titled “特性”
  • 交互流畅：基于 Radix UI Accordion 构建，动画丝滑。
  • 自适应：在移动端和桌面端均有良好的展示形态。
  • 语义化：遵循无障碍访问标准。

主题覆盖

Section titled “主题覆盖”

可覆盖变量

Section titled “可覆盖变量”

类名：mewx-cms-faq

变量名用途默认值
--mewx-cms-faq-subtitle-text副标题文字色var(--blocks-primary)
--mewx-cms-faq-heading-text标题文字色var(--blocks-text-heading)
--mewx-cms-faq-divider-gradient标题分割线渐变var(--blocks-gradient-accent)
--mewx-cms-faq-glow-bg装饰发光背景var(--blocks-gradient-accent)
--mewx-cms-faq-container-bg容器背景色var(--blocks-bg-card)
--mewx-cms-faq-container-border容器边框色var(--blocks-border)
--mewx-cms-faq-container-shadow容器阴影var(--blocks-shadow-card)
--mewx-cms-faq-item-border问题项分隔线色var(--blocks-border)
--mewx-cms-faq-question-text问题文字色var(--blocks-text-heading)
--mewx-cms-faq-question-hover-text问题悬停文字色var(--blocks-primary)
--mewx-cms-faq-answer-text答案文字色var(--blocks-text-muted)
--mewx-cms-faq-link-text答案内链接色var(--blocks-primary)

覆盖示例

Section titled “覆盖示例”
/* 深色 FAQ */
.dark-faq {
  --mewx-cms-faq-heading-text: 248 250 252;
  --mewx-cms-faq-question-text: 248 250 252;
  --mewx-cms-faq-answer-text: 203 213 225;
  --mewx-cms-faq-container-bg: 30 41 59;
  --mewx-cms-faq-item-border: 51 65 85;
}


/* 紫色强调 */
.purple-faq {
  --mewx-cms-faq-subtitle-text: 139 92 246;
  --mewx-cms-faq-question-hover-text: 139 92 246;
  --mewx-cms-faq-divider-gradient: linear-gradient(135deg, rgb(139, 92, 246), rgb(99, 102, 241));
}