Button 按鈕

使用與 UOF X 內同款的按鈕元件。

Import 相依

import { UofxButtonModule } from '@uofx/web-components/button';

基礎使用方式

<uofx-button [mode]="'u-btn-primary'">
  <uofx-icon uofName="mi-add" uofSize="15"></uofx-icon>
  <span>Primary</span>
</uofx-button>

<uofx-button [mode]="'u-btn-second'">
  <uofx-icon uofName="mi-add" uofSize="15"></uofx-icon>
  <span>Second</span>
</uofx-button>

<uofx-button [mode]="'u-btn-third'">
  <uofx-icon uofName="mi-add" uofSize="15"></uofx-icon>
  <span>Third</span>
</uofx-button>

<uofx-button [mode]="'u-btn-negative'">
  <uofx-icon uofName="mi-add" uofSize="15"></uofx-icon>
  <span>Negative</span>
</uofx-button>

<uofx-button [mode]="'u-btn-cancel'">
  <uofx-icon uofName="mi-add" uofSize="15"></uofx-icon>
  <span>Cancel</span>
</uofx-button>

<uofx-button [mode]="'u-btn-upload'">
  <uofx-icon uofName="mi-add" uofSize="15"></uofx-icon>
  <span>Upload</span>
</uofx-button>

<uofx-button [mode]="'u-btn-empty'">
  <uofx-icon uofName="mi-add" uofSize="15"></uofx-icon>
  <span>Text</span>
</uofx-button>

<uofx-button [mode]="'u-btn-empty'" [underline]="true">
  <span>underline</span>
</uofx-button>

Outline

將 uofx-button 屬性 outlined 為 true。

<uofx-button [mode]="'u-btn-primary'" [outlined]="true">
  <uofx-icon uofName="mi-add" uofSize="15"></uofx-icon>
  <span>Outlined</span>
</uofx-button>

<uofx-button [mode]="'u-btn-third'" [outlined]="true">
  <uofx-icon uofName="u-selector" uofColor="gb-500" uofSize="20"></uofx-icon>
</uofx-button>

<uofx-button [mode]="'u-btn-third'" [outlined]="true">
  <uofx-icon uofName="mi-add" uofColor="gb-500" uofSize="20"></uofx-icon>
</uofx-button>

Loading

可以透過設定 uofx-button 屬性 loading 為 true 來讓按鈕顯示轉圈載入中的樣式。

<uofx-button 
    [mode]="'u-btn-primary'" 
    [loading]="loading" 
    (click)="onLoadClick()">
  <span>Loading</span>
</uofx-button>

import { Component } from '@angular/core';

@Component({
    selector: 'button-loading-demo',
    templateUrl: './button-loading-demo.html'
})
export class ButtonLoadingDemo {
  loading = false;

  onLoadClick() {
    this.loading = true;

      setTimeout(() => {
        this.loading = false
      }, 2000);
  }
}

Size

預設為上圖右方標準尺寸，若需要較小的按鈕，將 uofx-button 屬性 smallSize 設定為 true。

<uofx-button [mode]="'u-btn-second'" [smallSize]="true">
  <span>Small</span>
</uofx-button>
<uofx-button [mode]="'u-btn-second'">
  <span>Normal</span>
</uofx-button>

Disabled

將 uofx-button 的 disabled 屬性設定成 true 就能變成禁用狀態，且游標會顯示禁止符號。

<uofx-button [disabled]="true">
  <uofx-icon uofName="mi-add" uofSize="15" uofColor="or-600"></uofx-icon>
  <span>disabled</span>
</uofx-button>

Round

純 Icon 圓形按鈕。

<uofx-rounded-button 
    [iconName]="'mi-more-horiz'"
    [iconColor]="'gb-500'" 
    [iconSize]="20">
</uofx-rounded-button>