颜色选择器

当需要自定义颜色选择的时候使用。

代码演示

基本使用

import { useState } from 'react';
import SelectColor from '../../components/SelectColor';

fucntion Card({ isDarkMode }) {
  // 颜色选择组件 Data
  const [color, setColor] = useState('');

  return (
    <SelectColor
      title="颜色选择组件[title]"
      isDarkMode={isDarkMode}
      value={color}
      useGradient={false}
      onChange={(color: string) => {
        setColor(color);
      }}
    />
  );
}

进阶使用

SelectColorWrap 组件配置 keyName 与 dispatch 后，组件会自动将数据同步到魔方编辑器的 store 中

import { SelectColorWrap } from '../../components/SelectColor';

fucntion Card({ confData, dispatch, isDarkMode }) {

  return (
    <SelectColorWrap
      title="颜色选择组件[title]"
      isDarkMode={isDarkMode}
      value={confData.data.color}
      useGradient={false}
      keyName={'data.color'}
      dispatch={dispatch}
    />
  );
}

API

SelectColor 组件接受的参数如下：

参数	类型	说明	默认值
className	string	容器类名	-
title	string	组件标题	-
isDarkMode	boolean	是否为暗黑模式	false
value	string	当前颜色值	-
useGradient	boolean	是否使用渐变色	false
onChange	(color: string) => void	颜色改变回调	-

SelectColorWrap 组件接受的参数如下：

参数	类型	说明	默认值
title	string	组件标题	-
isDarkMode	boolean	是否为暗黑模式	false
value	string	当前颜色值	-
useGradient	boolean	是否使用渐变色	false
keyName	string	魔方编辑器 store 数据存储路径 (例：data.color)	-
dispatch	(action: any) => void	魔方编辑器 store 数据更新方法	-

FAQ

为什么要使用 SelectColorWrap 组件？

阅读链接