特性列表 FeatureList

概览

FeatureList 用于以整洁的网格形式展示产品的一系列核心优势或技术特性。

实时预览

核心优势

为什么选择 Mewx CMS UI？

零配置接入

基于 Tailwind 预设，一行代码即可完成样式配置。

类型安全

全量 TypeScript 支持，内置 Zod 校验规则。

性能极致

轻量级运行时，支持 Next.js 服务端渲染优化。

使用方法

import { FeatureList } from '@goenhance/cms-ui';

const Example = () => (
  <FeatureList
    subtitle="核心特性"
    title="卓越的开发体验"
    list={[
      { title: "...", description: "...", icon: "..." }
    ]}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
`title`	`string`	-	主标题
`subtitle`	`string`	-	顶部小字副标题
`list`	`FeatureListItem[]`	`[]`	特性列表项
`className`	`string`	-	附加到根元素的类名，可用于传入覆盖变量

FeatureListItem

属性	类型	说明
`title`	`string`	特性标题
`description`	`string`	特性描述文本
`icon`	`string`	图标 URL (建议使用 SVG)

主题覆盖

组件根节点挂有 mewx-cms-feature-list 类，所有样式均通过组件级 CSS 变量控制，优先级高于全局 --blocks-* 变量。

可覆盖变量

变量名	用途	默认值
`--mewx-cms-feature-list-bg`	区块背景色	`var(--blocks-bg-section)`
`--mewx-cms-feature-list-subtitle-text`	副标题颜色	`var(--blocks-primary)`
`--mewx-cms-feature-list-heading-text`	主标题颜色	`var(--blocks-text-heading)`
`--mewx-cms-feature-list-card-bg`	卡片背景色	`var(--blocks-bg-card)`
`--mewx-cms-feature-list-card-border`	卡片边框色	`var(--blocks-border)`
`--mewx-cms-feature-list-card-radius`	卡片圆角	`var(--blocks-radius-2xl)`
`--mewx-cms-feature-list-card-shadow`	卡片阴影	`var(--blocks-shadow-card)`
`--mewx-cms-feature-list-card-hover-shadow`	悬停阴影	`var(--blocks-shadow-card-hover)`
`--mewx-cms-feature-list-card-hover-border`	悬停边框色	`var(--blocks-border-hover)`
`--mewx-cms-feature-list-icon-bg`	图标背景色	`var(--blocks-primary-lightest)`
`--mewx-cms-feature-list-icon-size`	图标容器尺寸	`4rem`
`--mewx-cms-feature-list-title-text`	卡片标题颜色	`var(--blocks-text-heading)`
`--mewx-cms-feature-list-desc-text`	卡片描述颜色	`var(--blocks-text-muted)`

覆盖示例

通过 CSS 类（推荐，作用域隔离）

/* 深色区块 */
.dark-section .mewx-cms-feature-list {
  --mewx-cms-feature-list-bg: 15 23 42;
  --mewx-cms-feature-list-heading-text: 255 255 255;
  --mewx-cms-feature-list-card-bg: 30 41 59;
  --mewx-cms-feature-list-card-border: 51 65 85;
  --mewx-cms-feature-list-title-text: 248 250 252;
  --mewx-cms-feature-list-desc-text: 148 163 184;
}

通过 inline style（适合动态值）

<FeatureList
  style={{
    "--mewx-cms-feature-list-bg": "245 240 255",
    "--mewx-cms-feature-list-subtitle-text": "139 92 246",
    "--mewx-cms-feature-list-icon-bg": "237 233 254",
  } as React.CSSProperties}
  subtitle="紫色主题"
  title="自定义品牌色"
  list={[...]}
/>

通过 className（Tailwind 任意值）

<FeatureList
  className="[--mewx-cms-feature-list-card-radius:0.5rem] [--mewx-cms-feature-list-card-shadow:none]"
  subtitle="方角无阴影"
  title="扁平风格"
  list={[...]}
/>

特性

动态网格：自动根据屏幕宽度在 1、2、3 列之间切换。
悬停特效：内置边框高亮和阴影提升动画，增加交互质感。
组件级变量：所有视觉属性均通过 --mewx-cms-feature-list-* 变量控制，覆盖不影响全局主题。