首页
学习
活动
专区
圈层
工具
发布

模态对话框-B 类产品设计细节:对话框 vs 抽屉

例如:在房地产网站 Zillow 中,用户可以在没有账号或房产代理的情况下浏览房源列表,当用户图联系某代理以获取房源信息时,站点会通过一个模式对话框询问他们是否已经有代理。   ...不要让用户在模态组件上进行需要额外信息(这些信息不在上面)的复杂决策。   ...原来由左侧划入的模态抽屉,点击左侧导航后从左侧划入:   当前版本使用非模态对话框模态对话框,点击顶部导航后在 icon 下方出现:   4....非模态抽屉的优点是,用户可以同时查看下面的父级页面中其他任务的标题,并快速点击切换到其他需求;而模态对话框的优点是用户可以完全沉浸在当前的任务中,同时顶部也增加了「上一条」、「下一条」按钮,支持上下条快速切换...例如:为一个表单选择组件,从应用场景来看,对话框和抽屉皆可;从交互维度,该表单的填写需要参考表单的父级页面中的内容,则确定选择非模态抽屉模态对话框,不需要再从长短考虑。

2K20

Kubectl 的替代品:kubeman

2、点击 Select Cluster 菜单选择集群,还可以在 NAMESPACES 对话框中选择一个或多个 namespace,将后面操作项的会话限制在某些 namespace 中。 ? ?...3、之前选择的集群 context 现在会显示在顶部。 ? 4、左边一栏是菜单面板,操作项被按照不同的资源类型进行分组,你可以从菜单组中选择一个要执行的操作项。 ?...还提供了一些额外的操作: 一旦操作项运行并输出了结果,你就可以在输出面板顶部的搜索框里通过关键词搜索相应的文本。如果想删除搜索的关键词,可以按下键盘上的 esc 键。 ?...每个操作项的输出会按层级进行分组。最顶部的输出行(深蓝色)显示的是输出结果的标题,单击这一行会将整个输出折迭起来,只显示组和子组,这样就可以看到整个输出的概要。再次单击这一行就会显示整个输出。 ?...11、有些操作项支持自动定期执行,这些操作项的菜单栏中有一个 Auto Refresh 选项,还可以自定义执行周期,默认的周期是 15s。 ?

1.1K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Material Design — 提示框( Dialogs)

    全屏幕提示框例外 全屏对话框可能会打开其他对话框,例如选择器,因为它们的设计可以容纳额外的材料层,而不会显着增加app深度的感知与视觉干扰。 ?...提示框与底层父级材料是分开的,不会随其滚动。 ? 标题与被选操作均保持可见 显示额外内容 要在提示框中展示额外内容,请在内容区域内使用内联展开。 或者考虑能对大量的内容进行优化的可替代的组件。...他们经常允许用户撤消刚刚采取的操作。 警告没有标题栏 大多数警告不需要标题。 他们用以下的方式以一两句话来总结一个决定,例如: ·提出问题(例如“删除此对话?”) ·做出与操作按钮有关的声明 ?...不该有明确的取消按钮 明确说明 ·在简单提示框中,行高可以变化; ·简单的对话框在屏幕上垂直和水平都居中显示; ·提示框与屏幕左右边缘的距离应该至少为40dp,距离顶部和底部至少为24dp; ·该对话框的内容距离提示框边缘为...全屏提示框支持日期选择器 操作 在屏幕顶部放置全屏对话框的确认和离开操作。 确认 屏幕右上角的确认按钮使用描述性动词,例如:保存,发送,分享,更新或创建。

    5.9K101

    带有桌面和推荐软件的 Raspberry Pi OS免费下载

    Policykit CVE-2021-4034 修复 * rc_gui - 添加组合框以允许为 VNC 连接设置分辨率 * rc_gui - 相机接口开关被移除 * lxpanel - 从首选项对话框中删除外观设置...lxpanel 通用 * 推荐软件中添加了 4K 版本的树莓派壁纸 * Python 游戏和 Minecraft 从推荐软件中删除 - 两者都不兼容靶心 * 蓝牙配对和连接对话框更新以兼容更多设备...* 蓝牙设备在移除前总是断开连接以加快移除过程 * 蓝牙配对对话框现在只显示提供可供 Pi 使用的服务的设备 * 删除了单独的蓝牙取消配对对话框 - 现在取消配对每个单独设备的选项 *...* lxplug-蓝牙: - 修复一些内存泄漏 - 添加一些 BT-LE 配对所需的授权对话框 * alsa-utils:在 Raspberry Pi 上为 bcm2835 添加自定义初始化文件以正确设置音量...ALSA 设备启用 * MagPi 预安装已删除并替换为初学者指南 * 从主菜单中删除 MagPi 网络链接 * Chromium 为 PDF 文件设置了默认应用程序 * 使用的 lxpanel

    3K20

    Google Earth Engine(GEE)——GEE最全介绍(7000字长文)初学者福音!

    该示例文件夹是一种特殊的资源库由谷歌托管包含代码样本。该归档文件夹包含您有权访问,但还没有被他们的老板从旧版本的脚本管理的迁移旧仓库。使用顶部的过滤器栏搜索您的脚本脚本选项卡。...要使用此功能,请从“脚本管理器”选项卡加载保存的脚本,单击“获取链接”按钮右侧的下拉箭头并选择“复制脚本路径”。将出现一个对话框,显示可共享的脚本 URL。...要将数据集直接导入脚本,请单击数据集描述中的导入链接或 import按钮。 代码编辑器顶部的导入部分。 将数据集导入脚本的结果组织在脚本顶部的导入部分中,在您导入某些内容之前隐藏。...要配置几何图形导入脚本的方式,请单击 地图上Geometry Imports部分或代码编辑器的Imports部分中图层旁边的图标。几何图层设置工具将显示在一个对话框中,该对话框应类似于图 9。...几何配置工具 最后,为了防止图层中的几何图形被编辑,您可以通过按 图层旁边的图标。这将阻止添加、删除或编辑图层上的任何几何图形。要再次解锁图层,请按 图标。防止你的改动或者删除之类的操作!

    3.6K11

    2021 最新 IntelliJ IDEA 详细配置步骤演示(图文版)

    默认情况下,此选项是禁用的,您可以移动所有内容而无需任何额外的键。...,而不是堆叠在彼此的顶部上显示垂直工具窗口。...Menus and Toolbars(菜单和工具栏管理) 自定义菜单和工具栏,使其仅包含所需的操作,对其进行重新组合并配置其图标。 在可用菜单和工具栏列表中,展开要自定义的节点,然后选择所需的项目。...单击-按钮以删除所选的项目。 单击编辑图标按钮以添加或更改所选操作的图标。您只能将PNG或SVG文件用作图标。 单击上移按钮或下移按钮向上或向下移动所选项目。...可以将其视为自定义菜单或工具栏,您可以为其指定快捷方式以进行快速访问。您可以根据需要创建任意数量的快速列表。快速列表中的每个动作均由0到9之间的数字标识。

    1.5K10

    Vue Amazing UI:好用的Vue3组件,大大提升开发速度,这款强大的Vue3组件库,组件太丰富了,几乎涵盖了你需要的控件样式,不信你自己测试

    - ui 中引入使用,无需任何额外安装。...BackTop(回到顶部)对于页面较长的网站,如新闻网站或者电商产品列表页面,当用户滚动到页面底部后,想要快速回到顶部时,BackTop 组件就非常有用。用户点击这个组件,页面就会平滑地滚动到顶部。...ColorPicker(颜色选择器)在一些设计类工具或者需要用户自定义颜色的场景,如自定义主题颜色、设置文本颜色等,ColorPicker 组件能够让用户方便地选择自己想要的颜色。...Dialog(对话框)当需要弹出一个模态框来显示一些重要信息或者让用户进行操作确认时,如删除某个重要文件时弹出确认对话框,Dialog 组件就可以满足需求。...Popconfirm(弹出确认)类似于 Dialog 和 Popover 的结合,当用户进行某个操作时,如删除操作,会弹出一个确认框,并且可以在确认框中显示一些提示信息。

    2.2K00

    运行Excel VBA的15种方法2

    标签:VBA 本文接上一篇:运行Excel VBA的15种方法1 方法8:自定义功能区 可以自定义功能区,将宏代码关联到功能区选项卡组中。这种方法尤其适合于组织布置许多自定义宏的运行。...在功能区任意选项卡组中单击右键,从快捷菜单中选择“自定义功能区”,如下图15所示。 图15 在弹出的“Excel选项”对话框中,单击“新建选项卡”,如下图16所示。...图17 然后,在“Excel选项”对话框中,“从下列位置选择命令”下拉列表中选择“宏”,从下侧宏名列表中选择要添加的宏,单击“添加”按钮,将其添加到新建组中,如下图18所示。...图19 方法9:从VBE的运行菜单中运行VBA 在VBE中,首先将光标置于要运行的过程代码中,然后单击顶部菜单“运行——运行子过程/用户窗体”,如下图20所示。...图20 方法10:从VBE工具栏中运行VBA 在VBE中,首先将光标置于要运行的过程代码中,然后单击顶部调试工具栏中的“运行——运行子过程/用户窗体”按钮,如下图21所示。

    89640

    GitHub+Docker Hub实现自动构建镜像

    从用户/组织中选择 3. 或者,键入以过滤仓库列表 4. 选择要构建的项目 系统会显示 Create Automated Build 对话框。 ? 该对话框会为可以自定义的值设置默认值。...通过点击 Click here to customize 来自定义自动构建 指定要从哪个代码分支或代码标签构建。可以通过单击 +(加号)来添加新的配置。该对话框接受正则表达式。 ? 6....删除 Docker 集成会导致你的自动构建停止。 4.1. 理解构建过程 首次创建自动构建时,Docker Hub 会构建你的镜像。...页面顶部的 banner 显示日志文件的最后一句话,指明错误是什么。如果需要更多信息,滚动至屏幕底部的日志部分。 五....增加并运行新构建 Build 对话框的顶部是配置好的构建列表。可以从代码分支或构建标签来构建。 ? 每当向代码仓库进行 push 时,Docker 都会对列出的所有内容进行构建。

    5.5K41

    基于 HTML5 Canvas 的工控机柜 U 位动态管理

    (32);// 设置顶部组件高度 listForm.setVPadding(2);// 设置表单顶部和顶部与组件内容的间距 listForm.setHPadding(4);// 设置表单左边和右边与组件内容的间距...toolbar 工具条中总共的元素就三个:添加机柜,编辑机柜和删除机柜。...实现了添加和编辑机柜的两个功能,删除机柜的功能实现上非常容易,只要将节点从拓扑图和树上移除即可: handleRemoveRack: function(){// 在拓扑图上删除机柜,并删除树上此机柜对应的节点...既然有了从列表组件上拖拽下来的交互动作,接下来应该是做设备在机柜上的拖拽改变位置的功能了,我们通过监听拓扑组件 gv 的交互事件来对节点移动进行事件处理: gv.mi(this.handleInteractor.bind...self.listTypeFilter === -1) return true; return data.a('type') === self.listTypeFilter;// 根据节点的自定义属性

    2.6K40

    基于 HTML5 的工业互联网云平台监控机房 U 位 顶

    (32);// 设置顶部组件高度 listForm.setVPadding(2);// 设置表单顶部和顶部与组件内容的间距 listForm.setHPadding(4);// 设置表单左边和右边与组件内容的间距...toolbar 工具条中总共的元素就三个:添加机柜,编辑机柜和删除机柜。...实现了添加和编辑机柜的两个功能,删除机柜的功能实现上非常容易,只要将节点从拓扑图和树上移除即可: handleRemoveRack: function(){// 在拓扑图上删除机柜,并删除树上此机柜对应的节点...既然有了从列表组件上拖拽下来的交互动作,接下来应该是做设备在机柜上的拖拽改变位置的功能了,我们通过监听拓扑组件 gv 的交互事件来对节点移动进行事件处理: gv.mi(this.handleInteractor.bind...self.listTypeFilter === -1) return true; return data.a('type') === self.listTypeFilter;// 根据节点的自定义属性

    1.6K30

    一款很棒的GIF动画制作小软件GifCam

    GifCam 有一个很好的想法,该应用程序的工作方式就像一个位于所有窗口顶部的相机,因此您可以移动它并调整它的大小以记录您想要的区域 准备好后,单击“Rec”开始录制或单击“Frame”录制单帧。...,定位文本,左/中/右对齐,添加阴影并使用本机 Windows 字体对话框更改字体。...删除“添加 0.1 秒延迟”和“删除 0.1 秒延迟”选项,因为右键单击编辑菜单越来越大,并且可以通过拖动延迟标签或从“键盘输入”窗口更实际地添加延迟。 修复拖动延迟停止。...修复预览窗口中 10 gif 大小的问题。 5.0 版 2015 年 5 月 27 日更新 定制: 自定义窗口可让您保存和自定义: – “Rec”拆分按钮菜单上显示的三个 FPS 选项。...通过添加额外的帧来提高“导出到 Avi”的播放时间,以让具有可变 gif 帧延迟的恒定 avi fps macth,还为 avi 编码添加进度条。

    2.8K20

    Elasticsearch基础(五):使用Kibana Discover探索数据

    关于KQL语法的更多信息,请参见Kibana Query Language。 三、保存搜索 本部分将创建一个自定义表格视图并将其保存。 单击顶部导航栏中的新建,重置筛选和查询。...如图所示,选择一个文档,切换为具有详情的对话框。 创建一个仅包含某些字段的自定义表格视图。...在文档详情对话框中,依次单击字段OriginCityName、DestCityName、Carrier和FlightDelayMin操作列下的图标(在表中切换列)。...单击页面右上角的保存,在保存搜索对话框的标题中输入Delayed flights saved search,单击保存。 单击顶部导航栏中的新建,将表格视图重置为原始视图。...单击顶部导航栏中的打开,选择已保存的Delayed flights saved search,即可打开已保存的搜索。

    48110

    >>开发工具:IntelliJ IDEA 2020.3基础技能

    按此⌫按钮从列表中删除所选文件,然后在编辑器中将其关闭。 更改IDE外观 1、按⌃` 。 2、在“切换”菜单中,选择所需的选项,然后按⏎。使用相同的快捷方式⌃` 撤消更改。...您可以检查您的代码是否有问题,然后快速导航到它们。 滚动条的顶部具有“检查”小部件,可为您简要介绍代码问题。单击小部件,在“问题”工具窗口中获取有关每个检测到的问题的更多信息。...移动,删除或排序标签 分屏 IntelliJ IDEA提供了各种操作,您可以从主菜单或上下文菜单,编辑器或项目工具窗口中调用这些操作,以分割编辑器屏幕。...3、从选项列表中,选择以下选项之一: 将编辑器拉伸到顶部 向左拉伸编辑器 将编辑器拉伸到底部 将编辑器向右拉伸 您可以为每个选项分配一个快捷方式,并使用键盘来拉伸分割框。...编辑器配置 可以使用“设置/首选项”对话框⌘,来自定义编辑器的行为。 下面是通用的配置格式: 配置代码格式 在“设置/首选项”对话框中⌘,转到“编辑器” | “首选项”。代码样式。

    1K20

    React.js 实战 - 组件 & Props

    我们之所以称这种类型的组件为函数定义组件,是因为从字面上来看,它就是一个JavaScript函数....我们将在[下一节]讨论类的一些额外特性。在那之前,我们都将使用较为简洁的函数定义组件。...name="Sara" />; 当React遇到的元素是用户自定义的组件,它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。...3 组合组件 组件可以在它的输出中引用其它组件,这就可以让我们用同一组件来抽象出任意层次的细节. 在React应用中,按钮、表单、对话框、整个屏幕的内容等,这些通常都被表示为组件....通常,一个新的React应用程序的顶部是一个App组件. 但是,如果要将React集成到现有应用程序中,则可以从下而上使用像Button这样的小组件作为开始,并逐渐运用到视图层的顶部.

    2.4K10

    Flutter入门-路由导航

    设置为false时,在入栈新页面时,释放当前原路由所占用的资源 fullscreenDialog 新路由是否是一个全屏的模态对话框,例如在ios中,如果为true,则新页面从屏幕底部滑入,而不是水平...对于Android,当打开新页面时,新的页面会从屏幕底部滑动到屏幕顶部;当关闭页面时,当前页面会从屏幕顶部滑动到屏幕底部后消失,同时上一个页面会显示到屏幕上。...如果想自定义路由动画,可以继承 PageRoute 来实现。 Navigator Navigator 是一个路由导航组件,提供了打开和退出路由的方法,Navigator 内部通过栈来管理活动路由集合。...中 删除路由,同时释放Route自身资源,路由的生命周期结束; removeRouteBelow 表示从Navigator 中删除指定路由下的路由,同时释放其资源,比如 A->B->C,路由栈存在三个页面..., 当前处于C,传入B,则删除A,并释放其资源 ; replace 将Navigator中指定的路由替换为新的路由; replaceRouteBelow 将Navigator中指定的路由下的路由替换为新的路由

    1.3K20

    基于element-ui的顶部栏

    塞尔达小队电商管理系统后台顶部栏 效果展示: 代码解析和功能说明 这段代码是一个Vue组件,用于渲染塞尔达小队电商管理系统后台的顶部栏。让我们逐行来解析并添加详细注释。...第 10 行:将行的布局方式设置为 justify:center,使内容在水平方向上居中。 第 11 行:创建一个列,并占据一行的所有空间。 第 12-16 行:添加顶部栏的内容。...第 19-23 行:添加一个用于用户登录的对话框组件,该对话框的可见性由 loginDialogVisible 控制。...important; margin-top: 5px; /* 按钮向上移动 */ } 第 1-7 行:定义一些样式规则,用于自定义顶部栏的外观和布局。...以上便是塞尔达小队电商管理系统后台顶部栏组件的详细注释和功能说明。该顶部栏提供了一个简单的登录功能,并以响应式的方式显示用户信息或登录按钮。

    16300

    MyEMS 开源能源管理系统后台配置指南 —— 网关管理模块详解

    操作步骤:登录系统后台,点击顶部菜单 “系统管理”(位于导航栏左侧,图标通常为齿轮状)。在展开的二级菜单中,点击 “网关管理”(该模块负责所有数据采集网关的配置与监控)。...在弹出对话框中填写:名称:自定义网关标识(如 “生产车间 A 网关”);描述:补充设备位置、用途等信息(如 “负责车间电力仪表数据采集”)。...在编辑对话框中调整名称或描述(若涉及 IP 地址、通信协议等参数修改,需根据系统提示进一步操作)。确认修改后点击 “保存”,变更将实时同步至设备配置(如图 6-3 所示)。...(四)删除网关设备注意事项:删除前需确认网关无数据采集任务,避免影响实时监控。操作流程:在列表中选中待删除网关,点击 “删除” 按钮(红色垃圾桶图标)。...系统弹出 “确认删除” 对话框,点击 “确认删除” 后,该网关配置及历史数据将被移除(不可逆操作)。(五)批量导入 / 导出网关应用场景:适用于多网关部署场景,支持通过模板批量管理。

    13110

    探索 JQuery EasyUI:构建简单易用的前端页面

    每个区域都可以包含不同的内容,比如菜单、工具栏、数据表格等,从而实现丰富多样的页面布局效果。3.1.1 区域设置North: 顶部区域通常用于放置网页的标题栏或导航栏,可以设置高度和背景色。...3.3 Window 窗口组件Window 窗口组件可以在网页中弹出一个独立的窗口,用于显示额外的信息、执行特定的操作或者与用户进行交互。...5.2.3 后端接口在实际应用中,我们通常需要通过后端接口从数据库或其他数据源中获取真实数据,然后将数据传递给前端页面进行图表展示。...php// 获取任务 ID 并从数据库中删除对应的任务// 返回 JSON 格式的删除结果(成功或失败)通过以上的 HTML、JavaScript 和 PHP 代码,我们创建了一个简单的任务管理系统。...用户可以在页面上看到任务列表,点击工具栏按钮可以弹出添加或编辑任务的对话框,输入任务信息后点击保存按钮即可将任务信息保存到后端数据库中,同时也可以删除已有的任务。

    1.4K10
    领券