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: 数字 | 字符串
宿主容器的内边距。