加入直播会议:周四,美国东部时间上午 11 点,Storybook 9 发布及 AMA 问答

一个带有实用显示选项的 React Storybook 装饰器,用于承载待测试组件

在 Github 上查看

storybook-host

Build Status

一个 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 />);

Screen Shot

属性

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]

一个字符串,指示如何在宿主中对齐组件。字符串包含两部分(xy),由空格分隔。水平对齐与垂直对齐的顺序无关,例如 top leftleft top 相同。

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

width: 数字 | 字符串 | undefined

锁定组件的宽度,例如:400(以像素为单位的数字)或 400px100%

height: 数字 | 字符串 | undefined

锁定组件的高度,例如:200(以像素为单位的数字)或 200px100%

maxWidth: 数字 | 字符串 | undefined

限制组件的最大宽度,例如:400(以像素为单位的数字)或 400px100%

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

组件后面的背景颜色。

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

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

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

cropMarks: 布尔值

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

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

组件的可选边框。

padding: 数字 | 字符串

宿主容器的内边距。