标签	默认应用？	描述
`autodocs`	否	标记为 `autodocs` 的故事将包含在文档页面中。如果 CSF 文件不包含至少一个标记为 `autodocs` 的故事，则该组件将不会生成文档页面。
`dev`	是	标记为 `dev` 的故事将在 Storybook 的侧边栏中渲染。
`test`	是	标记为 `test` 的故事目前不会影响 Storybook 的 UI，但可用于过滤测试运行器。

dev 和 test 标签会自动隐式地应用于 Storybook 项目中的每个故事。

应用标签

标签可以是任何静态（即不是动态创建的）字符串，可以是内置标签，也可以是您自己设计的自定义标签。要将标签应用于故事，请将字符串数组分配给 tags 属性。标签可以在项目、组件（元数据）或故事级别应用。

例如，要将 autodocs 标签应用于项目中的所有故事，可以使用 .storybook/preview.js|ts

.storybook/preview.ts

// Replace your-renderer with the renderer you are using (e.g., react, vue3)
import type { Preview } from '@storybook/your-renderer';
 
const preview: Preview = {
  // ...rest of preview
  /**
   * 👇 All stories in your project will have these tags applied:
   *    - autodocs
   *    - dev (implicit default)
   *    - test (implicit default)
   */
  tags: ['autodocs'],
};
 
export default preview;

在组件故事文件中，您可以像这样应用标签

Button.stories.ts

// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
  /**
   * 👇 All stories in this file will have these tags applied:
   *    - autodocs
   *    - dev (implicit default, inherited from preview)
   *    - test (implicit default, inherited from preview)
   */
  tags: ['autodocs'],
};
export default meta;
 
type Story = StoryObj<typeof Button>;
 
export const ExperimentalFeatureStory: Story = {
  /**
   * 👇 This particular story will have these tags applied:
   *    - experimental
   *    - autodocs (inherited from meta)
   *    - dev (inherited from meta)
   *    - test (inherited from meta)
   */
  tags: ['experimental'],
};

移除标签

要从故事中移除标签，请在标签前添加 !。例如

Button.stories.ts

// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
  // 👇 Applies to all stories in this file
  tags: ['stable'],
};
export default meta;
 
type Story = StoryObj<typeof Button>;
 
export const ExperimentalFeatureStory: Story = {
  /**
   * 👇 For this particular story, remove the inherited
   *    `stable` tag and apply the `experimental` tag
   */
  tags: ['!stable', 'experimental'],
};

可以在项目中的所有故事（在 .storybook/preview.js|ts 中）、组件的所有故事（在 CSF 文件元数据中）或单个故事（如上所述）中移除标签。

按自定义标签过滤

自定义标签在 Storybook 的侧边栏层级结构之上提供了一个灵活的分类层。在上面的示例中，我们创建了一个 experimental 标签，表示故事尚未稳定。

您可以为任何目的创建自定义标签。示例用途可能包括

状态，例如 experimental、new、stable 或 deprecated
用户角色，例如 admin、user 或 developer
组件/代码所有权

自定义标签很有用，因为它们会显示为 Storybook 侧边栏中的过滤器。在过滤器中选择一个标签将导致侧边栏只显示具有该标签的故事。选择多个标签将显示包含任何这些标签的故事。

Filtering by custom tag

按标签过滤是专注于故事子集的强大方式，尤其是在大型 Storybook 项目中。您还可以按标签缩小故事范围，然后在该子集内进行搜索。

食谱

仅文档故事

有时为文档目的提供示例故事可能会有所帮助，但您希望使侧边栏导航更专注于对开发有用的故事。通过启用 autodocs 标签并删除 dev 标签，故事将成为仅文档：仅在文档页面中出现，而不是出现在 Storybook 的侧边栏中。

Button.stories.ts

// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
  /**
   * 👇 All stories in this file will:
   *    - Be included in the docs page
   *    - Not appear in Storybook's sidebar
   */
  tags: ['autodocs', '!dev'],
};
export default meta;

组合故事，仍然单独测试

对于具有许多变体的组件（例如按钮），将所有变体一起放在网格中可以是可视化它的有用方法。但是您可能希望单独测试这些变体。您可以使用以下标签实现此目的

Button.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
};
export default meta;
 
type Story = StoryObj<typeof Button>;
 
export const Variant1: Story = {
  // 👇 This story will not appear in Storybook's sidebar or docs page
  tags: ['!dev', '!autodocs'],
  args: { variant: 1 },
};
 
export const Variant2: Story = {
  // 👇 This story will not appear in Storybook's sidebar or docs page
  tags: ['!dev', '!autodocs'],
  args: { variant: 2 },
};
 
// Etc...
 
export const Combo: Story = {
  // 👇 This story should not be tested, but will appear in the sidebar and docs page
  tags: ['!test'],
  render: () => (
    <>
      <Button variant={1}>
      <Button variant={2}>
      {/* Etc... */}
    </>
  ),
};