# 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)