kstng

介绍

angular组件库 公司内部使用

使用注意

1. 项目依赖

• bootstrap4
• font-awesome 4.7

安装使用

1. npm install kstng or yarn add kstng
2. angular.json中引入样式文件 node_modules/src/assets/theme.min.css and node_modules/src/assets/style.min.css

开发规约

1. #### 组件

• 组件必须继承ComponentBase父类
• 组件必须实现接口OnInit, OnDestroy,并在ngInit中实现类似如下的代码

    
  let _default:ConfigOption = {
    name: (this.component_name = `dashboard_stat_configs_${this.id}`),
    dataConfig: {
      enable: true,
      json: JSON.stringify({
        title: 'Total Profit',
        value: '12,5M$'
      })
    }
  };
  this.init_config(_default).then(() => {
    this.configOpt(this.configOptions);// 需要单独实现的配置方法
  });
  

// configOpt实现实例
  configOpt(options: ConfigOption) {
        const self = this;
        self.config(options, (js) => {
            self.data = js;
        });
    }

组件

dashboard-stat

import { DashboardStatModule } from 'kstng';
 
@NgModule({
  ...
  imports: [DashboardStatModule,...]
  ...
})
 

Add component to your page:

<k-dashboard-stat bgClass="red-flamingo"></k-dashboard-stat>

API Reference

Dashboard-Stat Component

Inputs

iconClass	图标class默认支持font-awesome 4.7
bgClass	背景色样式类，可传入的值default blue dark等等，详细见theme.min.css
data	默认数据 { title: string, value: any, detail?: {extra：boolean,url:string}

码云特技

1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
2. 码云官方博客 blog.gitee.com
3. 你可以 https://gitee.com/explore 这个地址来了解码云上的优秀开源项目
4. GVP 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5. 码云官方提供的使用手册 https://gitee.com/help
6. 码云封面人物是一档用来展示码云会员风采的栏目 https://gitee.com/gitee-stars/