# StickyButton 粘滞按钮
# 介绍
调色板按钮。
# 引入
"usingComponents": {
"m-sticky-button": "mind-ui-weapp/sticky-button/index"
}
# 示例
# 基础用法
<m-sticky-button direction="rt">
<m-sticky-button-item icon="boy" />
<m-sticky-button-item icon="love" />
<m-sticky-button-item icon="girl" />
</m-sticky-button>
# 自定义配置
<m-sticky-button direction="t" offset=".314" radius="180" bgcolor="#67c23a" sub-bgcolor="#f56c6c">
<m-sticky-button-item icon="boy" />
<m-sticky-button-item icon="love" />
<m-sticky-button-item icon="girl" bgcolor="#e54d42" />
<m-sticky-button-item icon="star-fill " />
<m-sticky-button-item icon="like-fill" />
</m-sticky-button>
# Group Properties
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
custom-class | 自定义样式类名 | string | — | — |
icon | 主按钮图标 | String | — | plus |
icon-size | 按钮图标大小 | Number | — | 48 |
icon-color | 按钮图标颜色 | String | — | #FFF |
offset | 角度偏移量 | Number | — | Math.PI / 4 |
direction | 按钮展开方向 | String | lt t rt r rb b lb l | lt |
radius | 按钮展开半径(rpx) | Number | — | 200 |
bgcolor | 按钮背景色 | String | — | primary |
sub-icon-size | 子按钮图标大小 | Number | — | 48 |
sub-icon-color | 子按钮图标颜色 | String | — | #FFF |
sub-bgcolor | 子按钮背景色 | String | — | primary |
# Group Events
方法名称 | 说明 | 返回值 |
---|---|---|
bind:toggle | 按钮状态变化时回调 | event.detail :按钮变化后的状态 |
# Group Slot
名称 | 说明 |
---|---|
— | 子按钮 |
# Item Properties
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
custom-class | 自定义样式类名 | string | — | — |
icon | 按钮图标 | String | — | — |
icon-size | 按钮图标大小 | Number | — | 48 |
icon-color | 按钮图标颜色 | String | — | #FFF |
bgcolor | 按钮背景色 | String | — | primary |
源码实现中,参考了 mint-ui (opens new window)