使用 Storybook 进行高效 U​​I 开发：Angular 指南

[suchona.kani.z]

首先，让我们介绍一下 Storybook 的基础知识及其在 UI 开发领域的重要性。

什么是故事书以及为什么它很重要？
Storybook 是前端开发人员在隔离环境中构建和测试 UI 组件的强大工具。它是一个交互式平台，开发人员可以在该平台上独立于应用程序的其余部分开发和呈现其应用程序的用户界面。这种隔离对于快速执行设计迭代和确保不同组件之间的一致性特别有用。

共享 UI 库的附加值
共享 UI 库是可重用组件的集合，可以在不同项目或不同团队中使用。 Storybook 通过提供用于可视化和测试这些组件的中央平台，使构建和维护此类库变得更加容易。通过重用已建立的组件，团队可以节省开 高中生邮寄名单 发时间，提高设计一致性，并确保不同应用程序和服务之间的一致用户体验。因此，故事书在实施高效和一致的设计实践中发挥着关键作用。

Angular 的故事书基础知识：实用见解
示例：按钮组件
作为简单 Angular 组件的示例，我们将使用按钮 MyButtonComponent。按钮的外观和行为应该是可定制的。为此，我们定义输入“inverted”、“size”和“label”。使用这些输入：

Inverted：另类风格和悬停效果
尺寸：按钮的尺寸
标签：按钮上的文字

图 1：按钮组件的输入，包括默认值


图 2：使用按钮组件模板中的输入

构建简单的故事
一个简单的故事类包括：

a 定义元数据：包含组件类型、标签和argTypes等配置。
元数据导出：将定义的元数据导出为标准导出。 Storybook 使用此元数据来表示用户界面中的组件及其控件。
故事类型的定义：创建一个新类型Story，例如，它是类型为MyButtonComponent 的StoryObj。这为后来的故事定义奠定了典型。
单个故事的定义：每个故事都定义为一个对象，其中包含相应故事的 args（参数）。
MyButtonComponent 的故事类元数据具有以下结构：

组件：组件类型
标签： Storybook Autodocs 是一个自动创建组件文档的工具。更多信息请参见图五。
argTypes：定义可用于故事的参数，以及说明和可选设置（例如控件类型和选项）。在本例中，参数是标签、大小和反转。

图 3：故事类元数据

在定义各个故事时，我们将解决 MyButtonComponent 的特定属性，并以不同的类型和组合呈现它们。图四显示了一些示例定义。概述：

MediumButton：中等大小的按钮，带有“Button”标签
SmallButton：带有“Button”标签的小按钮
MediumButtonInverted：倒置样式的中型按钮，带有“Button”标签
BigButton：带有“Button”标签的大按钮

图 4：故事定义

Storybook 中的可视化和与组件的交互
为组件创建故事后，现在可以在 Storybook UI 的浏览器中对它们进行可视化并与之交互。图 5 显示了我们的 Stories 类生成的 MyButtonComponent 故事的概述。您可以看到我们的故事中定义的四个按钮。