react storybook addon chapters

⛔ [เลิกใช้แล้ว] addon นี้ไม่ได้รับการดูแลอีกต่อไปและตอนนี้ได้รับการพิจารณาว่าเลิกใช้งานในการทำรังและลำดับชั้นของส่วนประกอบของนิทาน เราแนะนำให้ใช้นิทานเวอร์ชัน 6 แทน

บทนิทานตอบ

บทนิทาน Reactbook บท Addon ช่วยให้การจัดแสดงส่วนประกอบหลายอย่างภายในเรื่องราวโดยแบ่งมันออกเป็นหมวดหมู่ขนาดเล็ก (บท) และหมวดหมู่ย่อย (ส่วน) เพื่อความดีขององค์กรมากขึ้น

การใช้ addon เรื่องราวอาจประกอบด้วยหลายบทและบทที่ประกอบด้วยหลายส่วน แต่ละส่วนสามารถแสดงบล็อกของรหัสซึ่งโดยทั่วไปจะใช้เพื่อแสดงองค์ประกอบหนึ่งหรือสถานะเฉพาะขององค์ประกอบ

บทสามารถใช้กับกลุ่มส่วนประกอบที่เกี่ยวข้องเข้าด้วยกันหรือแสดงสถานะที่แตกต่างกันขององค์ประกอบ แต่ละบทมาพร้อมกับ ชื่อบท คำบรรยายบท ข้อมูลบท และรายการ ส่วนต่างๆ เพียงแค่ละเว้นพวกเขาใด ๆ ที่จะซ่อนพวกเขาจากการแสดงผล

แต่ละส่วนมาพร้อมกับ ชื่อเรื่อง ส่วนคำบรรยายส่วน ข้อมูลส่วน

Addon นี้ได้รับการแก้ไขจาก React-Storybook-Addon-Info และใช้รหัสส่วนประกอบบางส่วนจากที่นั่น

การใช้งาน

ติดตั้งโมดูล NPM ต่อไปนี้:

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

จากนั้นตั้งค่า addon ในสถานที่ที่คุณกำหนดค่าหนังสือนิทานแบบนี้:

 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' ที่ตั้งค่าเป็นเท็จคุณไม่ควรมีปัญหาในการจัดแต่งทรงผมของคุณ

จากนั้นสร้างเรื่องราวของคุณด้วย. .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 ) ให้ใช้ setDefaults ใน .storybook/config.js

 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)	-
ส่วนที่เป็นส่วนหนึ่ง	ฟังก์ชั่นที่ส่งคืนองค์ประกอบปฏิกิริยาที่จะแสดง	การทำงาน	-
ตัวเลือก	วัตถุการกำหนดค่าสำหรับส่วนนี้ อ้างถึงสองสามแถวถัดไปสำหรับกุญแจ	วัตถุ	-
ตัวเลือก	แสดงแหล่งที่มาของส่วนประกอบ	บูลีน	จริง
ตัวเลือก	อนุญาตให้แสดง/ซ่อนแหล่งที่มาของส่วนประกอบ	บูลีน	จริง
ตัวเลือก	แสดงโพรไทป์ของส่วนประกอบ	บูลีน	เท็จ
ตัวเลือก	อนุญาตให้แสดง/ซ่อนตัวของชิ้นส่วนของส่วนประกอบ	บูลีน	จริง
ตัวเลือก decorator	ฟังก์ชั่นมัณฑนากรที่เป็นตัวเลือกที่จะใช้สำหรับการแสดงผลส่วนประกอบในส่วน	การทำงาน	-

คำถามที่พบบ่อย

ส่วนประกอบสูญเสียชื่อของพวกเขาในการสร้างแบบคงที่

ชื่อส่วนประกอบยังได้รับการย่อยด้วยรหัส JavaScript อื่น ๆ เมื่อสร้างเพื่อการผลิต เมื่อสร้างส่วนประกอบให้ตั้งค่าคุณสมบัติ displayName Static เพื่อแสดงชื่อส่วนประกอบที่ถูกต้องในการสร้างแบบคงที่