在storybook中使用'selectedPanel',可以通过以下步骤实现:
module.exports = {
addons: [
'storybook-addon-selected-panel',
// 其他插件...
],
};
import { addons } from '@storybook/addons';
addons.add('storybook-addon-selected-panel');
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf('Button', module)
.add('Primary', () => <button>Primary Button</button>)
.add('Secondary', () => <button>Secondary Button</button>)
.add('Tertiary', () => <button>Tertiary Button</button>)
.add('Quaternary', () => <button>Quaternary Button</button>)
.add('Quinary', () => <button>Quinary Button</button>)
.add('Senary', () => <button>Senary Button</button>)
.add('Septenary', () => <button>Septenary Button</button>)
.add('Octonary', () => <button>Octonary Button</button>)
.add('Nonary', () => <button>Nonary Button</button>)
.add('Selected', () => <button>Selected Button</button>, {
selectedPanel: 'storybook-addon-selected-panel',
});
在上述代码中,我们为最后一个故事添加了selectedPanel属性,并将其值设置为'storybook-addon-selected-panel',这样就可以在storybook UI界面中选中该面板。
总结: 通过添加'storybook-addon-selected-panel'插件,并在组件故事中使用selectedPanel属性,我们可以在storybook中使用'selectedPanel'来控制选中的面板。这对于展示特定场景下的组件状态非常有用,例如展示选中状态的按钮。
领取专属 10元无门槛券
手把手带您无忧上云