Question

我正在使用React Storybook（https://github.com/storybooks/storybook/tree/next/app/react）为我的ui组件编写故事，并且我使用旋钮插件（https://github.com/storybooks/storybook/tree/next/addons/knobs）来创建实时可编辑道具...

我的应用程序是使用流程类型编写的，所以我的道具是类型，我已经定义了该类型以与主题配合使用：

export type BoxModel =
  | [ThemeSpacing | 0]
  | [ThemeSpacing | 0, ThemeSpacing | 0]
  | [ThemeSpacing | 0, ThemeSpacing | 0, ThemeSpacing | 0]
  | [ThemeSpacing | 0, ThemeSpacing | 0, ThemeSpacing | 0, ThemeSpacing | 0];

所以我的想法是我可以使用主题值数组定义组件的填充或边距

这是我的主题：

spacing: {
    xxSmall: '2px',
    xSmall: '4px',
    small: '8px',
    medium: '12px',
    larger: '16px',
    large: '24px',
    xLarge: '32px',
    xxLarge: '48px',
},

我的组件的道具（其中几个）

export type LinkStyleProps = {
  theme?: Theme,
  padding?: BoxModel,
  margin?: BoxModel,
};

因此，我基本上可以使用['small', 'medium', 'xsmall']等数组在我的组件上定义边距和填充...非常类似于CSS速记

有没有一种方法可以创建一个可以拥有此数组并可以通过选择来选择每个字段的旋钮？

Answer 1

使用Storybook旋钮绝对可以做到这一点。您可以使用类似以下示例的内容。如果需要的话，您可以执行其他逻辑来构建少于4个元素的数组，您只需在select中选择一个选项即可表明这一点并动态构建数组。

storiesOf("YourComponent", module)
  .add("with knobs", () => {
    const options = {
      none: '0',
      xxSmall: 'xxSmall',
      xSmall: 'xSmall',
      small: 'small',
      // etc.
    };
    const top = select('Top', options, '0');
    const right = select('Right', options, '0');
    const bottom = select('Bottom', options, '0');
    const left = select('Left', options, '0');
    return <YourComponent yourProp={[top, right, bottom, left]} />;
  });

我可以在React Storybook中创建一个旋钮来修改具有4个值的数组，其中每个值都有一个选择下拉列表吗？

1 个答案: