将故事书控件标签更改为不同的名称

Question

我有一个自定义按钮组件和以下道具的一些基本控件；按钮种类、大小和子项（按钮文本）。

控件按预期工作。但是，我想将控件命名从 "children" 更改为 "label".

我将如何完成这项工作？

谢谢！

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
     kind: {
      options: ['primary', 'secondary', 'tertiary', 'danger', 'ghost'],
      control: { type: 'select' }
    },
    size: {
      options: ['default', 'sm', 'md', 'lg'],
      control: { type: 'select'},
    },
    },
};

const Template = (args) => <Button {...args} />;

export const Buttons = Template.bind({});
Buttons.args = {
  kind: 'primary',
  children: 'Button',

};

Answer 1

几乎完成，在 argTypes 内您需要输入感兴趣的字段，children，并设置自定义名称以显示在故事的控制面板上

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    // ...your previous code
    children: {
      name: "Label", // <---------
    },
  },
};

// ...your previous code

Buttons.args = {
  children: 'Button',
};

在我的一个项目中取得成果

将故事书控件标签更改为不同的名称

Change Storybook Control label to a different name

javascript

reactjs

storybook