NGX-YOUI is an Angular UI Library that can be highly customized with content and styles. You can easily integrate with other CSS frameworks and UI Library, such as Tailwind, Bootstrap, PrimeNG, Angular Material etc.
- Customize the presentation content of components through ng-template or dynamic custom components.
- Customize the rendering style of the component through CSSClass properties.
https://ngx-youi.github.io/NGX-YOUI/
https://ngx-youi.github.io/NGX-YOUI/auth/user/list
https://www.npmjs.com/package/ngx-youi
npm i ngx-youi --save
architect": {
...,
"build": {
...,
"options": {
"assets": {
{
"glob": "**/*.woff",
"input": "./node_modules/material-icons/iconfont",
"output": "/assets/material-icons/iconfont"
},
{
"glob": "**/*.woff2",
"input": "./node_modules/material-icons/iconfont",
"output": "/assets/material-icons/iconfont"
}
}
}
}
}
<!doctype html>
<html>
<head>
...
<!-- Material icon -->
<link rel="preload" href="assets/material-icons/iconfont/material-icons.woff" as="font" crossorigin>
<link rel="preload" href="assets/material-icons/iconfont/material-icons-outlined.woff" as="font" crossorigin>
<link rel="preload" href="assets/material-icons/iconfont/material-icons-round.woff" as="font" crossorigin>
<link rel="preload" href="assets/material-icons/iconfont/material-icons-sharp.woff" as="font" crossorigin>
<link rel="preload" href="assets/material-icons/iconfont/material-icons.woff2" as="font" crossorigin>
<link rel="preload" href="assets/material-icons/iconfont/material-icons-outlined.woff2" as="font" crossorigin>
<link rel="preload" href="assets/material-icons/iconfont/material-icons-round.woff2" as="font" crossorigin>
<link rel="preload" href="assets/material-icons/iconfont/material-icons-sharp.woff2" as="font" crossorigin>
</head>
<body>
<app-root></app-root>
</body>
</html>
architect": {
...,
"build": {
...,
"options": {
"assets": {
{
"glob": "**/*",
"input": "./node_modules/svg-loaders/svg-smil-loaders",
"output": "/assets/svg-loaders/"
}
}
}
}
}
/* style.css */
@import '~ngx-youi/style/index.css';/* style.css */
/* import youi-common.css before import css of component */
@import "~ngx-youi/style/youi-common.css";
@import '~ngx-youi/style/component/breadcrumb.css';// app.module.ts
import { NgModule } from "@angular/core";
import { NgxYouiModule } from "ngx-youi"
@NgModule({
imports: [..., NgxYouiModule]
})
export class AppModule {}// app.module.ts
import { NgModule } from "@angular/core";
import { BreadcrumbModule } from 'ngx-youi';
@NgModule({
imports: [..., BreadcrumbModule],
})
export class AppModule {}