NGX-YOUI - Angular UI 라이브러리

여러분, 안녕하세요.
오늘은 자체 개발한 Angular UI 라이브러리인 NGX-YOUI를 소개하려고 합니다.

NGX-YOUI란?

NGX-YOUI는 콘텐츠와 스타일로 고도로 사용자 정의할 수 있는 Angular UI 라이브러리입니다. Tailwind 또는 Bootstrap과 같은 다른 CSS 프레임워크와 쉽게 통합할 수 있습니다.

이 기사를 읽어 주셔서 감사합니다. 개선할 수 있거나 개선할 수 있는 제안이 있으면 언제든지 제안할 수 있습니다.

Github

https://github.com/NGX-YOUI/NGX-YOUI

문서

이 문서 프로젝트는 Tailwind CSS와 NGX-YOUI를 통합합니다.
자세한 내용은 소스 코드를 확인할 수 있습니다.

https://ngx-youi.github.io/NGX-YOUI/

데모

https://ngx-youi.github.io/NGX-YOUI/auth/user/list

고궁

https://www.npmjs.com/package/ngx-youi

특징

ng-template 또는 동적 사용자 지정 구성 요소를 통해 구성 요소의 프레젠테이션 콘텐츠를 사용자 지정합니다.

예: 데이터 테이블 섹션 필드의 내용을 사용자 정의할 수 있습니다.

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

CSSClass 속성을 통해 구성 요소의 렌더링 스타일을 사용자 지정합니다.

예: 이동 경로 항목 스타일, 구분자 패턴을 사용자 정의할 수 있습니다.

<!-- 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);
}

시작하기

설치하는 방법

npm i ngx-youi --save

CSS 가져오기

모든 구성 요소에 대한 CSS 파일 가져오기

/* style.css */

@import '~ngx-youi/style/index.css';

단일 구성 요소에 대한 CSS 파일 가져오기

/* style.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 {}

로드맵

stackblitz의 예제 놀이터.

문서에 구성 요소 API를 작성합니다.

모든 구성 요소의 기본 어두운 모드 스타일입니다.