远景部分图书馆

愿景是"飞轮"的设计系统,目标是统一整个"飞轮"中所有应用的外观和感觉. 这是用于辅助和简化前端工作的 scs 样式和角构件的集合.

安装

先从npm安装视觉

$ npm install --save @flywheel-io/vision

然后,您需要做一些 scs 设置, 在您的全局 scs 样式表添加:

@use '@flywheel-io/vision' as vision;

@include vision.icons; // adds the icon font face and glyph classes
@include vision.colors; // defines the colors vision relies on

// optional inclusions
@include vision.mat-theme; // uses the vision angular material theme
@include vision.global-typography; // adds global styles for text elements

更多关于颜色的信息和主题检查 颜色文件

就这样,你准备用视觉

使用组件

视觉组件是独立的:将您使用的组件导入到 imports 用于组件的

import { FwAlertComponent } from '@flywheel-io/vision';

@Component({
  imports: [
    FwAlertComponent,
    ...anyOtherFwComponentsYouMightNeed,
  ],
  ...

然后添加到您的 html 中

<fw-alert description="Look I'm an alert"></fw-alert>

关于使用特定组件的更详细信息,包括其类名和选择器,您可以在 故事书