# HarmonyToast

**Repository Path**: abnercode/harmony-toast

## Basic Information

- **Project Name**: HarmonyToast
- **Description**: 鸿蒙端toast提示
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-13
- **Last Updated**: 2025-03-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HarmonyOSToast

toast是一个可任意位置弹出的提示框，支持自定义圆角等样式，支持上下左右icon设置，支持自定义组件形式。

## 动态效果

<p align="center">
<img src="https://vipandroid-image.oss-cn-beijing.aliyuncs.com/harmony/toast/toast.gif" width="200px" />
</p>

## 主要特点

1、支持自定义样式，比如圆角，颜色，背景，位置，时间等。
2、支持上下左右icon设置，可以实现类似成功，loading，失败等提示。
3、支持自定义组件形式，可传递自己的组件进行弹出提示。

## 开发环境

DevEco Studio NEXT Developer Beta1,Build Version: 5.0.7.200

Api版本：**12**

modelVersion：5.0.0

## 快速使用

远程依赖方式使用【推荐】

方式一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

**建议：在使用的模块路径下进行执行命令。**

```
ohpm install @abner/toast
```

方式二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：

```
"dependencies": { "@abner/toast": "^1.0.0"}
```

## 代码案例

### 初始化

用来统一配置toast的样式，比如背景，圆角，字体颜色，大小等，如果默认样式已经满足，可不初始化，建议在AbilityStage里进行初始化。

```typescript
  toastInit({ toastAttribute: { backgroundColor: Color.Black, fontColor: Color.White } })
```

### 普通提示

```typescript
toast("普通提示")
```

### 更改背景

```typescript
  toast("更改背景", { backgroundColor: Color.Red, fontColor: Color.White })
```

### 更改圆角度数

```typescript
 toast("更改圆角度数", { borderRadius: 5 })
```

### 更改文字大小

```typescript
toast("更改文字大小", { fontSize: 20 })
```

### 居中位置

```typescript
  toast("居中位置", { alignment: ToastAlignment.Center })
```

### 居上位置

```typescript
  toast("居上位置", { alignment: ToastAlignment.Top })
```

### 居下位置

```typescript
  toast("居下位置", { alignment: ToastAlignment.Bottom })
```

### 任意位置

```typescript
 toast("任意位置", { offsetX: 20, offsetY: 20 })
```

### 上面Icon

```typescript
toast("上面Icon", {
  topIcon: $r("app.media.app_icon"),
  borderRadius: 10,
  padding: {
    left: 40,
    right: 40,
    bottom: 10
  }
})
```

### 下面Icon

```typescript
toast("下面Icon", {
  bottomIcon: $r("app.media.app_icon"),
  borderRadius: 10,
  padding: {
    left: 40,
    right: 40,
    top: 10
  }
})
```

### 左面Icon

```typescript
toast("左面Icon", {
  leftIcon: $r("app.media.app_icon"),
  borderRadius: 10,
  padding: {
    right: 40,
    left: 40,
    top: 20,
    bottom: 20
  }
})
```

### 右面Icon

```typescript
toast("右面Icon", {
  rightIcon: $r("app.media.app_icon"),
  borderRadius: 10,
  padding: {
    right: 40,
    left: 40,
    top: 20,
    bottom: 20
  }
})
```

### 左右Icon

```typescript
 toast("左右Icon", {
  leftIcon: $r("app.media.app_icon"),
  rightIcon: $r("app.media.app_icon"),
  borderRadius: 10,
  padding: {
    right: 40,
    left: 40,
    top: 20,
    bottom: 20
  }
})
```

### 自定义视图

```typescript
  toast("自定义视图", {
  backgroundColor: Color.Transparent,
  padding: 0,
  view: wrapBuilder(ToastView)
})
```

## 属性介绍

### ToastConfig属性

| 属性               | 类型             | 概述                  |
|------------------|----------------|---------------------|
| isUserMainWindow | boolean        | 是使用主window还是子window |
| toastAttribute   | ToastAttribute | toast配置属性           |

### ToastAttribute属性

| 属性               | 类型                                              | 概述       |
|------------------|-------------------------------------------------|----------|
| msg              | string/Resource                                 | 弹出内容     |
| duration         | number                                          | 弹出时间     |
| autoCancel       | boolean                                         | 点击外部是否隐藏 |
| alignment        | ToastAlignment                                  | 弹出位置     |
| fontSize         | number / string/ Resource                       | 字体大小     |
| textAlign        | TextAlign                                       | 字体的居中方式  |
| fontColor        | ResourceColor                                   | 字体颜色     |
| backgroundColor  | ResourceColor                                   | 背景颜色     |
| padding          | Padding/Length/ LocalizedPadding                | 内边距      |
| borderRadius     | Length /BorderRadiuses /LocalizedBorderRadiuses | 圆角度数     |
| shadow           | ShadowOptions / ShadowStyle                     | 阴影       |
| marginLeft       | Length                                          | 距离左边     |
| marginRight      | Length                                          | 距离右边     |
| offsetX          | Length                                          | x坐标      |
| offsetY          | Length                                          | y坐标      |
| leftIcon         | PixelMap / ResourceStr / DrawableDescriptor     | 左边icon   |
| topIcon          | PixelMap / ResourceStr / DrawableDescriptor     | 上边icon   |
| rightIcon        | PixelMap / ResourceStr / DrawableDescriptor     | 右边icon   |
| bottomIcon       | PixelMap / ResourceStr / DrawableDescriptor     | 下边icon   |
| iconWidth        | Length                                          | icon宽度   |
| iconHeight       | Length                                          | icon高度   |
| iconMarginTop    | Length                                          | icon距离顶部 |
| iconMarginBottom | Length                                          | icon距离底部 |
| iconMarginLeft   | Length                                          | icon距离左边 |
| iconMarginRight  | Length                                          | icon距离右边 |
| view             | WrappedBuilder\<Object[]\>                      | 自定义组件    |

## License

```
Copyright (C) AbnerMing, HarmonyOSToast Open Source Project

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```