0%

component design specification

设计基础

  • 字体
  • 排版
  • 色彩
  • 交互原则

组件原则

  • 高效
  • 轻量
  • 低耦
  • 独立
  • 易用

组件定义

基础服务组件

  • 排版 (栅格组件)
  • 动画组件

基础通用组件

  • Button
  • Icon
  • Loading
  • 浮层

导航组件

  • Menu
  • Breadcrumb
  • Pagination
  • Steps

交互组件

  • Alert
  • Message
  • Modal

表单组件

  • Form
  • Input
  • Radio
  • CheckBox
  • Select
  • Switch
  • DatePicker

数据呈现型组件

  • Card
  • Badge
  • Table
  • Tag
  • TimeLine
  • Tooltip

开发方式

渐进式开发

剥离 CSS 与 组件的耦合性,将CSS 独立为CSS库。

组件开发规范

1. 组件分离

  1. 每个组件单独一个文件夹
  2. 在父级建立统一入口 index.ts,由应用方通过 AppModule 导入:如
    import { NgModule } from '@angular/core';
    import { ButtonsModule } from './buttons';

    @NgModule({
        exports: [ ButtonsModule ],

    })
        export class pingUIModules {
    }

2. 独立调用

  1. 在文件夹外部,应单独暴露出某个组件,以便用户独立调用。如在Component 目录下的 Buttons 同级目录下建立 buttons.ts:

     export { ButtonComponent } from './buttons/button.component';
     export { ButtonsModule } from './buttons/buttons.module';
    

3. 公共部分

  1. 将组件都可以用到的公共部分抽象化

4. 组件构成

  1. 每个组件应当由下列文件构成:

      [name].component.html   模板文件
      [name].module.ts  模块文件
      [name].component.ts  组件类
      [name].component.spec.ts  //若需要Karma测试
      readme.md  使用文档
      [name].d.ts 文件,若需要
    

编码规范

  • 文件夹、文件名全部小写
  • 内部文件以 [name].component.ts 这样的风格命名
  • 文件内部的类名以 首字母大写的驼峰式 命名
  • 文件的模块化导入导出使用 Es6 规范,不要使用 Webpack、CommonJs 等库风格的 Require()
  • 全部使用4格缩进

其他规范详情参考 https://github.com/fex-team/styleguide/blob/master/javascript.md

团队尽量保持一个简单、易读、语义化、清晰的风格