@kingecg/ui

Angular UI组件库，提供一套现代、可定制的UI组件，用于构建响应式Web应用程序。

组件

基础组件

• Button - 可定制的按钮组件
• Input - 文本输入框
• Checkbox - 复选框
• Radio - 单选按钮
• Select - 下拉选择器
• Toggle - 开关组件
• Tag - 标签组件

布局组件

• Card - 内容容器卡片
• Table - 数据表格
• Tab-Group - 标签页容器
• Tab-Item - 标签页项

反馈组件

• Alert - 警告提示
• Dialog - 对话框
• Progress-Bar - 进度条
• TBU-Spin - 加载指示器

特殊组件

• Calendar - 日历选择器（支持农历）
• JSON-Editor - JSON编辑器
• Theme-Switcher - 主题切换器

指令

• Tooltip - 文字提示指令

安装

npm install @kingecg/ui

使用方法

1. 在你的Angular模块中导入UI模块：

import { UiModule } from '@kingecg/ui';

@NgModule({
  imports: [
    UiModule
  ],
  // ...
})
export class AppModule { }

2. 在组件中使用：

<ui-button>点击我</ui-button>
<ui-input placeholder="请输入..."></ui-input>

主题定制

组件库支持主题定制，可以通过ThemeService进行主题切换：

import { ThemeService } from '@kingecg/ui';

constructor(private themeService: ThemeService) {}

switchToDarkMode() {
  this.themeService.setTheme('dark');
}

switchToLightMode() {
  this.themeService.setTheme('light');
}

开发

前提条件

• Node.js (推荐最新LTS版本)
• Angular CLI

本地开发

1. 克隆仓库
2. 安装依赖：npm install
3. 启动Storybook：npm run storybook
4. 访问 http://localhost:6006 查看组件展示

构建库

ng build ui

兼容性

• Angular 19.x 及以上版本
• 现代浏览器（Chrome、Firefox、Safari、Edge）

文档

详细的组件文档和示例可以通过运行Storybook查看：

npm run storybook