文件分頁

storybook-addon-docs-tabs

一個 Storybook 擴充套件，為 Docs 擴充套件新增分頁。

注意：這個擴充套件有點 hacky。Storybook API 完全不支援這樣的功能。但是你仍然可以使用這個擴充套件，因為它仍然使用 mdx 和其「正常」的 API。

開始使用

1. 安裝

npm install --save-dev storybook-addon-docs-tabs
# yarn add -D storybook-addon-docs-tabs

2. 在 .storybook/preview.js 中新增 Container

import { DocsContainer } from "@storybook/addon-docs/blocks";
import { TabContainer } from "storybook-addon-docs-tabs";

export const parameters = {
  docs: {
    container: ({ children, context }) => (
      <DocsContainer context={context}>
        <TabContainer context={context}>{children}</TabContainer>
      </DocsContainer>
    ),
  },
};

2. 在 .storybook/manager-head.html 中隱藏側邊欄的分頁故事

<style>
  [id^="hidden"],
  [data-parent-id^="hidden"] {
    display: none !important;
  }
</style>

3. 在 .storybook/tsconfig.json 中新增 jsx

可選：如果你還沒有設定 jsx

{
  "extends": "../tsconfig.app.json",
  "compilerOptions": {
    "jsx": "react"
  }
}

4. 在 .storybook/.babelrc 中新增 react preset

可選：如果你還沒有設定 jsx

{
  "presets": [["@babel/react", { "runtime": "automatic" }]]
}

在故事中使用

設定故事的 id

不幸的是，由於 Storybook API 的限制，這是必要的。任何唯一的字串都可以用作 id。

在故事標題加上 hidden/ 前綴，以便在側邊欄中隱藏它。

import { Meta } from "@storybook/addon-docs";

<Meta
  id="simple-button-implementation"
  title="hidden/SimpleButtonImplementation"
  component={TestComponent}
/>

匯入 Tabs

import { Meta } from "@storybook/addon-docs";
import * as DesignTab from "./design-tab.stories.mdx";
import * as ImplementationTab from "./implementation-tab.stories.mdx";

<Meta
  title="Example/Tab Example"
  parameters={{
    tabs: [
      { label: "Design", mdx: DesignTab },
      { label: "Implementation", mdx: ImplementationTab },
    ],
  }}
/>

新增標頭 CTA 和頁尾

你可以使用自訂的呼叫動作和自訂的頁尾來擴充 TabContainer，這會顯示在每個頁面上。

屬性	輸入類型	描述
footerElement	JSX.Element	在每個頁面的底部顯示你的元件
additionalHeaderElement	JSX.Element	在標題旁邊的標頭內顯示你的元件

範例

{container: ({ children, context }) => (
  <DocsContainer context={context}>
    <TabContainer
      context={context}
      footerElement={<Footer />}
      additionalHeaderElement={<Header />}
    >
      {children}
    </TabContainer>
  </DocsContainer>
)},