NGX-YOUI - Angular UI Library

NGX-YOUI — Fri, 08 Apr 2022 07:37:25 +0000

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.

DEV Community: NGX-YOUI