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

使用Angular的Storybook简介第一部分

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

什么是故事书?

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

它是开源的，可以免费使用.

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

开始使用Angular Storybook

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

安装故事书

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

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

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

请注意 某人init 不是为空洞的工程而造的，

NPX某人

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

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

NPM运行故事书

安装完成后，故事书将在本地启动并输出地址. 它将自动打开，并在新的浏览器选项卡中显示地址，欢迎屏幕向您致意.

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

/的文件夹结构.故事书

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

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

的 预览.js file可以是一个ES模块，并导出以下密钥:

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

它还增加了 /故事 文件夹, 这给了我们一些故事书的用法例子, 提供已构建并记录的组件.

“.mdx的扩展

MDX在一个文件中捕获长篇Markdown文档和故事. 您还可以在MDX中编写纯文档页面，并将它们与故事一起添加到Storybook中.

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

什么是故事?

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

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

链接按钮的示例

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

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

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

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

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