react storybook addon chapters下载 - react storybook addon chapters源代码下载

react storybook addon chapters

三方组件

1.0.0

下载

⛔[弃用]此附加物不再维护，现在被认为是弃用故事书的本地嵌套和组件层次结构。我们建议使用故事书6版。

React Storybook章节addon

React Storybook章节Addon允许通过将其分解为较小的类别（章节）和子类别（章节）来展示故事中的多个组件，以提供更多的组织善良。

使用插件，一个故事可以由多个章节组成，一章由多个部分组成。每个部分都可以渲染一个代码，该代码通常用于展示一个组件或组件的特定状态。

章节可用于将相关组件分组在一起，或显示组件的不同状态。每章都有一章标题，章节字幕，章节信息和各节列表。只需省略任何一个即可将它们隐藏起来。

每个部分都带有部分标题，片段字幕，部分信息。

该插件是从React-Storybook-Addon-Info修改的，并使用其中的一些组件代码。

React Storybook屏幕截图

用法

安装以下NPM模块：

npm install --save-dev react-storybook-addon-chapters

然后将插件设置在您配置故事书的位置：

 import React from 'react' ;
import { configure , setAddon } from '@storybook/react' ;
import chaptersAddon from 'react-storybook-addon-chapters' ;

setAddon ( chaptersAddon ) ;

configure ( function ( ) {
  ...
} , module ) ;

关闭默认样式添加：

 setDefaults ( { sectionOptions : { useTheme : false } } ) ;

所有渲染组件都有指定的类。将“ Usetheme”设置为False，您应该没有问题来造型您的章节。

然后使用.addWithChapters API创建您的故事。

 import React from 'react' ;
import Button from './Button' ;
import { storiesOf } from '@storybook/react' ;

storiesOf ( 'Addon Chapters' )
  . addWithChapters (
    'Story With Chapters' ,
    {
      subtitle : < Optional story subtitle > ,
      info: < Optional story info > ,
      chapters: [
        // List of chapters. Refer to Configuration Format section.
        {
          title : < Optional chapter title > ,
          subtitle : < Optional chapter subtitle > ,
          info : < Optional chapter info > ,
          sections : [
            // List of sections.
            {
              title : < Optional section title > ,
              subtitle: < Optional section subtitle > ,
              info: < Optional section info > ,
              sectionFn: () = > ( < Button label = "My Button" onClick = { ( ) => { alert ( 'Hello World!' ) ; } } /> ),
              options: {
                showSource : true ,
                allowSourceToggling : true ,
                showPropTables : true ,
                allowPropTablesToggling : true ,
              } ,
            } ,
            ...
          ] ,
        } ,
        ...
      ]
    }
  ) ;

看看这个示例故事，以了解有关addWithChapters API的更多信息。

全局选项

要为所有章节（ section.options ），请在.storybook/config.js中使用setDefaults 。

 import React from 'react' ;
import { configure , setAddon } from '@storybook/react' ;
import chaptersAddon , { setDefaults } from 'react-storybook-addon-chapters' ;

// optionally override defaults
setDefaults ( {
  sectionOptions : {
    showSource : true ,
    allowSourceToggling : true ,
    showPropTables : false ,
    allowPropTablesToggling : true ,
    decorator : story => ( < div > { story ( ) } </ div > ) ,
  }
} ) ;
setAddon ( chaptersAddon ) ;

configure ( function ( ) {
  ...
} , module ) ;

配置格式

故事

钥匙	描述	类型	默认
字幕	故事字幕	细绳	-
信息	故事的其他信息	字符串（Markdown）	-
章节	章节对象的数组	大批	-

章

钥匙	描述	类型	默认
标题	章节标题	细绳	-
字幕	章字幕	细绳	-
信息	本章的其他信息	字符串（Markdown）	-
部分	部分对象的数组	大批	-

部分

钥匙	描述	类型	默认
标题	部分标题	细绳	-
字幕	部分字幕	细绳	-
信息	本节的其他信息	字符串（Markdown）	-
部分	返回一个react组件以显示的函数	功能	-
选项	本节的配置对象。请参阅键的接下来几行	目的	-
options.showsource	显示组件的源	布尔	真的
选项	允许显示/隐藏组件的源	布尔	真的
options.showproptables	显示组件的预售	布尔	错误的
选项	允许显示/隐藏组件的主体	布尔	真的
options.decorator	可选的装饰函数，用于渲染组件	功能	-