@boxmeglobal/omisell-ui-lib v0.0.15

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 or string	Id của tab. Là giá trị định danh duy nhất
   tabIdDefault	number or string	Id của tab mặc định. Nếu không chọn thì sẽ tự động chọn tab đầu tiên
   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)" tabIdDefault="staff">
    <omisell-tab [tabID]="1" title="staff">
        <ng-template omisell-tabcontent>
            <h1>Nội dung thứ nhất</h1>
        </ng-template>
    </omisell-tab>
    <omisell-tab [tabID]="2" title="19001010">
        <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

Đâ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

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

Input Radio

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

<omisell-radio-group [formControl]="radioInput">
    <omisell-radio-input value="fire" name="Fire"></omisell-radio-input>
    <omisell-radio-input value="earth" name="Earth"></omisell-radio-input>
    <omisell-radio-input value="water" name="Water"></omisell-radio-input>
</omisell-radio-group>