IconPicker 图标选择框

图标选择框。

何时使用

当用户需要输入一个图标,可以点击标准输入框,弹出图标面板进行选择。

代码演示

基本使用

图标选择器。

IconPicker图标选择框 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { IconPicker } from 'choerodon-ui/pro';
  4. function handleChange(value, oldValue) {
  5. console.log('[datepicker]', value, '[oldValue]', oldValue);
  6. }
  7. ReactDOM.render(
  8. <IconPicker onChange={handleChange} />,
  9. document.getElementById('container')
  10. );

受控图标选择器

受控图标选择器

IconPicker图标选择框 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { IconPicker } from 'choerodon-ui/pro';
  4. class App extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. value: 'add',
  9. };
  10. }
  11. handleChange = (value, oldValue) => {
  12. console.log('[newValue]', value, '[oldValue]', oldValue);
  13. this.setState({
  14. value,
  15. });
  16. }
  17. render() {
  18. return <IconPicker value={this.state.value} onChange={this.handleChange} />;
  19. }
  20. }
  21. ReactDOM.render(
  22. <App />,
  23. document.getElementById('container')
  24. );

数据源

绑定数据源。

IconPicker图标选择框 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, IconPicker } from 'choerodon-ui/pro';
  4. function handleDataSetChange({ record, name, value, oldValue }) {
  5. console.log('[dataset newValue]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
  6. }
  7. class App extends React.Component {
  8. ds = new DataSet({
  9. autoCreate: true,
  10. fields: [
  11. { name: 'icon', type: 'string', defaultValue: 'cancel', required: true },
  12. ],
  13. events: {
  14. update: handleDataSetChange,
  15. },
  16. });
  17. render() {
  18. return <IconPicker dataSet={this.ds} name="icon" />;
  19. }
  20. }
  21. ReactDOM.render(
  22. <App />,
  23. document.getElementById('container')
  24. );

API

参数说明类型
pageSize控制icon页面展示数量number
customFontName控制icon的自定义图标配置string
icons配置需要的icons选择列表{ [key: string]: string[]; } | string[]

customFontName 属性说明

  • 解决需求:可以用户客制化字体库进行项目专属的 icon 配置。
  • 使用步骤:

    1. 先按照 icon 配置进行第三方自定义的 icon 配置
    2. 在 configure 配置需要的 icons 或者 用 icons 封装成项目公共组件(推荐) 字符串数组以及分类,完成配置后可以自定义选择使用
    3. 配置对应的 customFontName 就可以实现自定义项目 icon 选择
  1. // 示例代码
  2. <IconPicker icons={['clubs']} customFontName="c7ntest1" />

更多属性请参考 TriggerField