# HoverButton

**Repository Path**: chengsirs/hover-button

## Basic Information

- **Project Name**: HoverButton
- **Description**: OpenHarmony 自定义悬浮按钮组件
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-09-10
- **Last Updated**: 2023-12-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HoverButton

#### 介绍
OpenHarmony 自定义悬浮按钮组件

本项目基于OpenHarmony下的JavaScript UI框架，实现一个自定义的HoverButton组件。

### 项目介绍
- 项目名称：HoverButton
- 项目源地址：https://gitee.com/chengsirs/hover-button
- 所属系列：OpenHarmony下的的JS 自定义组件开发
- 开发版本：OpenHarmony-SDK，DevEco Studio 2.2.0.200
- 项目作者和维护人：小磊子


### 使用说明
悬浮按钮组件所在文件夹为 js/default/common 中的 hoverButton

#### 使用示例
1.  下载HoverButton项目，启动DevEco Studio并打开工程;
2.  进入entry->src->main->js->default->pages->index，打开index.hml


#### 效果演示
![输入图片说明](https://images.gitee.com/uploads/images/2021/0910/140136_1d945f59_8996537.gif "1.gif")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0910/140156_fbcf30aa_8996537.gif "4.gif")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0910/140320_3c4d86cf_8996537.gif "3.gif")
![输入图片说明](https://images.gitee.com/uploads/images/2021/0910/153416_95260e0c_8996537.gif "6.gif")

## 引入
在index.hml的第一行，引用自定义组件，这里我们将name属性设置为hoverButton。

```
<element name="hoverButton"  src="../../common/hoverButton/hoverButton.hml"></element>

```

## 基础用法

```
<hoverbutton auto-close="{{ autoClose }}" default-show="{{ defaultShow }}" horizontal="right" vertical="bottom" direction="vertical"
                 pattern="{{pattern}}" content="{{contentArr}}" @item-click="menu_Item_Click" @circle-click="circle_Click" ></hoverbutton>

```

## API

### props

|  属性名称	|    类型	| 默认值		        | 描述	                                                                              |
|---------------|---------------|-----------------------|-------------------------------------------------------------------------------|
| content	| Array		| -			| 展开内容配置项                                                                 |
| pattern	| Object	| -			| 可选样式配置项	                                                                |
| horizontal    | String	| right		        | 水平对齐方式。`left`:左对齐，`right`：右对齐					|
| vertical	| String	| bottom		| 垂直对齐方式。`bottom`:下对齐，`top`：上对齐					|
| direction	| String	| vertical	        | 展开内容项显示方式。`horizontal`:水平显示，`vertical`：垂直显示	                |
| autoClose	| Boolean	| false			| 点击内容项是否关闭内容	                                                        |
| defaultShow	| Boolean	| false			| 内容项默认是否展开								|		 										

### pattern
| 参数名称     | 类型	| 默认值		| 描述		   |
|-------------|---------|---------------|------------------|
| textColor   | String  | #3c3e49	| 内容文字颜色      |
| buttonColor | String  | #3c3e49	| 圆形悬浮按钮颜色  |
| backgroundColor | String  | #ffffff	| 内容背景颜色      |
| selectedColor | String  | #ffffff	| 内容项选中文字颜色 |


### content
| 参数名称     | 类型	| 默认值		| 描述		         |
|-------------|---------|---------------|------------------------|
| text        | String  |  -  	        | 内容文字                |
| active      | Boolean | false  	| 当前是否选中            |
| iconPath    | String  | -      	| 内容图片相对路径         |
| selectedIconPath | String  |-   	| 内容项选中时图片相对路径  |


### events
| 方法名称     | 参数   | 描述               |
|-------------|--------|-------------------|
| @item-click | {index,content}| 内容项点击事件,返回当前选中项目序号和对象      |
| @circle-click | null         | 悬浮按钮点击事件 |