Question

对于React，存在一些 live 样式指南生成器，如styleguidist，它们可以获取组件，sass和一些额外的可编辑文本，并自动生成特定应用程序的样式指南，具体取决于将styleguide任务插入到构建过程中，每次重复该过程。 Angular 2 +有什么类似的东西吗？

警告：我不是指编码样式指南，而是生活样式指南，几乎可以自动记录布局（sass / css）样式，字体，图标，颜色，字体大小和组件及其参数等。这些事情碰巧也被称为风格，对此抱歉，但我没有发明这个名字。

Answer 1

UI-jar是一个下拉模块，它根据您在Angular（2.x及更高版本）中为组件编写的测试自动创建生活方式指南。测试版位于https://www.npmjs.com/package/ui-jar

使用UI-jar，您也可以独立开发组件，而无需使用其他应用程序。

您还可以获得有关组件的文档。

Answer 2

另一个选项是Angular Playground。您必须编写一些代码来定义您希望它提供的方案，但我已经在我的项目中使用它并且我喜欢它。

如果你想要自动的UI组件文档，我可以像他们的评论中提到的Compodoc一样使用yogibimbi。

似乎生态系统中缺少一种工具，可以提供类似这两种工具的组合。

Answer 3

Storybook也是一个很好的解决方案，但是您还需要编写代码来定义您的不同方案。 Storybook最初是为React开发的，但现在也与Angular兼容。

Answer 4

您可以使用KSS。这很简单：您必须编写一些代码来描述CSS类，就像这样：

// Primary Button
//
// Use this class for the primary call to action button.
// Typically you'll want to use either a `<button>` or an `<a>` element.
//
// Markup:
// <button class="btn--primary">Click Me</button>
// <a href="#" class="btn btn--primary">Click Me</a>
//
// Styleguide Components.Buttons.Primary

.btn--primary {
  padding: 20px 30px;
  text-transform: uppercase;
  font-weight: bold;
  background-color: aqua;
  color: red;
}

并且为了易于使用，我在package.json中定义了一个命令：

 "kss": "ng build --extract-css true && kss --source ./ --destination styleguide --css ../dist/styles.bundle.css"

然后运行：

npm run kss

实际上，此命令在您的角度项目中的src文件夹旁边创建一个名为“ styleguide”的新文件夹，一切就绪，您只需打开“ /styleguide/index.html”并享受。希望对您有帮助。

Angular 2是否有生活风格指南生成器，就像React的风格导师一样？

4 个答案: