Skip to content
View NGX-YOUI's full-sized avatar

Block or report NGX-YOUI

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Please don't include any personal information such as legal names or email addresses. Maximum 100 characters, markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
NGX-YOUI/README.md

NGX-YOUI

npm MIT

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.

  1. Customize the presentation content of components through ng-template or dynamic custom components.
  2. Customize the rendering style of the component through CSSClass properties.

Document

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

Getting Start

How To Install

npm i ngx-youi --save

Import Material Icon font

Append Below setting in "YOUR_PROJECT.architect.build.options.assets" of angular.json

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"
        }
      }
    }
  }
}

Preload Material Icon Font in <head> of index.html

<!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>

Import SVG Loaders

Append Below setting in "YOUR_PROJECT.architect.build.options.assets" of angular.json

architect": {
  ...,
  "build": {
    ...,
    "options": {
      "assets": {
        {
          "glob": "**/*",
          "input": "./node_modules/svg-loaders/svg-smil-loaders",
          "output": "/assets/svg-loaders/"
        }
      }
    }
  }
}

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 (Tree Shaking)

/* 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';

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 (Tree Shaking)

// app.module.ts

import { NgModule } from "@angular/core";
import { BreadcrumbModule } from 'ngx-youi';

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

Popular repositories Loading

  1. NGX-YOUI NGX-YOUI Public

    NGX-YOUI is a Highly customizable library of Angular UI components for content and styles

    TypeScript 5

  2. angular angular Public

    Forked from angular/angular

    The modern web developer’s platform

    TypeScript

  3. brotli brotli Public

    Forked from google/brotli

    Brotli compression format

    C