Storybook 插件 - 徽章

使用徽章注解你的故事

用法

定义预设

默认情况下，有一些徽章。请参阅 defaults.ts

// preview.ts

const preview: Preview = {
  parameters: {
    badgePresets: {
      beta: {
        title: "Beta",
        description: "Not quite ready for prime time",
        style: {
          color: "#ffffff",
          backgroundColor: "#9c88ff",
        },
      },
      stable: {
        title: "Stable",
        description: "Ready for production",
        style: {
          color: "#ffffff",
          backgroundColor: "#44bd32",
        },
      },
    },
  },
};

在故事参数中指定

默认徽章

在 preview.ts 中指定徽章，如果未指定徽章，它将在所有地方显示。

// preview.ts

const preview: Preview = {
  parameters: {
    badgePresets: { ... },
    badges: ['stable'] // shows only when `badges` is not specified for the story, or stories
  },
};

对于同一组件的所有故事

// MyComponent.stories.tsx

// 👇 This default export determines where your story goes in the story list
const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
  parameters: {
    // will override any top-level badge (preview)
    badges: [
      "beta", // Defined in `preview.ts`
      {
        title: "Sep 1",
        description: "Back to school special",
        style: {
          color: "#050505",
          backgroundColor: "#DBACFF",
        },
      },
    ]
  }
}

对于单个故事

/// MyComponent.stories.tsx

export const EdgeCaseWIP: Story = {
  args: { ... },
  badges: ['wip'] // will override any top-level badge (meta, preview)
}

贡献

欢迎提交 Pull Request

2024 年 9 月 4 日，完全值得完成，尽管我上班迟到了几个小时