0.1.1 • Published 6 years ago
ngx-float-ball v0.1.1
ngx-float-ball
这是一个Angular的悬浮球控件。
- 支持触摸滑动
- 支持鼠标拖动
- 支持图标
效果展示
参数说明
| Parameter | Type | Default Value | Description |
|---|---|---|---|
| clicked | signal | N/A | 鼠标点击事件 |
| outerCircleDiameter | number | 60 | 外圆的直径 |
| innerCircleDiameter | number | 30 | 内圆的直径 |
| delayTime | 400 | number | 鼠标移动延迟响应时间 |
| isBlinked | boolean | true | 是否闪烁悬浮球 |
| hasRipple | boolean | true | 是否有点击波纹效果 |
| foreground | string | #ffffff | 前景色,默认为白色 |
| background | string | #F44336 | 前景色,默认为红色 |
| icon | string | null | 图标路径 |
| iconDiameter | number | 30 | 图标的直径 |
| initPos | number[] | 200, 200 | 悬浮球的初始化位置 |
| touchOffset | number | 15 | 触摸移动误差15px |
| openInertia | boolean | true | 开启弹性双边吸附功能 |
安装
npm install ngx-float-ball --save使用
- 在app.module.ts内导入：
import { NgxFloatBallModule } from 'ngx-float-ball'- 在html内使用
<ngx-float-ball [isBlinked]="true"
[hasRipple]="false"
[icon]="'../assets/face.svg'">
</ngx-float-ball>
- 弹力吸附功能
<ngx-float-ball [openInertia]="true">
</ngx-float-ball>
TODO
- 增加背景色和前景色属性
- 增加图标支持
- 优化渲染
- 增加tap,点击,双击,长按
- 触摸到窗口外边界, 造成悬浮球不见防呆
- 鼠标点击后动画消失，背景色更改至设定背景色
- 增加自定义嵌入元素
- 增加弹力吸附
- 修复鼠标单击后快速移动到某一位置，达到延迟时间后，松开鼠标，悬浮球快速移动过去
- 修复悬浮球未移动浏览器F12后，位置更换到0,0的错误
- 增加悬浮球scss样式重载
License
- MIT