故事书集组件到页面中心

Posted 2023-02-19

【中文标题】故事书集组件到页面中心

【英文标题】：Storybook Set Component into the center of the page

【发布时间】：2019-10-23 06:56:21

【问题描述】：

我正在将故事书引入我们的 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

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

我该怎么做？

【参考方案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
      ,
    ))

希望这会有所帮助。

【参考方案2】：

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