Docs Tabs

storybook-addon-docs-tabs

一个 Storybook 插件，为 Docs 插件添加选项卡。

注意：这个插件有点取巧。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 中隐藏侧边栏的 Tab 故事

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