按鈕 - Buttons

1
2
3
4
5
<button class="btn btn-primary">主要</button>
<button class="btn btn-secondary">次要</button>
<button class="btn btn-warn">警告</button>
<button class="btn btn-danger">危險</button>
<a class="btn btn-link" tabindex="0">超連結</a>

1
2
3
4
5
<button class="btn btn-primary hover">主要</button>
<button class="btn btn-secondary hover">次要</button>
<button class="btn btn-warn hover">警告</button>
<button class="btn btn-danger hover">危險</button>
<a class="btn btn-link hover" tabindex="0">超連結</a>

1
2
3
4
5
<button class="btn btn-primary active">主要</button>
<button class="btn btn-secondary active">次要</button>
<button class="btn btn-warn active">警告</button>
<button class="btn btn-danger active">危險</button>
<a class="btn btn-link active" tabindex="0">超連結</a>

1
2
3
4
5
<button class="btn btn-primary" disabled>主要</button>
<button class="btn btn-secondary" disabled>次要</button>
<button class="btn btn-warn" disabled>警告</button>
<button class="btn btn-danger" disabled>危險</button>
<a class="btn btn-link disabled" tabindex="0">超連結</a>

1
2
3
4
5
6
7
8
9
10
11
12
<div class="row">
  <button class="btn btn-primary btn-lg">大按鈕</button>
  <button class="btn btn-secondary btn-lg">大按鈕</button>
</div>
<div class="row">
  <button class="btn btn-primary">中按鈕</button>
  <button class="btn btn-secondary">中按鈕</button>
</div>
<div class="row">
  <button class="btn btn-primary btn-sm">小按鈕</button>
  <button class="btn btn-secondary btn-sm">小按鈕</button>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<button class="btn btn-icon ripple">
  <i class="icon icon-plus"></i>
</button>

<button class="btn btn-sm btn-warn">
  <i class="icon icon-exclamation-triangle"></i>
  單項折讓
</button>

<button class="btn btn-warn">
  <i class="icon icon-exclamation-triangle"></i>
  單項折讓
</button>

<button class="btn btn-lg btn-warn">
  <i class="icon icon-exclamation-triangle"></i>
  單項折讓
</button>

<button class="btn  btn-sm btn-danger">
  <i class="icon icon-exclamation-triangle"></i>
  發票全額折讓
</button>

<button class="btn btn-danger">
  <i class="icon icon-exclamation-triangle"></i>
  發票全額折讓
</button>

<button class="btn btn-lg btn-danger">
  <i class="icon icon-exclamation-triangle"></i>
  發票全額折讓
</button>

<button class="btn btn-sm btn-fb">
  <i class="icon icon-fb"></i>
  透過 Facebook 登入
</button>

<button class="btn btn-fb">
  <i class="icon icon-fb"></i>
  透過 Facebook 登入
</button>

<button class="btn btn-lg btn-fb">
  <i class="icon icon-fb"></i>
  透過 Facebook 登入
</button>

<button class="btn btn-sm btn-line">
  <i class="icon icon-line"></i>
  透過 Line 登入
</button>

<button class="btn btn-line">
  <i class="icon icon-line"></i>
  透過 Line 登入
</button>

<button class="btn btn-lg btn-line">
  <i class="icon icon-line"></i>
  透過 Line 登入
</button>

1
2
3
4
<div class="btn btn-primary btn-file">
  <span>點此選擇檔案</span>
  <input type="file" />
</div>

1
2
3
4
5
<div class="row">
  <button class="btn btn-primary btn-lg" data-btn>點我顯示讀取狀態</button>
  <button class="btn btn-primary" data-btn>點我顯示讀取狀態</button>
  <button class="btn btn-primary btn-sm" data-btn>點我顯示讀取狀態</button>
</div>

1
2
3
4
5
6
7
8
9
const { Btn } = window.beyond
const btns = Array.from(document.querySelectorAll('[data-btn]'))
  .map(dom => new Btn(dom))

btns.forEach(btn => {
  btn.addEvent(btn.dom, 'click', () => {
    btn.setLoading(! btn.loading)
  })
})