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

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

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>