使用Angular的故事书介绍第一部分- 菠菜大平台-菠菜大平台

使用Angular介绍故事书第一部分

在这篇博客, 我将通过一系列的帖子带您使用故事书创建独立的UI组件. 在这一部分中，我将介绍故事书，并从angular框架开始.

什么是故事书?

Storybook是一个用于定义、开发和测试UI组件的环境. 用故事书, 我们可以创建独立的组件，使开发更快，并允许您一次只处理一个组件.

它是开源和免费的.

对于务实的团队来说，Storybook是一个有吸引力的选择. 它提供了一个热重载开发环境, 完成插件测试, 部署预览, 响应用户界面, 和更多的.

开始学习Angular故事书

Storybook for Angular也是一个用于Angular组件的UI开发环境. 使用故事书，您可以为组件创建故事. 每个故事都显示设置了特定状态的单个组件的行为.

安装故事书

首先，用这些命令创建一个Angular项目，

Angular CLI | Angular项目设置
步骤1:安装angular cli:—npm Install——g @angular/cli.
步骤2:通过这个命令创建一个新项目. 选择yes作为路由选项，CSS或SCSS:- ng new myNewApp.
第三步:进入你的项目目录:- cd myNewApp.
步骤4:运行server并查看应用程序的运行情况

接下来，使用Storybook CLI在一个命令中安装它

请注意, 某人init 不是为空项目而生的，

init npx某人

Storybook将在安装过程中查看项目的依赖关系，并为您提供最佳的配置.

在终端上运行的下一个命令是:

npm运行故事书

安装完成后，故事书将在本地启动并输出地址. 它会自动打开一个新的浏览器标签的地址，一个欢迎屏幕欢迎你.

故事书提供了例如按钮、标题等组件的示例.，以供欢迎页参考. 我们可以进一步创建引用这些现有组件的组件.

/文件夹结构.故事书

A /.故事书 文件夹创建在根目录，其中包含故事书中全局设置的所有配置文件. 新的插件可以通过在主程序中添加一个条目来添加.js文件.

创建一个 .故事书/预览.js 文件，以控制故事呈现的方式，并添加全局装饰器和参数. 该文件在Canvas选项卡中加载，“预览”iframe将独立呈现组件. 使用 预览.js 对于全局代码(例如 CSS进口或JavaScript模拟).

的 预览.js 文件可以是ES模块，并导出以下密钥:

装饰器——一组全局装饰器
一个全局参数的对象
globalTypes -全局类型的定义

它还添加了 /故事 文件夹, 这给了我们一些使用故事书的例子, 提供已构建和文档化的组件.

“.mdx的扩展

MDX将长格式的Markdown文档和故事捕获到一个文件中. 您也可以在MDX中编写纯文档页面，并将它们添加到您的故事旁边的故事书中.

接下来，我们将看到这个故事，以及如何用一个例子在故事书中编写它.

什么是故事?

故事捕获UI组件的呈现状态. 开发人员为每个组件编写多个故事，描述组件可以支持的所有“有趣”状态. CLI创建了示例组件，演示了您可以使用Storybook: Button构建的组件类型, Header, 和页面.

注意: 在新创建的组件中，我们必须使用复制-粘贴方法来创建故事.ts文件.

链接按钮的例子

首先，在该故事中创建一个按钮组件作为函数. 此函数描述如何呈现处于主状态的按钮组件，并导出名为primary的故事. 另外，我还将向您展示如何在我们的故事中启用和禁用状态.

的 Github 下面显示的代码显示了“链接按钮”的示例.”

linkButton.组件.ts
从@angular/core中导入{Component, Input};
@ 组件 ({
  选择器:“text-link-button”,
  template: ` `,
  styleUrls: ['./ linkButton.css的),
})
导出默认类ButtonComponent {
    @Input() label = 'Link Button ';
    @Input()输入textColor;
    @Input() 禁用 = true;
    Public get classes(): string[] {
        Const模式= this.禁用 ? “btn-禁用”:“btn-link”;
        返回(“btn”模式);
      }
}

linkButton.故事.ts
import {Story, Meta}从“@故事书/angular”;
从'中导入LinkButton./ linkButton.组件的;
出口默认{
  标题:“例子/ LinkButton”,
  组件:LinkButton,
  argTypes: {
    backgroundColor: {control: 'color'}，
  },
作为元};
const Template: Story = (args: LinkButton) => ({
  组件:LinkButton,
  道具:参数,
});
export const linkButton = Template.绑定({});
linkButton.args = {
  禁用:没错,
  标签:“链接按钮”,
};
linkButton.css
.btn-禁用 {
  光标:不允许 !重要;
}

在使用命令运行项目后，我们将看到以下输出: npm运行故事书.