小程序按钮样式
小程序的按钮样式可以通过在<button>
标签中设置相关属性来实现。以下是一些常用的样式属性:
type
: 按钮类型,可选值有default
(默认)、primary
(主要)、success
(成功)、warning
(警告)和danger
(危险)。
<button type="primary">主要按钮</button>
<button type="success">成功按钮</button>
<button type="warning">警告按钮</button>
<button type="danger">危险按钮</button>
size
: 按钮大小,可选值有small
(小号)、default
(默认)和large
(大号)。
<button size="small">小号按钮</button>
<button size="default">默认大小按钮</button>
<button size="large">大号按钮</button>
plain
: 是否为纯平按钮,值为true
时为纯平按钮,值为false
时为普通按钮。
<button plain>纯平按钮</button>
<button>普通按钮</button>
disabled
: 是否禁用按钮,值为true
时按钮不可点击,值为false
时按钮可点击。
<button disabled>禁用按钮</button>
<button>正常按钮</button>
loading
: 是否显示加载状态,值为true
时显示加载状态,值为false
时不显示。
<button loading>加载中</button>
<button>正常按钮</button>
form-type
: 表单按钮的类型,可选值有submit
(提交表单)和reset
(重置表单)。
<button form-type="submit">提交表单</button>
<button form-type="reset">重置表单</button>
hover-class
: 按钮悬停时的样式类名,可用于自定义悬停效果。
<button hover-class="custom-hover-class">自定义悬停效果</button>
open-type
: 按钮打开应用或跳转到其他页面的方式,可选值有navigate
(跳转到页面)、redirect
(重定向到页面)、switchTab
(切换到其他标签页)、reLaunch
(重启应用)和share
(分享)。
<button open-type="navigate">跳转到页面</button>
<button open-type="redirect">重定向到页面</button>
<button open-type="switchTab">切换到其他标签页</button>
<button open-type="reLaunch">重启应用</button>
<button open-type="share">分享</button>
通过组合这些属性,你可以创建出各种样式的微信小程序按钮。