Hello everyone.
I want to share a self-developed Angular UI Library in order to learn the development of Angular UI Components: NGX-YOUI.
What is NGX-YOUI?
NGX-YOUI is an Angular UI Library that can be highly customized with content and styles. You can easily integrate with other CSS frameworks, such as Tailwind or Bootstrap.
Thank you for reading this article. If you see any suggestions that can be improved or better, you are welcome to make them.
Github
https://github.com/NGX-YOUI/NGX-YOUI
Document
This document project integrates Tailwind CSS and NGX-YOUI.
You can check the source code for more details.
https://ngx-youi.github.io/NGX-YOUI/
Demo
https://ngx-youi.github.io/NGX-YOUI/auth/user/list
NPM
https://www.npmjs.com/package/ngx-youi
Feature
- Customize the presentation content of components through ng-template or dynamic custom components.
For example: You can customize the contents of a datatable section field:
<!-- component.html -->
<youi-datatable
[tableData]="columnTemplateTable.tableData"
[columns]="columnTemplateTable.columns"
>
<ng-template youi-datatable-template="header-status" let-column>
{{ column.label }} (status)
</ng-template>
<ng-template
youi-datatable-template="body-status"
let-cellData
let-rowData="rowData"
>
{{ getOptionText("status", cellData) }} ({{ cellData }})
</ng-template>
<ng-template
youi-datatable-template="body-action"
let-cellData
let-rowData="rowData"
>
<div class="action-column">
<button class="btn btn-cyan">
<i class="material-icons-outlined">visibility</i
><span>Browse</span>
</button>
<button class="btn btn-green">
<i class="material-icons-outlined">edit</i><span>Edit</span>
</button>
</div>
</ng-template>
</youi-datatable>
// component.ts
import { ITable } from 'ngx-youi';
export class YourComponentClass {
columnTemplateTable: ITable<any> = {
columns: [
{ name: 'username', label: 'USER NAME' },
{ name: 'name', label: 'NAME' },
{ name: 'status', label: 'STATUS' },
{ name: 'action', label: 'ACTION' }
],
tableData: [
{
username: 'admin',
name: 'Alan',
status: 0
},
{
username: 'user',
name: 'Steven',
status: 1
},
{
username: 'guest',
name: 'Mike',
status: 2
}
]
}
getOptionText (name: string, value: any) {
const options: {[key: string]: any[]} = {
status: [
{ label: 'All', value: '' },
{ label: 'InActive', value: 0 },
{ label: 'Active', value: 1 },
{ label: 'Disabled', value: 2 },
]
}
return options[name].find((option: { value: any }) => option.value === value).label
}
}
- Customize the rendering style of the component through CSSClass properties.
For example: You can customize the style of breadcrumb items, separator patterns:
<!-- component.html -->
<youi-breadcrumb
class="custom-breadcrumb"
itemCSSClass="custom-breadcrumb-item"
itemActiveCSSClass="custom-breadcrumb--active"
iconCSSClass="custom-breadcrumb-icon"
speratorCSSClass="custom-breadcrumb-sperator"
>
<youi-breadcrumb-item icon="home"> One </youi-breadcrumb-item>
<youi-breadcrumb-item icon="maps_home_work"> Two </youi-breadcrumb-item>
<youi-breadcrumb-item icon="format_list_numbered"> Three </youi-breadcrumb-item>
</youi-breadcrumb>
/* style.css */
::ng-deep .custom-breadcrumb {
padding: 0.75rem;
background-color: rgb(254 202 202);
border-radius: 0.375rem;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}
::ng-deep .custom-breadcrumb-item {
color: rgb(75 85 99);
}
::ng-deep .custom-breadcrumb-icon {
font-size: 1.5rem;
line-height: 2rem;
}
::ng-deep .custom-breadcrumb-sperator {
color: rgb(220 38 38);
}
::ng-deep .custom-breadcrumb--active {
color: rgb(59 130 246);
}
Getting Start
How To Install
npm i ngx-youi --save
Import CSS
Import a CSS file for all components
/* style.css */
@import '~ngx-youi/style/index.css';
Import a CSS file for a single component
/* style.css */
@import '~ngx-youi/style/component/breadcrumb.css';
Import Module
Import a module file for all components
// app.module.ts
import { NgModule } from "@angular/core";
import { NgxYouiModule } from "ngx-youi"
@NgModule({
imports: [..., NgxYouiModule]
})
export class AppModule {}
Import a module file for a single component
// app.module.ts
import { NgModule } from "@angular/core";
import { BreadcrumbModule } from 'ngx-youi';
@NgModule({
imports: [..., BreadcrumbModule],
})
export class AppModule {}
Road Map
- Example Playground on the stackblitz.
- Writing component api in the document.
- Default dark mode style in every components.
Top comments (0)