Storybook Set 组件置于页面中央

Question

我正在将故事书引入我们的 React 组件。当我开始添加示例时：

组件本身已添加到左上角。在本例中：http://react.carbondesignsystem.com/?selectedKind=ComposedModal&selectedStory=Using%20Header%20%2F%20Footer%20Props&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fstories%2Fstories-panel

我们可以看到组件本身在页面中间被刷新了。

我该怎么做？

Answer 1

您可以使用名为“@storybook/addon-centered”的 Storybook 插件。这可以在这里找到：https://www.npmjs.com/package/@storybook/addon-centered

或者，您也可以为每个故事提供样式参数来设置特定模板的样式。这是一个简单的例子：

.add('Your sample story', () => ({
      template: `<sample-component class="sample-component-class"><sample-component>`,
      styles: ['.sample-component-class {display: flex; justify-content: center}'],
      props: {
         sampleProps
      },
    }))

希望对您有所帮助。

Answer 2

您甚至可以在故事书的 preview.js 文件中添加 layout: 'centered' 作为参数。 layout 参数也可以添加到组件或故事级别。有关详细信息，请参阅 https://storybook.js.org/docs/react/configure/story-layout。

Storybook Set 组件置于页面中央

Storybook Set Component into the center of the page

storybook