文档选项卡

storybook-addon-docs-tabs

一个 Storybook 附加组件，可以为 文档附加组件 添加选项卡。

注意：此附加组件有点小技巧。Storybook API 完全不支持此类操作。但您仍然可以使用此附加组件，因为它仍在使用 MDX 及其“正常”API。

入门

1. 安装

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

2. 在 .storybook/preview.js 中添加新的容器

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 预设

可选：如果您尚未配置 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}
/>

导入选项卡

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>
)},