Snackbar 底部提示

Snackbar是一种兼容提示与操作的消息控件

figma 组件

何时使用

此控件与Toast比较相似，都通常用于低干扰度的消息提示，该消息可被忽略且不会打断用户当前的操作。但相对Toast而言，Snackbar的优势在于可读性更强，还可以兼容操作，适用场景会更加广泛

使用原则

需展示多个Snackbars时，每次仅能显示1个，之后的Snackbar应在前一个消失后再显示

显示时不会打断用户操作，在以下情况下会消失：

页面变更时立即消失

用户不进行任何操作，持续3～10秒后自动消失（时长可自定义）

用户点击Snackbar上的操作按钮，触发操作的同时消失

样式

snackbar 基础样式及带有行动点和关闭的样式

Default

Action

带操作按钮

Default

带关闭按钮

尺寸

Default

Action

343px

14px

16px

48px

换行规则

当文案过长时允许折行展示，换行时固定距离底部的间距，向上自适应

文案最多展示2行，多语言需审核

Default Default Default Default Default Default Default Default Default Default

Action

带操作按钮换行

Default Default Default Default Default Default Default Default Default Default

带关闭按钮换行

显示位置

snackbar显示在页面底部，不能遮挡底部主按钮

使用场景

根据用户的操作，给出相应的结果反馈提示，可以仅文本提示，也可以带相应的操作按钮

不要使用与操作结果或进程无关的文案描述

Favorites

Spot

ETF

Futures

Margin

Search Coin Pairs

Spot

Futures

You have not added any coins

Start adding to Favorites

Add Tokens Chosen Above

+12.00%

-12.00%

934.32

BTC3L

/USDT

/ETF

Add To Favorites

Markets

Trade

Futures

Wallets

Home

9:41

Favorites

Spot

ETF

Futures

Margin

Search Coin Pairs

+1212.00%

0.000051

￡3,281.98

Safemoon

/USDT

Vol

74,563,456.88

-12.00%

9,3134.32

￡3,921

BTC

/USDT

Vol

74,563,456.88

+12.00%

0.04821

￡0.81

RACA

/USDT

Vol

74,563,456.88

+12.00%

3,934.32

￡3,921

BTC

/USDT

Vol

74,563,456.88

+12.00%

2,934.32

￡3,921

ETH

/USDT

Vol

74,563,456.88

+12.00%

1,934.32

￡3,921

SHIB

/USDT

Vol

74,563,456.88

Name

/ Vol

Change

Last Price

Spot

Futures

Add To Favorites

Markets

Trade

Futures

Wallets

Home

Added to Favorites

Edit Group

9:41

点击添加按钮

弹出对应Snackbar提示

To Designer

组件用法

选择组件最外层，可切换状态、是否带关闭图标或操作按钮

底部提示, 消息条, 提示条

DESIGN

产品设计

品牌设计

技能库

Select Language

中文

Snackbar 底部提示

何时使用

使用原则

样式

尺寸

换行规则

显示位置

使用场景

推荐/慎用示例

To Designer