首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Material UI -关闭模式将焦点状态保留在打开它的按钮上

Material UI是一个流行的前端UI框架,它基于Google的Material Design设计语言,提供了丰富的UI组件和样式,可以帮助开发者快速构建美观、响应式的Web应用程序。

关闭模式是Material UI中的一个特性,它可以在打开一个模态框或弹出菜单时,将焦点状态保留在打开它的按钮上。这样做的好处是,用户可以通过按下回车键或空格键来关闭模态框或弹出菜单,而无需使用鼠标点击关闭按钮。

关闭模式的实现方式有多种,可以通过设置disableAutoFocusItem属性为true来禁用自动聚焦,然后在打开模态框或弹出菜单时手动设置焦点到按钮上。另外,还可以使用disableEnforceFocus属性来禁用焦点自动转移,确保焦点始终保留在按钮上。

Material UI提供了丰富的组件和样式,可以用于构建各种类型的Web应用程序。关闭模式适用于需要用户交互的场景,例如弹出确认对话框、选择菜单、下拉列表等。通过保留焦点状态,可以提高用户体验和操作效率。

腾讯云提供了一系列与前端开发相关的产品和服务,例如云服务器、云存储、云函数等。这些产品可以帮助开发者快速部署和扩展前端应用程序,提供稳定可靠的基础设施支持。具体的产品介绍和文档可以在腾讯云官网上找到。

参考链接:

  • Material UI官网:https://material-ui.com/
  • 腾讯云产品介绍:https://cloud.tencent.com/product
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

简单了解下无障碍设计模式

添加到原生元素额外声音(屏幕阅读器能够正确翻译原生元素) 标记用户界面元素 给输入控件和其他元素添加描述,供屏幕阅读器等设备可以进行朗读 动效 Material design 使用动效来引导视图之间焦点...错误示例 当把重要操作嵌入到其他内容中时,就不清楚什么是页面中最重要元素。 焦点顺序 输入焦点应该按照视觉布局顺序排列,从屏幕顶部到底部。应该从最重要项目到最不重要项目进行遍历。...屏幕阅读器会大声朗读屏幕所有的文本,包括可见和不可见替代文本。 无障碍文本包括可见文本(包括 UI 元素中标签、按钮文字、链接和表单)和不可见描述(没有文本标签按钮替代文字)。...这意味着按钮应该设置成按钮、复选框应该设置成复选框,以便控件类型和状态正确传达给用户。如果一个元素是从一个原生 UI 元素扩展或继承,他会获得父元素角色。...如果图标是一个项目的属性,则将其设置为复选框,以便屏幕阅读器能读出当前状态,例如 “打开” 或 “关闭” 如果图标是一个操作,使用文本标签来指明选中图标后会发生操作,例如 “添加到心愿单” 元素使用方式会影响它们显示方式

4.7K40

【译】W3C WAI-ARIA最佳实践 -- 表单

中,关闭其 menu 和所有打开父级 menu 容器 + Shift + Tab: 焦点移动到Tab序列中上一个元素,并且如果获得焦点项目不在 menubar 中,关闭其 menu 和所有打开父级...(省略号)添加到按钮,例如“另存为...” 除了常规按钮组件外,WAI-ARIA还支持其他2种按钮类型: 切换按钮:可以关闭(未按下)或打开(按下)状态按钮。...(见 对话模式) 如果激活按钮关闭一个对话框,焦点通常会返回到打开该对话框按钮,除非该对话框执行功能会遵从上下文逻辑,去到一个不同元素。...如果按钮操作会导致上下文变更,例如,转到向导中下一步,或添加其他搜索条件,此时,可以焦点移动到新操作起点。 如果使用快捷键激活按钮焦点通常保留在激活快捷键上下文中。...如果按钮是一个切换按钮,则其具有 aira-pressed 状态属性。当按钮打开时,该状态属性值为 true,当被关闭时,该状态属性值为false。

8.2K30

对话框、模态框和弹出框看起来很相似,它们有何不同?

它有链接文本和 URL 字段,关闭对话框或添加链接按钮图片模态对话框:添加链接;当这个模态对话框打开时,后面的任何东西都不能与之交互。...WAI-ARIA 规定,当使用 role="dialog" 时,应至少包含一个可聚焦元素,并在对话框打开焦点移动到其中一个可聚焦元素。...显式关闭(通过计时器、关闭按钮或其他脚本);当打开时,它不会强行关闭任何东西 (后续可能有更多类型) 全屏内容也会强制“auto”类型 popover 关闭。...如果存在多个按钮,可能是其中最不破坏性一个,例如如果有“取消”和“确认”按钮,一个合理默认选项可能是“取消”。 当模式对话框关闭时:如果用户触发焦点移回触发器。...对于弹出窗口,只在“有意义地方”情况下执行(请参阅弹出窗口解释器)。如果用户没有触发,将它移动到 DOM 中较早适当位置。 当模态对话框关闭时:如果用户触发了焦点返回到触发器。

3.4K00

Flutter 全栈式——基础控件

在Flutter中,UI小控件有两种设计风格,一种是Material设计,这是安卓官方设计风格,另一种则是Cupertino风格,是iOS官方设计风格。...focusColor Color 获取焦点按钮颜色 splashColor Color 水波纹效果初始化颜色 hoverColor Color 当指针悬停在按钮填充颜色 highlightColor...Color 水波纹高亮颜色 elevation double 阴影高度 hoverElevation double 指针悬停在按钮阴影 focusElevation double 获取焦点阴影...onChanged ValueChanged 开关状态变化回调 activeColor Color 打开状态颜色 activeTrackColor Color 打开状态时轨道上颜色。...inactiveThumbColor Color 关闭状态按钮颜色 inactiveTrackColor Color 关闭状态轨道颜色 activeThumbImage ImageProvider 打开状态按钮图片

3.8K40

Material Design — 底部动作条(Bottom Sheets)

即使不常用,仍然要保持可见状态,并且需与应用程序保持在同一高度,并融入其内容。 用法 ·在一个独特表面上引入新内容 ·展示最主要内容 ? 与悬浮动作按钮搭配能纵向移动 ?...它们出现在其他UI元素之上,必须被关闭才能与底层内容交互。当一个模态底部动作条滑到屏幕时,屏幕其余部分就会变暗,把焦点集中在动作条。 ?...为了使底部动作条中深层链接向上导航,通过溢出菜单提供一个明确链接来打开app。底部动作条中动作可能会导致打开父级app,比如使用“添加联系人”操作。...左:网格底部动作条    右:长列表底部动作条 ---- 行为 1、底部动作条可以通过向下滑动底部动作条来关闭; 2、通过点击一个明显控制按钮,例如在app导航栏中“X”,或者触摸Android系统后退按钮...; 3、模态底部动作条也可以通过点击动作条以外区域关闭

1.9K71

纯干货!谷歌MD深色主题设计规范详解(附Sketch官方文件下载)

可是,色彩模式、兼容性、系统性、易用性、可交互性以及内在逻辑自恰是怎么做到?也许你不一定要严格遵循这套规范,但是它会作为标杆,告诉你要确保整套主题严密地运行,创造体验无缝 UI 界面。...背景(0dp 高程叠加) 前景(1dp 高程叠加) 主色调 次要色 在背景元素 在前景表面上元素 在主色调上元素 在次要色元素 行为 深色主题应该可以通过外在显示开关控件,来打开或者关闭...: ·突出方式,是使用直接可见图标来打开或者关闭主题 ·不那么突出方式,是在菜单或者APP设置中放置开关 ?...在这种情况下,这些UI 能够通过不发光黑色像素来节省硬件电量。 ? 注意 在 OLED 屏幕打开关闭像素发光会导致屏幕滚动时出现延迟,导致像素模糊。...错误 应该避免配色中主色引用到弹出菜单背景,这回导致明亮色彩盖住多半屏幕。

9.5K10

Human Interface Guidelines —— Popovers

例如,许多iPadapp在点击Action按钮时会弹出共享选项。 使用时注意 ·避免在iPhone使用popover 一般来说,popover应该保留在iPadapp中使用。...·只能使用关闭按钮进行确认和指导 “退出”与“完成”均为关闭按钮,如果能够清晰进行指示(如离开时是否保存保存更改),那就使用关闭按钮。一般来说,popover在不被需要时会自动关闭。...如果可以做出多项选择,那么popover应该保持打开状态,直到有人明确地将其关闭或在区域外点击为止。...·popover放在屏幕中适当位置  popover箭头应直接指向弹出元素。由于popover无法在屏幕拖动,因此popover不应包含人们在使用popover时可能需要查看基本内容。...·可能的话,让用户点击一次就能关闭一个popover同时打开另一个popover 当几个不同按钮每个都打开一个popover时,避免额外点击是特别明智

1.3K110

【Flutter】自定义滚动开关

switch是两个状态UI组件,用于在ON(选中)或OFF(未选中)状态之间切换。通常,它是带有拇指滑块按钮,用户可以在其中来回拖拉以选择其他选项,例如“开”或“关”。...显示了在用户按下按钮后进行切换交互,该开关滚动到具有动画效果另一侧,并且在滚动该开关时更改图标和文本。...*我们添加textOn是字符串' Yes '表示当开关打开时,文本显示在按钮;当textOff是字符串' No '意味着当开关关闭时,文本显示在按钮。...我们添加colorOn表示,当开关处于打开状态时,颜色显示在按钮;当colorOff意味着当开关处于关闭状态时,颜色显示在按钮。...我们添加animationDuration手段来延迟动画开始并添加onChanged表示用户打开关闭开关时间。当我们运行应用程序时,我们应该获得屏幕输出,如屏幕下方截图所示。

33.3K60

flutter主题设置

栗子: 推荐站点(Material design): https://material.io/resources/color, 为你UI创建共享调色板,并衡量任何颜色组合可观性【非常实用工具】。...toggleableActiveColor - 用于突出显示切换Widget(如Switch,Radio和Checkbox)活动状态颜色。...focusColor - 焦点获取时颜色,例如,一些按钮焦点、输入框焦点。 hoverColor - 点击之后徘徊中颜色,例如,按钮长按,按住之后颜色。...用于确定放置在突出颜色顶部文本和图标的颜色(例如FloatingButton图标)。 brightness - Brightness类型,应用程序整体主题亮度。...Theme.of(context).colorScheme.background, // 从上下文拿到背景 ), new Text( // 如果为黑夜模式按钮文字为白天模式

4.4K20

Material Design —卡片(Cards)

左:卡片有圆角、能有多个操作、可关闭/重现    右:是tile而不是卡片,无圆角、最多两个操作 ? 左:快速可浏览列表,适合展示无操作同类内容    右:阻碍了快速浏览,且这些内容不能关闭 ?...例如,主要内容放置在卡顶部,或使用排版来强调最重要内容。 图像可以强化卡片中其他内容。 但是,它们在卡内大小和位置取决于图像是主要内容还是用于补充卡片其他内容。...pc端卡片可展开和内部滚动 卡片聚焦 当遍历卡片焦点时,在移动到下一张卡片之前访问所有可聚焦元素。...对于依赖焦点遍历进行导航(手柄和键盘)页面,卡片应具有主要操作或打开包含主要和补充操作新视图。 ? 选择操作 ?...UI控件 与主内容内联放置UI控件(如滑块)可以修改主内容视图。 例如,可以选择日期滑块,评分内容星星,或选择日期范围分段按钮。 ? ? ? 溢出菜单(可选) 溢出菜单通常放置在卡右上角。

4.3K100

Flutter 2.5正式版发布,带来重大更新

Android 全屏、Material You & 文本编辑快捷方式 从(#81303) 开始, 我们修复了 Android 一系列与全屏模式相关问题,此更改还添加了一种在其他模式下收听全屏更改方法...在此版本中,我们对新 Material You(又名 v3)规范增加了支持,包括对浮动操作按钮大小和主题更新(#86441),在MaterialState.scrolledUnder 可以使用 Demo...] 在 iOS 不触发设备方向 #4158 [相机] 修复坐标旋转以在 iOS 设置焦点和曝光点 #4197 [相机] 修复相机预览并不总是在方向改变时重建 #3992 [camera] 设置不受支持...同时,此版本 DevTools 附带了对 Widget Inspector 更新,允许鼠标悬停在 Widget 来获取评估对象、视图属性、小部件状态等信息。...优化和改变内容具体表现如下几个方面: 优化调试切换按钮:我们对这些按钮进行了更新,以让更好表达它们作用,并且每个工具提示都会链接到该功能详细文档。

4.3K50

flutter 起步

flutter简介Flutter是谷歌移动UI框架,可以运行在ios与android系统,可以以完成app开发,使用情况页面大多数涉及到flutter 开发app 都是混合开发,占比并不多。...基本都是原生+Flutter混合开发模式,不是使用纯Flutter开发起步基于dartdart 不用单独安装,flutter 会自带环境,且dart 语言较简单,可以在flutter使用中学习安装环境...GPU和UI曲线图,可即时查看当前流畅度情况19. checkerboardRasterCacheImages当为true时,打开光栅缓存图像棋盘格20. checkerboardOffscreenLayers...当为true时,打开呈现到屏幕位图棋盘格21. showSemanticsDebugger当为true时,打开Widget边框,类似Android开发者模式中显示布局边界22. debugShowCheckedModeBanner...Text:文本组件Icon:图标组件CloseButton:关闭按钮组件BackButton:返回按钮组件Chip:材料设计中非常有趣一个组件Divider:分割线组件Card:卡片状容器组件

4.4K20

聚焦位置-选择您喜欢位置放置虚拟物体

我们需要使用DispatchQueue.main.async来在主线程中进行更新,这意味着在UI,因为我们正在后台线程执行代码。...打开关闭 我们如何为焦点方块添加漂亮触感?您可能已经意识到我们有两个用于焦点方块资产图像,一个是开放,一个是关闭。这应该会给你一个提示,我们都会在不同情况下使用它们。...因此,在FocusSquare类中,让我们一个变量isClosed作为布尔值(true或false)添加,以在打开关闭状态之间切换图像。...如果是这种情况,那么焦点方块将是关闭图像。否则,焦点方块打开。 focusSquareLocal.isClosed = false 运行应用程序。一切看起来都很棒但是如果你旋转设备怎么办?...结论 在本课程中,您已经学习了很多很棒东西,从创建自己类开始并自定义。你能够焦点方块从非活动变形到整个房间循环,并在打开关闭状态之间切换。焦点方块广泛用于要检测表面的AR应用程序中。

2.4K30

Flutter 2.5正式版发布,带来多项重大更新

[在这里插入图片描述] Android 全屏、Material You & 文本编辑快捷方式 从(#81303) 开始, 我们修复了 Android 一系列与全屏模式相关问题,此更改还添加了一种在其他模式下收听全屏更改方法...[在这里插入图片描述] 在此版本中,我们对新 Material You(又名 v3)规范增加了支持,包括对浮动操作按钮大小和主题更新(#86441),在MaterialState.scrolledUnder...在 iOS 不触发设备方向 #4158 相机 修复坐标旋转以在 iOS 设置焦点和曝光点 #4197 相机 修复相机预览并不总是在方向改变时重建 #3992 camera 设置不受支持 FocusMode...[在这里插入图片描述] 同时,此版本 DevTools 附带了对 Widget Inspector 更新,允许鼠标悬停在 Widget 来获取评估对象、视图属性、小部件状态等信息。...[在这里插入图片描述] 优化和改变内容具体表现如下几个方面: 优化调试切换按钮:我们对这些按钮进行了更新,以让更好表达它们作用,并且每个工具提示都会链接到该功能详细文档。

3.5K00

打造原生 UI Android 现代工具包

Monzo 表示,Compose 让他们能够 "更快构建出更高质量界面"。Twitter 则做出了很好 总结: "我们喜欢!❤️"。...随着应用状态变化,您 UI 会自动更新,这使得快速构建 UI 变得更加简单。直观 Kotlin API 可以帮助您用更少代码构建出漂亮应用。...1.0 版本可以在生产中使用,您所需核心功能尽在其中,包括: 互操作性 : Compose 可以和既有的应用进行 互操作。您可以 Compose UI 嵌入 View,反之亦然。...您可以只在屏幕添加一个按钮,也把自己创建自定义视图保留在现在用 Compose 打造界面中。 Jetpack 集成 : Compose 和大家熟知且喜爱 Jetpack 开发库 天然整合。...Material : Compose 提供了 Material Design 组件和 主题 实现,使您能够轻松构建符合您品牌个性美观应用。

1.8K20

Flutter | 常用组件

Material 组件库中提供了单选开关 Switch 和 复选框 Checkbox,他们本身都是继承自 StatefulWidget ,他们本身不会保存当前选择状态,选中状态都是由父组件来管理。...所以继承自 StatefulWidget ,在 build 中,构建了 checkBox 和 Switch 和 Radio,在点击时候修改状态,然后重新构建 UI 属性 共有属性 activeColor...值会自动增加一个状态 null 总结 Switch , Checkbox 和 Radio 本身不会维护状态,而是需要父组件来管理状态,当用户点击时,通过事件状态通知到父组件,因此是否选中就会和用户数据发生关联...,可以通过设置/获取编辑框内容,选择编辑框内容,监听编辑框文本改变事件。...焦点可以通过 FocusNode 和 FocusScopeNode 来控制,默认情况下,焦点由FocusScope来管理,代表焦点控制范围,可以在这个范围内可以通过FocusScopeNode在输入框之间移动焦点

11.4K30

UI设计中颜色使用10条原则

您会注意到,在如Instagram或Twitter这样包含很多色彩和不可预测内容应用程序中,它们界面往往非常简洁。这种设计非常微妙,它将用户视觉焦点从界面移开,并将其聚焦在内容。...7.状态 ? 颜色是我们可以在界面中显示状态变化一种方式。通过把按钮颜色变灰,表示按钮已禁用,或者通过将其突出显示为红色,来表示错误。...为UI选择基本颜色后,这些颜色放入Google颜色工具https://material.io/design/color/the-color-system.html#tools-for-picking-colors...这个公式之所以有效,是因为创造了一种平衡感,并使眼睛舒适地从一个焦点移动到另一个焦点。”...利用一种算法来创建易于访问且美观调色板。 · https://dribbble.com/colors/ Dribbble是我最喜欢获得UI灵感地方。

3.5K10
领券