B端 :悬浮层、弹窗、吐司、抽屉等形式,你真的懂么?

一、弹出组件简介

B端指的是企业级应用,悬浮层、弹窗、吐司、抽屉是常见的界面元素或交互方式。

1. 悬浮层(Floating Layer):悬浮层是一种浮动在页面上方的窗口,通常用于显示一些重要的信息或提供某些功能。它可以覆盖页面的一部分或整个页面,并且可以通过关闭按钮或其他操作来关闭。

2. 弹窗(Popup):弹窗是在当前页面上弹出的一个小窗口,通常用于显示一些提示、警告、确认信息或者进行某些操作。弹窗可以是模态的(阻止用户与页面其他部分的交互)或非模态的(允许用户与页面其他部分进行交互)。

3. 吐司(Toast):吐司是一种在屏幕上短暂显示的通知信息,通常以半透明的气泡形式出现在屏幕的某个位置。吐司通常用于显示一些简短的提示信息,如操作成功、操作失败等。

4. 抽屉(Drawer):抽屉是一种从屏幕边缘滑出的面板,通常用于显示导航菜单、设置选项或其他功能。抽屉可以从屏幕的左侧、右侧、顶部或底部滑出,用户可以通过手势或按钮来打开或关闭抽屉。

这些界面元素或交互方式在B端应用中常常用于提供用户友好的界面和交互体验,使用户能够方便地进行操作和获取信息。


二、它们之间的异同点

这四者的共同点是它们都是在B端应用中常见的界面元素或交互方式,用于提供用户友好的界面和交互体验。

然而,它们也有一些区别:

1. 悬浮层和弹窗:悬浮层和弹窗都是用于在当前页面上展示信息或提供功能的窗口,但它们的展示形式和交互方式略有不同。悬浮层通常是浮动在页面上方的窗口,可以覆盖页面的一部分或整个页面,而弹窗则是在当前页面上弹出的一个小窗口。悬浮层通常用于显示一些重要的信息或提供某些功能,而弹窗通常用于显示提示、警告、确认信息或进行某些操作。

2. 吐司和抽屉:吐司和抽屉都是用于展示信息或提供功能的界面元素,但它们的展示方式和交互方式有所不同。吐司是一种短暂显示的通知信息,通常以半透明的气泡形式出现在屏幕的某个位置,用于显示简短的提示信息。抽屉则是一种从屏幕边缘滑出的面板,通常用于显示导航菜单、设置选项或其他功能。吐司通常以简洁的方式展示信息,而抽屉可以提供更多的功能和选项。

总的来说,悬浮层、弹窗、吐司和抽屉都是为了提供更好的用户界面和交互体验而设计的界面元素或交互方式,它们在展示形式、交互方式和使用场景上有所差异。


三、各自的应用场景

这四者在B端应用中有各自的应用场景:

1. 悬浮层:悬浮层通常用于展示重要的信息或提供某些功能,常见的应用场景包括:

- 提示用户重要的通知或更新信息。

- 引导用户进行某些操作或完成某些任务。

- 展示广告或促销信息。

2. 弹窗:弹窗通常用于显示提示、警告、确认信息或进行某些操作,常见的应用场景包括:

- 提示用户操作的结果或错误信息。

- 要求用户确认某些敏感操作,如删除操作。

- 引导用户进行必要的选择或填写表单。

3. 吐司:吐司通常用于显示简短的提示信息,常见的应用场景包括:

- 提示用户操作成功或失败。

- 显示系统状态或进程信息。

- 提示用户操作的进度或状态。

4. 抽屉:抽屉通常用于显示导航菜单、设置选项或其他功能,常见的应用场景包括:

- 提供应用的主要导航菜单,让用户可以方便地切换不同的页面或功能。

- 提供应用的设置选项,让用户可以自定义应用的行为或外观。

- 提供其他功能或工具,如历史记录、书签等。

这些应用场景只是一些常见的示例,实际上,悬浮层、弹窗、吐司和抽屉的使用场景还取决于具体的应用需求和设计。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/641196.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【学习笔记二十二】EWM执行过账更改

一、EWM过账更改 1.EWM过账更改概述 过账更改是库存量特征字段(例如,非限制库存到质量检验库存)的更改,或者产品或批次编号的更改。 通常,库存的实际位置不一定更改。过账更改的一个示例是将库存从检验释放到非限制库存,反之亦然。可以从ERP 或 EWM 中触发过账更改。 2…

文件摆渡:安全、高效的摆渡系统助力提升效率

很多组织和企业都会通过网络隔离的方式来保护内部的数据,网络隔离可以是物理隔离,也可以是逻辑隔离,如使用防火墙、VPN、DMZ等技术手段来实现,隔离之后还会去寻找文件摆渡方式,来保障日常的业务和经营需求。 进行网络隔…

实验:路由过滤与引入

一、实验拓扑 二、实验要求 1、按照图示配置 IP 地址,R1,R3,R4 上使用 loopback 口模拟业务网段 2、R1和R3运行RIPv2,R2,R3和R4运行OSPF,各自协议内部互通 3、在 RIP 和 oSPF 间配置双向路由引入,要求除 R…

苍穹外卖开发笔记(6.缓存商品,购物车)

目录 一、缓存商品2、缓存菜品(redis)1.问题说明2.实现思路3.代码开发 2、缓存套餐(spring cache)1.实现思路2.代码实现 3、测试 二、购物车功能1、添加购物车1.需求分析设计2.代码开发3.测试 2、查看购物车1.需求分析设计2.代码开…

Scrapy爬虫框架入门(豆瓣电影Top 250)

文章目录 Scrapy 官网Scrapy 文档GithubScrapy 简介项目结构爬虫实现XPath 教程创建 Scrapy 项目配置用户代理网页 dom 元素 IP 代理池IP代理池作用配置IP代理池申请IP代理池 Scrapy 官网 https://scrapy.org/ Scrapy 文档 https://docs.scrapy.org/en/latest/ Github htt…

重发布及路由策略实验

目录 一、实验拓扑 二、实验需求 1、按照图示配置 IP 地址,R1,R3,R4 上使用 loopback 口模拟业务网段 2、R2,R3 和R4运行 oSPF,各自协议内部互通 3、在 RIP 和 oSPF 间配置双向路由引入,要求除 R4 上的…

(2024|WACV,fMRI到图像,对比学习,数据增强,用多阶段编解码器解决数据对稀缺)DREAM:逆转人类视觉系统的视觉解码

DREAM: Visual Decoding from REversing HumAn Visual SysteM 公和众和号:EDPJ(进 Q 交流群:922230617 或加 VX:CV_EDPJ 进 V 交流群) 目录 0. 摘要 1. 引言 3. 人类视觉系统基础 4. DREAM 4.1. R-VAC&#xff0…

vue3+Echarts+Nodejs实现动态数据可视化

最近在做毕设的后台管理系统,刚好需要做数据动态可视化的功能,就来记录一下具体的实现方式吧! 在开始之前就不阐述用vue创建项目的具体步骤了,主要详细讲解一下vue3、echarts和nodejs三者之间是如何实现数据的动态显示的&#xf…

在 VSCode 中运行 C#

文章目录 1.为何选择VSCode而不是VS2.操作步骤2.1 安装.NET2.2 安装扩展插件2.2.1 C#2.2.2 Code Runner 3.新建工程HelloCsharp 1.为何选择VSCode而不是VS VS实在是太“重”了,如果只是写一些简单控制台程序进行调试,则完全没必要 2.操作步骤 2.1 安装…

数据赋能(65)——要求:岗位与能力要求关系

“要求:岗位与能力要求关系”是作为标准的参考内容编写的。 岗位与能力要求关系存在多种。岗位与能力要求主要关系如下图所示 所有岗位所需要一定的基础能力或者称为胜任能力,主要基础能力包括:数据思维能力、协调与沟通能、持续学习能力、创…

Redis入门到通关之Redis数据结构-Hash篇

文章目录 ☃️ 概述☃️底层实现☃️源码☃️其他 欢迎来到 请回答1024 的博客 🍓🍓🍓欢迎来到 请回答1024的博客 关于博主: 我是 请回答1024,一个追求数学与计算的边界、时间与空间的平衡,0与1的延伸的后…

【Redis】set 数据类型

文章目录 常用命令sadd & smemberssismember & scardspopsmove & srem 多个集合间的交互命令交集 & sinter & sinterstore并集 & sunion & sunionstore差集 & sdiff & sdiffstore 内部编码 集合类型也是保存多个字符串类型的元素的&#x…