標籤	預設套用？	描述
`autodocs`	否	標記為 `autodocs` 的 stories 會包含在文件頁面中。如果 CSF 檔案未包含至少一個標記為 `autodocs` 的 story，則該元件將不會產生文件頁面。
`dev`	是	標記為 `dev` 的 stories 會在 Storybook 的側邊欄中呈現。
`test`	是	標記為 `test` 的 stories 會包含在測試執行器或測試擴充套件執行中。

dev 和 test 標籤會自動隱含地套用到您 Storybook 專案中的每個 story。

套用標籤

標籤可以是任何靜態（即非動態建立）字串，可以是內建標籤或您自行設計的自訂標籤。若要將標籤套用到 story，請將字串陣列指派給 tags 屬性。標籤可以套用在專案、元件 (meta) 或 story 層級。

例如，若要將 autodocs 標籤套用到您專案中的所有 stories，您可以使用 .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;

在元件 stories 檔案中，您可以像這樣套用標籤

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'],
};

移除標籤

若要從 story 移除標籤，請在其前面加上 !。例如

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'],
};

標籤可以從您專案中的所有 stories（在 .storybook/preview.js|ts 中）、元件的所有 stories（在 CSF 檔案 meta 中）或單個 story（如上所示）中移除。

依自訂標籤篩選

自訂標籤在 Storybook 的側邊欄階層之上啟用彈性的分類層。在上面的範例中，我們建立了一個 experimental 標籤，以指示 story 尚未穩定。

您可以為任何目的建立自訂標籤。範例用途可能包括

狀態，例如 experimental、new、stable 或 deprecated
使用者角色，例如 admin、user 或 developer
元件/程式碼所有權

自訂標籤很有用，因為它們會顯示為 Storybook 側邊欄中的篩選器。在篩選器中選取標籤會導致側邊欄僅顯示具有該標籤的 stories。選取多個標籤會顯示包含任何這些標籤的 stories。

Filtering by custom tag

依標籤篩選是專注於 stories 子集的一種強大方式，尤其是在大型 Storybook 專案中。您也可以依標籤縮小 stories 範圍，然後在該子集中搜尋。

食譜

僅限文件的 stories

有時為了文件目的提供範例 stories 會很有幫助，但您希望側邊欄導覽更著重於對開發有用的 stories。透過啟用 autodocs 標籤並移除 dev 標籤，story 會變成僅限文件：僅出現在文件頁面中，而不出現在 Storybook 的側邊欄中。

Button.stories.ts

// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
import type { Meta } 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;

組合 stories，仍然個別測試

對於具有許多變體的元件（例如按鈕），將這些變體全部放在一起的網格可以是視覺化它的有用方法。但您可能希望個別測試這些變體。您可以使用如下標籤來完成此操作

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