omisell-structure-demo

Omisell UI Library

Mục lục

• Tabset
• Dropdown
• [Confirm Modal](#Confirm Modal)
• Input switch

Chú ý

Vì tất cả các component UI ở đây đều đã được export ra module nên trước khi sử dụng thì đặt thư mục source vào trong code base của dự án và import modules

Thư mục đặt code

+--- src
    +--- app
        +--- modules
            +--- module 1
            +--- module 2
            +--- share-ui <-- this is module UI

Import vào trong modules cần dùng

    @NgModule({
      declarations: [],
      imports: [
        CommonModule,

        // Shared
        ShareUI
      ]
    })
    export class OtherModule { }

Tabset

Hiển thị tab trong dự án

Để hiển thị tab cần có 2 thành phần chính

1. omisell-tabset

   Là 1 container dùng để chứa các tab

   Attribute	Type	Meaning
   changeTab	Output	Khi người dùng change tab thì sẽ bắn event về

2. omisell-tab

   là 1 component tab

   Attribute	Type	Meaning
   tabID	number	Id của tab. Là giá trị định danh duy nhất
   title	string	Tên của tab

Ngoài ra có thể chèn template vào bên sẵn bên trong tabset để không phải ẩn hiện template bằng tay.

Lúc đó chúng ta dùng ng-template kèm với directive omisell-tabcontent

<omisell-tabset (changeTab)="changeTab($event)>
    <omisell-tab [tabID]="1" title="{{ 'Staff' | translate}}">
        <ng-template omisell-tabcontent>
            <h1>Nội dung thứ nhất</h1>
        </ng-template>
    </omisell-tab>
    <omisell-tab [tabID]="2" title="{{ 'Pending Invitation' | translate}}">
        <ng-template omisell-tabcontent>
            <h1>Nội dung thứ hai</h1>
        </ng-template>
    </omisell-tab>
</omisell-tabset>

Dropdown

Hiển thị dropdown Các thành phần gồm:

1. omisellDropdown

   là directive đánh dấu container của dropdown. Bất kì event nào bubble từ bên trong sẽ trigger dropdown hiển thị ra

2. ng-template kết hợp với omisellDropdownTemplate

   dùng để đánh dấu template của dropdown đó.

3. omisellDropdownItem

   dùng để đánh dấu 1 item con của dropdown. Khi item con được click đồng thời dropdown cũng biến mất

<div class="btn-group mr-2 actions" omisellDropdown role="group">
    <button class="btn btn-primary">Button trigger dropdown</button>
    <ng-template omisellDropdownTemplate>
        <div class="omisell-dropdown-panel">
            <div class="omisell-dropdown-item" omisellDropdownItem (click)="action()">
                Action 1
            </div>
            <div class="omisell-dropdown-item" omisellDropdownItem (click)="otherAction()">
                Action 2
            </div>
        </div>
    </ng-template>
</div>

Confirm Modal

Hiển thị modal confirm

1. Import module ConfirmModalModule

2. Khai báo ConfirmModalService trong contructor của class và sử dụng

Property	Type	Meaning
isDanger	boolean	Hiển thị confirm theo kiểu danger hoặc success
title	string	Title của modal
textConfirm	string	Text button confirm
textCancel	string	Text button cancel
urlConfirm	string	Sử dụng url khi confirm. Trong trường hợp này sẽ không có event trả về như bình thường
content	TemplateRef or string	Nội dung modal

Đây là ví dụ modal confirm danger

    this._confirmModal.openModal({
      title: 'This is title',
      content: 'This content is under title'
    })
    .subscribe(() => {
      // Action confirm
    }, () => {
      // Action cancel
    })

InputSwitch

Hiển thị input switch. Hỗ trợ kết hợp với ReactiveForm và TemplateForm của Angular

Property	Type	Meaning
onChange	EventEmitter	It will fire event when value is changed

<omisell-switch [formControl]="control"></omisell-switch>