Setter

什么是 setter ？

Setter 是一个输入控件，用于在组件物料协议中描述组件 props 的输入方式，同时提供对应的输入控件让用户可以准确的输入组件的 props 值

内置 Setter 列表

StringSetter

ArraySetter

Example:

const customAttributesMeta: CMaterialPropsType[number] = {
  name: '$$attributes',
  title: '属性',
  valueType: 'object',
  setters: [
    {
      componentName: 'ArraySetter',
      props: {
        item: {
          setters: [
            {
              componentName: 'ShapeSetter',
              props: {
                elements: [
                  {
                    name: 'key',
                    title: '属性名',
                    valueType: 'string',
                    setters: ['StringSetter'],
                  },
                  {
                    name: 'value',
                    title: '值',
                    valueType: 'string',
                    setters: ['StringSetter', 'NumberSetter', 'JSONSetter', 'FunctionSetter', 'ExpressionSetter'],
                  },
                ],
                collapse: false,
              },
              initialValue: {},
            },
          ],
          initialValue: {},
        },
      },
      initialValue: [],
    },
  ],
};

ShapeSetter

code link

Example:

const CSSBindPropsSchema: CMaterialPropsType<'CSSValueSetter'> = [
  {
    name: 'css',
    title: 'CSS Variable Bind',
    valueType: 'array',
    setters: [
      {
        componentName: 'ArraySetter',
        props: {
          item: {
            setters: [
              {
                componentName: 'ShapeSetter',
                props: {
                  elements: [
                    {
                      name: 'key',
                      title: '属性',
                      valueType: 'string',
                      setters: ['StringSetter'],
                      description: '',
                    },
                    {
                      name: 'value',
                      title: '置',
                      valueType: 'string',
                      setters: ['ExpressionSetter'],
                      description: '',
                    },
                  ],
                  collapse: false,
                },
                initialValue: {
                  key: '',
                  value: {
                    type: CNodePropsTypeEnum.EXPRESSION,
                    value: '',
                  },
                },
              },
            ],
            initialValue: {
              key: '',
              value: {
                type: CNodePropsTypeEnum.EXPRESSION,
                value: '',
              },
            },
          },
        },
        initialValue: [],
      },
    ],
  },
];

  {
    title: 'HTML 标签',
    componentName: 'CNativeTag',
    props: [
      {
        name: 'htmlTag',
        title: '标签名',
        valueType: 'string',
        setters: [
          {
            componentName: 'SelectSetter',
            props: {
              options: HTMl_TAGS.map((tag) => {
                return {
                  name: tag,
                  value: tag,
                };
              }),
            },
          },
        ],
      },
      customAttributesMeta,
    ],