Mind UI Vue

# StickyButton 粘滞按钮

# 介绍

调色板按钮。

# 引入

import { StickyButton, StickyButtonItem } from 'mind-ui-vue';
Vue.use(StickyButton);
Vue.use(StickyButtonItem);

# 示例

# 基础用法

可以通过 direction 设置不同的位置，可选值为 lt t rt r rb b lb l 8 种，默认为 lt。

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

# Api

# StickyButton Props

参数 说明 类型 可选值 默认值
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 按钮展开半径，单位 px Number — 200
bgcolor 按钮背景色 String — primary
sub-icon-size 子按钮图标大小 Number — 48
sub-icon-color 子按钮图标颜色 String — #FFF
sub-bgcolor 子按钮背景色 String — primary

# StickyButton Events

方法名称 说明 返回值
toggle 按钮状态变化时回调 event.detail:按钮变化后的状态

# StickyButton Slot

名称 说明
— 子按钮

# StickyButtonItem Props

参数 说明 类型 可选值 默认值
icon 按钮图标 String — —
icon-size 按钮图标大小 Number — 48
icon-color 按钮图标颜色 String — #FFF
bgcolor 按钮背景色 String — primary

源码实现中，参考了 mint-ui (opens new window)

← Slider 滑动块 →