storybook-host

一个 React Storybook 装饰器，提供强大的显示选项，用于承载、调整尺寸和布局您的组件。

安装

npm install -D storybook-host

在 Storybook 中尝试

npm start

用法

import { storiesOf } from '@storybook/react';
import { host } from 'storybook-host';
import { MyComponent } from './MyComponent';

storiesOf('helpers.storybook', module)
  .addDecorator(
    host({
      title: 'A host container for components under test.',
      align: 'center bottom',
      height: '80%',
      width: 400,
    }),
  )
  .add('MyComponent', () => <MyComponent />);

属性

host({
  title: <string>,
  hr: <boolean>,
  align: <string>,
  height: <number | string>,
  width: <number | string>,
  background: <boolean | number | string>,
  backdrop: <boolean | number | string>,
  cropMarks: <boolean>,
  border: <boolean | number | string>,
  padding: <number | string>,
});

title: 字符串

窗口顶部显示的标题。用它来命名和描述待测试的组件。

hr: 布尔值

一个标志，指示是否应显示标题下方的水平线。默认值：true。

align: 字符串 [x y]

一个字符串，指示如何在宿主中对齐组件。字符串包含两部分（x 和 y），由空格分隔。水平对齐与垂直对齐的顺序无关，例如 top left 与 left top 相同。

• 水平对齐 (X)
  • 左
  • 居中
  • 右
• 垂直对齐 (Y)
  • 顶部
  • 中部
  • 底部

width: 数字 | 字符串 | undefined

锁定组件的宽度，例如：400（以像素为单位的数字）或 400px 或 100%。

height: 数字 | 字符串 | undefined

锁定组件的高度，例如：200（以像素为单位的数字）或 200px 或 100%。

maxWidth: 数字 | 字符串 | undefined

限制组件的最大宽度，例如：400（以像素为单位的数字）或 400px 或 100%。

background: 布尔值 | 数字 | 字符串

组件后面的背景颜色。

• true：宝石红色（例如 rgba(255, 0, 0, 0.1)）。有助于快速可视化组件大小。
• string：一个 CSS background-color 值。
• 数字 (-1: 黑色..0..1: 白色)

backdrop: 布尔值 | 数字 | 字符串

整个宿主面板的背景颜色。值类型与 background 相同。

cropMarks: 布尔值

一个标志，指示是否应显示裁剪标记。默认值：true。

border: 字符串 | 数字 | 布尔值

组件的可选边框。

padding: 数字 | 字符串

宿主容器的内边距。