弹窗 Dialog

概述

当应用中需要比较明显的对用户当前的操作行为进行警示或提醒时，可以使用弹窗控件。用户需要针对弹窗进行操作后方可结束弹窗。

类型

纯文本弹窗

image.png

带图片弹窗

image.png

其他弹窗

image.png

升级弹窗

image.png

用法

按钮样式规则：弹窗的操作按钮区域可以通过业务需求自定义按钮组合，一般常用的有单按钮、双按钮、三按钮这几种类型。弹窗按钮类型：

image.png

按钮推荐：按钮如果有明确的推荐，则会将推荐按钮的字体进行加粗处理。双按钮一般将推荐按钮放置在右侧，三按钮一般将推荐按钮放置在第一个。当业务强烈推荐某一个按钮时，其他按钮可以做弱化处理（如果需要强引导推荐按钮则建议其他按钮灰色处理，如果是弱引导推荐按钮则其他按钮蓝色处理）。

双按钮：当按钮文字过长时，使用上下双按钮样式，缺省使用左右按钮。

内容样式规则：标题-一句话说明弹框的核心内容；辅助说明-文字建议不超过两行，能够简洁的说明当前状态，并提示用户解决方案。

类型细节说明

输入型弹窗

image.png

场景描述：当提示用户接受提示时需要进行内容输入则选择输入型弹窗，如果用户需要输入的类型为名字时采用名字弹窗

授权弹窗

image.png

场景描述：当业务线需要进行服务授权时直接调用服务授权弹窗，允许替换弹窗内关键文字

运营活动弹窗

image.png

场景描述：当业务线需要活动宣传时采用活动弹窗，活动页范围不允许超过弹窗范围，且关闭图标不允许调整（仅允许调整关闭图标颜色）

引用弹窗

image.png

场景描述：当业务线需要进行内容分享时调用引用弹窗