How can you set custom labels for controls in Storybook?

在Storybook 中为控件设置自定义标签是一个很有用的功能，它可以帮助开发者更清晰地了解控件的用途和配置方式。在 Storybook 中，我们可以通过使用 argTypes 属性来定义每个控件的标签。这里我将通过一个具体的例子来展示如何设置这些自定义标签。

假设我们有一个名为 Button 的组件，我们想为它的 color 和 onClick 属性设置更具描述性的标签。

示例代码：

首先，这是我们的 Button 组件的基本代码：

jsx
import React from 'react';

const Button = ({ color, children, onClick }) => {
  return (
    <button style={{ backgroundColor: color }} onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

接下来，在 Storybook 中，我们需要设置这个组件的故事（story）。我们在故事中使用 argTypes 属性来定义控件标签：

jsx
import React from 'react';
import Button from './Button';

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
    color: {
      control: 'color',
      name: '背景颜色'  // 自定义标签
    },
    onClick: {
      action: 'clicked',
      name: '点击事件'  // 自定义标签
    }
  }
};

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

export const Primary = Template.bind({});
Primary.args = {
  color: 'blue'
};

在上面的代码中，我们为 color 控件设置了“背景颜色”作为标签，为 onClick 控件设置了“点击事件”作为标签。通过这种方式，Storybook 的用户界面将显示这些自定义标签，而不是简单的属性名，这使得控件的功能和用途更加明确。

效果

在 Storybook 的控件面板中，用户将看到“背景颜色”和“点击事件”而不是color和onClick，这样的标签更加直观和友好，有助于提高开发和测试的效率。

总结一下，通过设置 argTypes 并为其属性定义 name 值，我们可以在 Storybook 中实现控件的自定义标签，这是提高组件可用性的一种有效方法。