故事书是一个令人难以置信的工具,允许您在隔离中构建,测试和记录设计系统的组件。故事书提供简化的工作流程和大量的插件,以提高开发人员体验。这是因为这个故事书是由独立开发人员和企业团队使用的。在本教程中,我们将学习如何将故事书集成到模板项目中以制作建筑,测试和记录更容易。

您可以找到本教程的所有代码钢板蜡纸故事书中在这里。如果您愿意观看视频教程,我最近创建了一个我穿过这一过程的视频。看看这个!

故事书故事

故事是任何故事书项目的基础。故事是表示组件的特定状态的函数。可以为单个组件编写多个故事以表示其所有不同状态。你可以了解有关故事的更多信息以及如何从故事书Docs编写它们。我只是想在这里介绍这个想法,因为我们将在整个教程中谈论它们。

添加故事书籍

我们要做的第一件事就是向我们的模板项目添加故事书。对于本教程,我将使用模具初学工程你从跑步开始NPM Init Stencil.,但随时使用任何模版项目。要添加故事书,请在模板项目中打开终端并运行:

npx sb init --type html

故事书在里面命令将设置我们使用故事书所需的所有文件和依赖项。我们还指定了我们的故事书项目类型HTML.通过这一点- 类型旗帜。我们这样做是因为Stencens生成Web组件,并且在本教程中,我们将在我们的故事中使用这些Web组件作为自定义HTML元素。

安装后,我们可以使用命令运行故事书:

NPM RUN StudyBook.

您会注意到故事书已经有一些用于我们的示例故事。这些示例故事来自故事在我们的项目中创建的故事书的文件夹。我要删除这个文件夹,因为我们将在本教程中使用它。尽管如此,这些文件可以作为一个很好的参考点,特别是如果你是故事书的新手。

定义我们的自定义元素

在我们的模板项目中,您会注意到故事书创建了一个.storybook.给我们的文件夹。在这个文件夹中,我们有一个preview.js.文件。此文件是我们置于我们可能拥有的任何类型的全局代码的地方。这真的很重要,因为它是我们要定义模板组件的地方,所以我们可以在我们的故事中使用它们。

为此,请在顶部添加以下内容preview.js.

从'... /lloader'导入{defineceCustomElements};definececustomelements();

在这里,我们首次导入我们的定义来自备的方法装载机该模板生成在构建时生成。打电话DefineCustomElements()基本上注册了我们的所有组件,以便他们可以在我们的故事中使用。因为此加载程序在构建时生成,所以我们必须运行:

NPM运行构建

要么

模具版

写下我们的第一个故事

随着我们所有的配置,我们现在可以写下我们的第一个故事。对于我们的故事,我们将使用我是我的创建新的模板项目时生成的组件。

从'@模板/核心'导入{组件,prop,h};来自'../ ...的导入{格式}。@component({tag:'my-component',styleUrl:'my-component.css',shadow:true,})导出compacy mycomponent {/ ** *名字* / @prop()首先:string;/ ** *中间名* / @prop()中间:字符串;/ ** *姓氏* / @prop()最后:字符串;private getText():String {return格式(this.first,this.middle,this.last);} render(){return 
hello,世界!我是{this.gettext()} ;}}

首先,让我们创建一个我们写信的文件。在我们的里面我的组件文件夹,让我们创建一个名为my-component.stories.ts.ts.

注意:此文件不必在其中创建我的组件文件夹。你可以拥有一个故事包含每个组件的所有故事的文件夹。这只是我喜欢组织事物的方式。重要的是你的故事文件结束.stories.ts / Js.

我们将添加到我们的第一件事my-component.stories.ts.ts.文件是默认导出。这是一个对象,允许我们定义关于我们故事的各种元数据。为了我们的目的,我们只需提供一个标题对于我们的故事。此标题将在故事书实例的左侧导航窗格中清单。

导出默认{//这会创建“组件”文件夹和“MyComponent”子文件夹标题:'Components / MyComponent',};

接下来,我们将为我们的故事制作一个模板。这是一种常见的模式,允许我们基于相同的组件进行多个故事。为此,我们会创建一个调用的函数模板这需要一个args.对象,然后用那些args作为属性值返回组件。

const template =(args)=>` `;

创建模板后,我们可以使用命名导出创建故事。我们的故事将绑定到我们的模板并指明这一点args.我们想要传递给我们的组成部分。

导出const示例= template.bind({});example.args = {第一个:'winnie',中间:''',最后:'pooh'};

使用此模式,我们可以创建各种故事来展示我们组件的不同用例。我们还可以使用故事书中的“控件”直接编辑传递给我们组件的值。

更新保存

转回我们的故事书实例,一切似乎都在工作!我们的组件正常渲染,我们可以使用故事书的控件来立即更改我们传递给组件的值。此外,如果我们单击“文档”选项卡,然后单击“显示代码”,我们可以看到如何使用组件。

但是,您可能会注意到的一件事是,如果您对您的组件进行了更改,则该更改将不会反映在故事书中。这是因为我们的组件是由我们的加载程序定义的,并且在执行构建时,该加载程序仅更新。因此要传播更改,我们需要通过运行来重建模板项目:

NPM运行构建

要么

模具版

一旦我们这样做,我们的变化将通过故事书传播。不幸的是,每次进行改变时都会运行一个建设并不是一种伟大的开发者体验。要在进行更改时自动构建我们的项目,我们可以运行:

模板构建 - 观察

现在Stencil将为我们的项目中的任何变化观察并在发生时重建我们的项目。这意味着当我们保存更改时,这些变化将在故事书中可见。

结论

本教程提供了在模板项目中设置故事书的介绍。有很多,你可以用故事书和模板做,所以我鼓励你看看故事书Docs.并在模板项目中玩它。我迫不及待地想看到你在模板设计系统中使用故事书的所有方式。

注册离子通讯获取最新的新闻和更新betway东盟体育app!

Baidu