button

基礎(chǔ)庫(kù) 1.0.0 開始支持本組件。

參數(shù)說明

size 取值范圍

type 取值范圍

form-type 取值范圍

open-type 有效值

效果示例

代碼示例

<button type="primary">頁(yè)面主操作 Normal</button>
<button type="primary" loading="true">頁(yè)面主操作 Loading</button>
<button type="primary" disabled="true">頁(yè)面主操作 Disabled</button>

<button type="default">頁(yè)面次要操作 Normal</button>
<button type="default" loading="true">頁(yè)面次要操作 Loading</button>
<button type="default" disabled="true">頁(yè)面次要操作 Disabled</button>

<view class="mini-buttons">
  <button class="mini-btn" type="primary" size="mini">按鈕</button>
  <button class="mini-btn" type="default" size="mini">按鈕</button>
</view>

.my-button {
  border-radius: 20px;
}
.my-button:after {
  border-color: #f00;
  border-radius: 40px; /* 需要設(shè)置為按鈕圓角的兩倍 */
}

.my-button-2 {
  border: 1px solid;
}
.my-button-2:after {
  display: none;
}

Bug & Tip

• Tip：目前，<button> 組件的邊框不是通過 border 屬性來控制的，而是有個(gè) :after 偽類，所以如果需要修改邊框樣式，請(qǐng)對(duì)改偽類元素設(shè)置樣式。

<button class="my-button">邊框修改</button>
<button class="my-button-2">取消默認(rèn)邊框</button>

• Tip: button-hover 的樣式為為 { background-color: rgba(0, 0, 0, 0.1); opacity: 0.7; }