import snippets from "./snippets"; const ButtonMeta = { componentName: "Button", title: "按钮", /** todo: category属性的多语言不生效 后续组件面板自己实现时加入 */ category: "通用", docUrl: "", screenshot: "", devMode: "proCode", npm: { package: "@pisell/materials", version: "1.0.1", exportName: "Button", main: "src/index.tsx", destructuring: true, subName: "", }, configure: { props: [ { title: { label: { type: "i18n", "en-US": "Feature", "zh-CN": "功能", }, }, display: "block", type: "group", items: [ { name: "children", title: { label: { type: "i18n", "en-US": "content", "zh-CN": "内容", }, tip: "children", }, propType: 'string', setter: 'PisellI18nSetter', }, { name: "htmlType", title: { label: { type: "i18n", "en-US": "native type", "zh-CN": "原生类型", }, tip: { type: "i18n", "en-US": "htmlType | Set the native `type` value of `button`", "zh-CN": "htmlType | 设置 `button` 原生的 `type` 值", }, }, propType: { type: "oneOf", value: ["submit", "reset", "button"], }, setter: [ { componentName: "RadioGroupSetter", props: { options: [ { title: "Submit", value: "submit", }, { title: "Reset", value: "reset", }, { title: "Button", value: "button", }, ], }, }, "VariableSetter", ], defaultValue: "button", }, { name: 'className', title: { label: '样式类名', tip: 'className | 样式类名', }, propType: 'string', setter: 'StringSetter', }, { name: "href", title: { label: { type: "i18n", "en-US": "jump address", "zh-CN": "跳转地址", }, tip: { type: "i18n", "en-US": "href | click to jump to the address, specify this attribute button behavior is consistent with a link", "zh-CN": "href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致", }, }, propType: "string", setter: ["StringSetter", "VariableSetter"], }, { name: "target", title: { label: "Target", tip: { type: "i18n", "en-US": "target | Equivalent to the target attribute of a link, effective when href exists", "zh-CN": "target | 相当于 a 链接的 target 属性，href 存在时生效", }, }, propType: { type: "oneOf", value: ["_self", "_blank", "_parent", "_top"], }, setter: [ { componentName: "SelectSetter", props: { options: [ { title: "本窗口跳转", value: "_self", }, { title: "打开新标签页", value: "_blank", }, { title: "父窗口跳转", value: "_parent", }, { title: "顶层窗口跳转", value: "_top", }, ], }, }, "StringSetter", "VariableSetter", ], condition: { type: "JSFunction", value: 'target => !!target.getProps().getPropValue("href")?.trim()', }, }, ], }, { title: { type: "i18n", "en-US": "exterior", "zh-CN": "外观", }, display: "block", type: "group", items: [ { name: "type", title: { label: "type", tip: "set button type", }, propType: { type: "oneOf", value: ["primary", "default", "ghost", "dashed", "danger", "link", "text"], }, setter: [ { componentName: "SelectSetter", props: { options: [ { title: "primary button", value: "primary", }, { title: "default button", value: "default", }, { title: "dashed button", value: "dashed", }, { title: "danger button", value: "danger", }, { title: "link button", value: "link", }, { title: "text button", value: "text", }, ], }, }, "VariableSetter", ], }, { name: "size", title: { label: "size", tip: "set button size", }, propType: { type: "oneOf", value: ["large", "middle", "small"] }, setter: [ { componentName: "RadioGroupSetter", props: { options: [ { title: "large", value: "large", }, { title: "middle", value: "middle", }, { title: "small", value: "small", }, ], }, }, "VariableSetter", ], defaultValue: "middle", }, { name: "shape", title: { label: "shape", tip: "shape | Set button shape, optional value is `circle`, `round` or not set", }, propType: { type: "oneOf", value: ["default", "circle", "round"] }, defaultValue: "default", setter: [ { componentName: "RadioGroupSetter", props: { options: [ { title: "default", value: "default", }, { title: "circle", value: "circle", }, { title: "round", value: "round", }, ], }, }, "VariableSetter", ], }, { name: "icon", title: { label: { type: "i18n", "en-US": "icon", "zh-CN": "图标", }, tip: "icon | Set the icon component of the button", }, propType: { type: "oneOfType", value: ["node"] }, setter: [{ componentName: "SlotSetter", initialValue: { type: "JSSlot", value: [ { componentName: "Icon", props: { type: "SmileOutlined", size: 20, rotate: 0, spin: false, }, }, ], }, defaultValue: null }], }, { name: "rightIcon", title: { label: { type: "i18n", "en-US": "Right icon", "zh-CN": "右侧图标", }, tip: "icon | Set the icon component of the button", }, propType: { type: "oneOfType", value: ["node"] }, setter: [{ componentName: "SlotSetter", initialValue: { type: "JSSlot", value: [ { componentName: "Icon", props: { type: "SmileOutlined", size: 20, rotate: 0, spin: false, }, }, ], }, defaultValue: null }], }, { name: "block", title: { label: { type: "i18n", "en-US": "adaptive", "zh-CN": "自适应", }, tip: { type: "i18n", "en-US": "block | Option to adjust button width to its parent width", "zh-CN": "block | 将按钮宽度调整为其父宽度的选项", }, }, propType: "bool", setter: "BoolSetter", defaultValue: false, }, { name: "danger", title: { label: { type: "i18n", "en-US": "danger button", "zh-CN": "危险按钮", }, tip: { type: "i18n", "en-US": "danger | set hazard button", "zh-CN": "danger | 设置危险按钮", }, }, propType: "bool", setter: "BoolSetter", defaultValue: false, }, { name: "ghost", title: { label: { type: "i18n", "en-US": "ghost attribute", "zh-CN": "幽灵属性", }, tip: { type: "i18n", "en-US": "ghost | Ghost property to make button background transparent", "zh-CN": "ghost | 幽灵属性，使按钮背景透明", }, }, propType: "bool", setter: "BoolSetter", defaultValue: false, }, ], }, { title: { type: "i18n", "en-US": "state", "zh-CN": "状态", }, display: "block", type: "group", items: [ { name: "loading", title: { label: { type: "i18n", "en-US": "loading status", "zh-CN": "载入状态", }, tip: { type: "i18n", "en-US": "loading | Set button loading state", "zh-CN": "loading | 设置按钮载入状态", }, }, propType: "bool", setter: ["BoolSetter", "VariableSetter"], }, { name: "disabled", title: { label: { type: "i18n", "en-US": "Whether to disable", "zh-CN": "是否禁用", }, tip: { type: "i18n", "en-US": "disabled | Is it disabled", "zh-CN": "disabled | 是否为禁用状态", }, }, propType: "bool", setter: ["BoolSetter", "VariableSetter"], defaultValue: false, }, ], }, ], supports: { style: true, events: [ { name: "onClick", template: "onClick(event,${extParams}){\n// 点击按钮时的回调\nconsole.log('onClick', event);}", }, ], }, component: {}, }, }; export default { ...ButtonMeta, snippets, };