InsuiProject

insui的安装过程

Install

安装插件

安装 @liuk123/insui 和 @liuk123/insui-icons 插件。

npm install @liuk123/insui @liuk123/insui-icons

引入样式

在项目的 angular.json 文件中引入 ins-ui-global.less 样式文件。

{
  "projects": {
    "my-project": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/@liuk123/insui/styles/ins-ui-global.less"
            ]
          }
        }
      }
    }
  }
}

引入依赖注入项

在项目的src/app/app.config.ts文件中引入 NG_EVENT_PLUGINS 依赖注入项。

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes), provideClientHydration(withEventReplay()),
    ...
    NG_EVENT_PLUGINS <!-- 引入事件插件 -->
  ]
};

引入root组件和主题

在 app.component.ts 文件中引入 InsRoot 组件和主题服务。
主题目前支持 light 和 dark 两种主题。

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, InsRoot], <!-- 引入InsRoot组件 -->
  template: `<ins-root ><router-outlet /></ins-root>`, <!-- 在最外层使用InsRoot组件 -->
  host: { 
    '[attr.insTheme]': 'theme()', <!-- 绑定主题属性 light dark -->
   },
   providers: []
})
export class AppComponent {
  settingSrv = inject(SettingService)
  theme = toSignal(
    this.settingSrv.theme$.pipe(
      map(v=>v=='sys'?this.settingSrv.getSystemTheme(): v)
    )
  )
}

设置ICONS

在 angular.json 文件中配置 assets 选项，将 @liuk123/insui-icons 插件的图标文件复制到项目的 assets/ins-ui/icons 目录下。

{
  "projects": {
    "my-project": {
      "architect": {
        "build": {
          // ...
          "assets": [
            {
              "glob": "**/*",
              "input": "node_modules/@liuk123/insui-icons/src",
              "output": "assets/icons"
            }
          ]
        }
      }
    }
  }
}