Skip to content

docs(snackbar): simplify progress documentation #2032

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
haoziqaq merged 1 commit into from
Oct 25, 2026
Merged

docs(snackbar): simplify progress documentation #2032

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 4 additions & 7 deletions packages/varlet-ui/src/snackbar/docs/en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,7 @@ const show = ref(false)

### Timeout Progress

Set `progress` to display a bar indicating the time remaining before automatic dismissal. The bar is shown only when the type is not `loading` and the current timeout is a finite number greater than `0`. A `duration` of `0` still dismisses the snackbar immediately.
The progress restarts when the snackbar reopens. Toggling `progress` while it is visible does not reset the dismissal timer.
Switching to `loading` cancels and clears the countdown. Switching from `loading` to a regular type while visible starts a fresh dismissal timer and progress using the current `duration`.
Set `progress` to display the countdown before automatic dismissal. The progress bar is not shown for the `loading` type.

```html
<script setup>
Expand Down Expand Up @@ -185,8 +183,7 @@ function createSnackbar() {

### Timeout Progress

Function calls also support the `progress` option. Use `Snackbar.setDefaultOptions({ progress: true })` to enable it by default.
In the default singleton mode, calling `Snackbar` again restarts the progress for the new message.
Function calls also support the `progress` option.

```html
<script setup>
Expand Down Expand Up @@ -351,7 +348,7 @@ function openMultiple() {
| `type`| `Snackbar` type, Optional value is one of `success, warning, info, error, loading` | _string_ | `-` |
| `position`| `Snackbar` position, Optional value is one of `top, center, bottom` | _string_ | `top` |
| `duration`| Display duration | _number_ | `3000` |
| `progress` | Whether to show timeout progress; requires a non-loading type and a finite positive timeout | _boolean_ | `false` |
| `progress` ***3.20.8*** | Whether to show timeout progress | _boolean_ | `false` |
| `elevation` ***3.3.0*** | Elevation level, options `true` `false` and level of `0-24` | _string \| number \| boolean_| `true` |
| `content` | Custom content | _string_ | `-` |
| `content-class` | Class of custom content | _string_ | `-` |
Expand Down Expand Up @@ -407,7 +404,7 @@ The `clear` method on the instance can close the current instance, and the `clea
| `type` | `Snackbar` type, Optional value is one of `success, warning, info, error, loading` | _string_ | `-` |
| `position` | `Snackbar` position, Optional value is one of `top, center, bottom` | _string_ | `top` |
| `duration` | Display duration (Need to be closed manually when the `type` prop is `loading`) | _number_ | `3000` |
| `progress` | Whether to show timeout progress; requires a non-loading type and a finite positive timeout | _boolean_ | `false` |
| `progress` ***3.20.8*** | Whether to show timeout progress | _boolean_ | `false` |
| `elevation` ***3.3.0*** | Elevation level, options `true` `false` and level of `0-24` | _string \| number \| boolean_| `true` |
| `content` | Custom content | _string \| VNode \| (() => VNode)_ | `-` |
| `icon` | Custom icon | _string \| VNode \| (() => VNode)_ | `-` |
Expand Down
11 changes: 4 additions & 7 deletions packages/varlet-ui/src/snackbar/docs/zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,7 @@ const show = ref(false)

### 自动关闭进度

设置 `progress` 显示进度条，表示距离自动关闭的剩余时长。进度条仅在类型不是 `loading`，且本次自动关闭时长为大于 `0` 的有限数值时显示。`duration` 为 `0` 时仍会立即关闭消息条。
重新打开消息条时，进度重新开始；显示期间切换 `progress` 不会重置关闭计时。
切换为 `loading` 类型时会取消并清空倒计时；显示期间从 `loading` 切换为普通类型时，会按当前 `duration` 重新开始关闭计时和进度。
设置 `progress` 显示消息条自动关闭的倒计时进度。`loading` 类型不显示进度条。

```html
<script setup>
Expand Down Expand Up @@ -183,8 +181,7 @@ function createSnackbar() {

### 自动关闭进度

函数调用同样支持 `progress` 选项，也可以通过 `Snackbar.setDefaultOptions({ progress: true })` 默认启用。
在默认单例模式下，再次调用 `Snackbar` 时，进度会随新消息重新开始。
函数调用同样支持 `progress` 选项。

```html
<script setup>
Expand Down Expand Up @@ -349,7 +346,7 @@ function openMultiple() {
| `type` | `Snackbar` 类型，可选值为 `success warning info error loading` | _string_ | `-` |
| `position` | `Snackbar` 位置，可选值为 `top center bottom` | _string_ | `top` |
| `duration` | 显示时长 | _number_ | `3000` |
| `progress` | 是否显示自动关闭进度条，仅在非 `loading` 类型且自动关闭时长为有限正数时生效 | _boolean_ | `false` |
| `progress` ***3.20.8*** | 是否显示自动关闭进度条 | _boolean_ | `false` |
| `elevation` ***3.3.0*** | 海拔高度，可选值为 `true` `false` 和 `0-24` 的等级 | _string \| number \| boolean_| `true` |
| `content` | 自定义内容 | _string_ | `-` |
| `content-class` | 自定义内容的类名 | _string_ | `-` |
Expand Down Expand Up @@ -405,7 +402,7 @@ function openMultiple() {
| `type` | `Snackbar` 类型，可选值为 `success warning info error loading` | _string_ | `-` |
| `position` | `Snackbar` 位置，可选值为 `top center bottom` | _string_ | `top` |
| `duration` | 显示时长(当 `type` 属性为 `loading` 时，需要手动关闭) | _number_ | `3000` |
| `progress` | 是否显示自动关闭进度条，仅在非 `loading` 类型且自动关闭时长为有限正数时生效 | _boolean_ | `false` |
| `progress` ***3.20.8*** | 是否显示自动关闭进度条 | _boolean_ | `false` |
| `elevation` ***3.3.0*** | 海拔高度，可选值为 `true` `false` 和 `0-24` 的等级 | _string \| number \| boolean_| `true` |
| `content` | 自定义内容 | _string \| VNode \| (() => VNode)_ | `-` |
| `icon` | 自定义图标 | _string \| VNode \| (() => VNode)_ | `-` |
Expand Down
Loading