CreativeModule (图文叠加4)

功能特性

• ✅ 响应式设计 - 自动适配 mobile/tablet/desktop
• ✅ 主题切换 - 支持 light/dark 模式
• ✅ 自定义样式 - 通过 className 定制
• ✅ 高性能 - 优化渲染性能
• ✅ 无障碍支持 - ARIA 属性和键盘导航

使用示例

基本用法

import { CreativeModule } from '@anker-in/headless-ui/biz'
import scenarios from './scenarios.json'
 
<CreativeModule data={{ /* 配置数据 */ }} />

自定义主题

<CreativeModule
  data={{
    theme: 'dark',
    // 其他配置...
  }}
/>

自定义样式

<CreativeModule
  data={{ /* 配置数据 */ }}
  className="custom-class"
  classNames={{
    root: 'custom-root',
    // 其他语义化类名...
  }}
/>

常见问题

Q: 如何切换主题?

A: 设置 data.theme 属性为 ‘light’ 或 ‘dark’

Q: 如何自定义样式?

A: 使用 className prop 传入 Tailwind CSS 类名,或使用 classNames 对象定制各个部分的样式

Q: 组件支持哪些响应式断点?

A: 组件支持 tablet (≥768px), laptop (≥1025px), desktop (≥1440px), lg-desktop (≥1920px) 四个断点

Q: 如何处理点击事件?

A: 组件提供了 onClick 等回调函数,可以在这些回调中自定义事件处理逻辑