简介
@kadira/storybook-ui 是一个开源的前端 UI 套件，它提供了一个完善的用户界面来帮助开发者构建 UI 组件并展示它们的不同状态和变种。它是一个基于 React 框架的纯前端应用。
安装
首先，您需要使用 npm 包管理器将 @kadira/storybook-ui 安装到您的项目中：
npm install --save @kadira/storybook-ui
使用方法
接下来，您需要为您的项目中的组件创建一个 Storybook。Storybook 是一个独立的环境，您可以在其中展示不同状态和变种的组件。这可以帮助您更好地理解组件的行为和外观，以及进行交互设计和调试。
创建 Storybook
运行以下命令创建一个新的 Storybook：
npx -p @storybook/cli sb init --type react
注：npx 是 npm 5.2+ 版本的一部分。如果您使用的是较老的版本，请先全局安装 @storybook/cli 并执行 getstorybook 命令来初始化。
这会下载并安装 Storybook，创建一个新项目并为您的项目添加 Storybook。
编写 Stories
接下来，您需要在 Storybook 中添加组件的状态和变种作为所谓的 Stories：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- -------------------
------ - ------ - ---- -----------------------
------------------- -------
--------------- -- -- -
------------- ------------
--
--------------- -- -- -
------- ------------- ------------
---在上面的示例中，我们使用 .add 方法为一个名为 "Button" 的组件添加了两个不同的 Stories，分别展示了默认状态和主要状态的按钮。
运行 Storybook
最后，运行以下命令启动 Storybook 服务器：
npm run storybook
这会在本地启动一个服务器，并在浏览器中打开 Storybook 页面，您可以在其中查看所有 Stories 并与之交互。
指导意义
通过使用 @kadira/storybook-ui，您可以更轻松地构建和测试 UI 组件。它使您更容易理解组件的不同状态和变种，并能够直接与它们进行交互和进行交互设计和调试。
通过编写 Stories，您可以将组件的各个状态和变化点描述清楚，并确保它们按照预期行为工作。您还可以使用 Storybook 中提供的插件和工具来可视化地检查 CSS 和布局等细节。
总之，使用 @kadira/storybook-ui 可以让您更快地构建高质量的 UI 组件，并使您更容易进行交互设计和调试。
示例代码
您可以在以下 GitHub 仓库中查看完整的示例代码：
https://github.com/kadira-samples/react-storybook-sample
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/kadira-storybook-ui