react storybook addon chapters

⛔[棄用]此附加物不再維護，現在被認為是棄用故事書的本地嵌套和組件層次結構。我們建議使用故事書6版。

React Storybook章節addon

React Storybook章節Addon允許通過將其分解為較小的類別（章節）和子類別（章節）來展示故事中的多個組件，以提供更多的組織善良。

使用插件，一個故事可以由多個章節組成，一章由多個部分組成。每個部分都可以渲染一個代碼，該代碼通常用於展示一個組件或組件的特定狀態。

章節可用於將相關組件分組在一起，或顯示組件的不同狀態。每章都有一章標題，章節字幕，章節信息和各節列表。只需省略任何一個即可將它們隱藏起來。

每個部分都帶有部分標題，片段字幕，部分信息。

該插件是從React-Storybook-Addon-Info修改的，並使用其中的一些組件代碼。

用法

安裝以下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	可選的裝飾函數，用於渲染組件	功能	-

常見問題解答

組件在靜態構建上失去名稱

構建生產時，組件名稱還可以使用其他JavaScript代碼縮小。創建組件時，將displayName靜態屬性設置為在靜態構建上顯示正確的組件名稱。