Skip to main content

为《故事书》供稿

Backstage Storybook 为您提供了一种探索可重复使用的 Backstage 用户界面元素以及如何在开发 Backstage 内核及其插件时使用这些元素的方法。 这些用户界面元素通常称为 "组件"，包括按钮、表格、具有特定格式的专用部件等。

您可以在以下网址找到我们的故事书http://backstage.io/storybook.

正如设计简介, Backstage 的设计基于Material UI大部分 UI 元素直接使用 Material UI，同时我们还扩展和编写了自定义元素，以提供特定功能。

Storybook Page

故事书 "故事 "用于提供如何使用特定组件的示例，然后以直观的方式显示出来，并附有可复制的示例代码。

创建自定义 Backstage 组件时，它们会被放置在@backstage/core-components并添加到故事书中。

有时，现有的 Material UI 组件(在@material-ui/core)就足够了，不需要包装或重复。 不过，我们可能希望识别一个有意见在这种情况下，如何使用这些现有组件的故事也会被放到我们的故事书中。

当使用 Material UI 的故事示例变得更加复杂，需要一组特定的颜色、变体、参数等时，它就可能成为重构的候选对象，成为一个完整的 Backstage 核心组件。

创建新故事​

故事基本上代表了一个组件的单一可视化状态。

要创建一个新故事，请在 Storybook 上创建一个新文件，该文件位于您要记录的组件旁边。

请看下面的结构示例：

core
└── src
    └── components
        └── Progress
            ├── Progress.tsx
            └── Progress.stories.tsx

注意：确保你的组件故事文件格式如下 > componentName.stories.tsx

本地运行​

转到storybook运行yarn install并安装依赖项，然后在命令行中运行以下命令yarn start

Storybook command startup

你应该会看到如上图所示的日志。

如果一切顺利，您的服务器将运行在6006端口，进入浏览器并导航至http://localhost:6006/您应该可以浏览并看到故事书页面。