字節(jié)跳動小程序開發(fā)組件文檔 button

按鈕。

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

size取值范圍：

type取值范圍:

form-type取值范圍：

open-type有效值：

示例

開發(fā)者工具中預(yù)覽

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

<button type="default">頁面次要操作 Normal</button>
<button type="default" loading="true">頁面次要操作 Loading</button>
<button type="default" disabled="true">頁面次要操作 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>

溫馨提示

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

<button class="my-button">邊框修改</button>
<button class="my-button-2">取消默認邊框</button>

.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;
}