Navbar 导航栏

用于不同页面之间切换或者跳转,位于内容区的上方,系统状态栏的下方。

构成

Title

Title

1

2

4

3

1: 左侧功能按钮

可选,最多2个按钮,一般为返回、关闭或文字按钮

2: 容器

容器根据页面背景色设置样式,支持业务自定义

3: 标题

可选,可居中或居左,文案不超过1行,可有副标题、后缀文案、前后缀icon、后缀Tag

4: 右侧功能按钮

可选,最多3个按钮,其中包括文字按钮,超过3个建议用···收起

变体/类型

使用场景

Title

9:41

需要在页面间跳转、返回,或需要承载页面级辅助功能时使用

标注

标注说明:

标题 18 Bold,副标题、后缀文案 12Medium

左右侧功能icon、币对图标、前缀图标 24*24px,下拉菜单箭头icon 12*12px,左右功能入口点击热区44*44px

标题内容距离左右功能入口最小间距12px

多语言适配

Join MEXC Hot Crypto Chal…

Join MEXC Hot Crypto …

Join MEXC Hot Crypto Challeng...

9:41

优先精简文案,超长省略

一般居中,且同一业务场景内保持导航栏样式一致,非常规场景,如K线详情展示币种名称时,部分币种名称超长的场景,使用居中无法展示较长的币种名称,此时可用居左导航栏,或英文文案已经很长的情况,则可使用居左

RTL

Title

Title

LTR

عنوان

عنوان

RTL

用法

Join MEXC Hot Crypto …

正确

Join MEXC H...

错误

当文案很长,且入口较多时,建议使用居左布局

Join MEXC

正确

Join MEXC

错误

返回和关闭在一般场景内尽量只出现一个,尽量避免同时使用的场景

DESIGN

中文