文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

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

默认情况下，用户通过 Tab 键离开元素时，light dismiss 不会触发 (但开发人员如果需要，可以添加此功能，详情可见 openui/open-ui#415 中的讨论)。...它们的主要功能是警告用户，浏览器将通过触发系统警告事件向可用性 API 发送警告信息来实现这一点。它们是我们上面讨论的浏览器 alert() 对话框的 ARIA 等价物。...属性适用于以下 UI 组件： 位于其他页面内容之上的 UI 组件 并不总是可见的（只有发生与它们相关交互时可见），也被称为“短暂存在”或“短暂出现” 通常一次显示一个而不是同时显示多个。...当模态对话框关闭时：如果用户触发了它，将焦点返回到触发器。浏览器会对自动执行此操作。对于 popover，只有在“有意义”的情况下才会执行 (请参考 popover 解释器)。...popovers 是由 Open UI 提出的一种新方法，用于构建非模态对话框，它具有特定的行为和特征，例如表层存在、无需 JS 的可 toggle 性和浏览器提供的轻击关闭。

7.8K00

Human Interface Guidelines —— Popovers

自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚...Popovers Human Interface Guidelines链接：Popovers ?...·将popover放在屏幕中适当的位置  popover的箭头应直接指向弹出它的元素。由于popover无法在屏幕上拖动，因此popover不应包含人们在使用popover时可能需要查看的基本内容。...·一次显示一个popover 显示多个popovers使界面变得混乱并引发困惑。永远不要显示一个堆叠的或几层由上个popover引出的popovers。...如果需要显示新的popover，请先关闭打开的popover。 ·不要在popover上显示另一个视图 除了alert外，任何东西都不应该显示在popovers上方。

1.8K110
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    Angular v16 来了！

    信号的后续步骤 接下来，我们将研究基于信号的组件，这些组件具有一组简化的生命周期挂钩，以及另一种更简单的声明输入和输出的方法。我们还将致力于更完整的示例和文档集。...我们很高兴与大家分享，今年晚些时候我们将推出一项功能，支持基于信号的输入——您将能够通过互操作包将输入转换为可观察对象！...为了支持开发人员将他们的应用程序转换为独立 API，我们开发了迁移示意图和独立迁移指南。...GitHub 上一个流行的功能请求是要求能够将路由参数绑定到相应组件的输入。我们很高兴地告诉大家，此功能现已作为 v16 版本的一部分提供！...nonce在 Angular v16 中，我们实现了一个跨越框架、Universal、CDK、Material 和 CLI 的新功能，它允许您为 Angular 内联的组件的样式指定一个属性。

    5.2K20

    11个React Native 组件库和 Javascript 数据可视化库

    该库为 iOS 和 Android 提供了一组跨平台组件，所有组件都是可组合和可定制的。每个组件还具有与其他组件一致的预定义样式，这使得无需手动定义复杂样式就可以构建复杂组件。...4.UI Kitten 超过 3 k stars 的 UI Kitten 提供了一个可定制和可重用的 react-native 组件工具包，该工具包基于将样式定义移动到特定位置的概念，使组件可重用，并以一种单一的方式设计样式...超过 2 k stars 的库，带有一组可高度定制的 UI 组件，实现了 Google’s material design。...库附带一组预定义的样式预置(转换为修饰符)，包括颜色、排版、阴影、边框半径等。 9. React Native Paper ?...超过 3K stars 的 React Native Paper 是一个跨平台的 UI 组件库，它遵循了 material design 指南，支持全局主题化，还有一个可选的 babel-plugin

    14K11

    Button 的 进化之旅 | 我们是如何设计 Compose API 的

    要洞悉其中的原因，我们先回溯一下为什么样式的概念存在于 Android 框架和其他工具包中。 "样式" 本质上是与 UI 相关的属性的集合，可被应用于组件 (如 Button)。...将 UI 配置与业务逻辑相剥离 在命令式工具包中，独立定义样式有助于分离关注点并且使代码更易于阅读: UI 可以在一个地方定义，比如 XML 文件中；而回调和业务逻辑可以在另外的地方定义和关联。...由于组件也都是函数，可以通过向 Button 函数传参实现自定义，如其他函数的操作一样。但是这会增加将 UI 配置从功能配置中剥离的难度。...我们发现在不同的 UI 组件中，保证 API 的一致性是非常重要的。 2....我们开始将这个通用的 API 形式叫做 *"slot API"*，现已经广泛应用于各个组件。

    91400

    科普 | 一文详解 CSS-in-JS

    解析此 JavaScript 时，将生成 CSS（通常作为元素）并将其附加到 DOM 中。...使用 CSS-in-JS 的优点 组件化思考模式，不再需要维护一堆样式表。CSS-in-JS 将 CSS 模型抽象到组件级别，而不是文档级别（模块化）。...UI 库 material-ui 是笔者很早关注的一个 material design 的一个开源 UI 组件库，用过 ReactJS 的开发同学可能有了解过，记得一开始官方采用的是内联样式，后续研发了自己的一套...CSS-in-JS 的实现方案，单独发布了 Material-UI 组件中使用的样式方案 —— @material-ui/styles。...笔者因早前开发过自己的一套 React UI 库 React-UWP，也基于这套 UI 库做了 CSS-in-JS 的方案，在过去两年中在开发中虽然用的组件不是很多，但是用了 CSS-in-JS 来做整体的样式解决方案

    3.5K20

    前端框架与库 - Material-UI组件库

    Material-UI 是一个基于 React 的 UI 组件库，它遵循 Google 的 Material Design 设计规范，提供了丰富的预构建组件，极大地简化了前端开发过程。...本文将深入浅出地介绍 Material-UI 的常见问题、易错点及如何避免这些问题，并附带代码示例，帮助你更好地掌握 Material-UI 的使用技巧。 1....Material-UI简介 Material-UI 不仅提供了美观的组件，还注重组件的可定制性和灵活性。它支持主题化，使得你可以轻松调整应用的整体外观，而无需从零开始设计界面。 2....常见问题与易错点 2.1 忽略版本兼容性 Material-UI 的版本更新频繁，新版本可能引入了 API 变更或移除了旧组件。...2.2 忽视自定义样式 虽然 Material-UI 提供了丰富的预设样式，但在某些场景下，可能需要对组件进行更精细的样式控制。直接修改全局样式可能会导致意料之外的影响。

    1.9K10

    十大移动开发平台

    Titanium Mobile支持原生的iOS和Android UI元素如Table views, tabs, switches和popovers。...它拥有标准，类原生的UI元素比如用于屏幕登录的Web表单控件，还有弹出小部件可用于在用户点击界面时提供一些额外的信息。 　　...而且假如你喜欢自己定制，可以利用其提供的EmbedJS Build tool工具实现。 　　EmbedJS基于Dojo实现，所以你如果熟悉Dojo API语法，那EmbedJS将是你最佳的选择。...DHTMLX Touch UI Designer是一个可视化的编辑器用于构建移动用户界面。它能够帮您以最少的编码构建一流的用户界面。 　　...这个框架其实就是将需要在移动设备上显示的部分页面以jQuery Mobile的默认主题显示，而不是实现一个全新完整的移动页面。

    4.8K30

    前端框架与库 - Material-UI组件库

    Material-UI 是一个基于 React 的 UI 组件库，它遵循 Google 的 Material Design 设计规范，提供了丰富的预构建组件，极大地简化了前端开发过程。...本文将深入浅出地介绍 Material-UI 的常见问题、易错点及如何避免这些问题，并附带代码示例，帮助你更好地掌握 Material-UI 的使用技巧。1....Material-UI简介Material-UI 不仅提供了美观的组件，还注重组件的可定制性和灵活性。它支持主题化，使得你可以轻松调整应用的整体外观，而无需从零开始设计界面。2....常见问题与易错点2.1 忽略版本兼容性Material-UI 的版本更新频繁，新版本可能引入了 API 变更或移除了旧组件。...2.2 忽视自定义样式虽然 Material-UI 提供了丰富的预设样式，但在某些场景下，可能需要对组件进行更精细的样式控制。直接修改全局样式可能会导致意料之外的影响。

    1.5K00

    compose--初入compose、资源获取、标准控件与布局

    ，每个组件都可以很方便的重用，这点在UI开发时确实便利了不少。...重组 1.1 安卓传统UI 先来说在安卓传统UI，大致的流程就是xml中我们定义了一系列的布局（组件）和控件后，由Activity的onCreate()触发xml解析，生成View树：DecorView...，实际开发中google也推荐：UI设计从MD2转变为MD3 2.BOM 对于compose的版本管理，官方推荐使用BOM，导入BOM后的好处是：导入compose其他库组，都将使用BOM中定义的版本...Text(text = stringResource(id = R.string.hello)) } 1.3 AnnotatedString 传统UI的TextView，可以通过Span来改变文本的内嵌样式...） 和 ParagraphStyle（点击跳转API） SpanStyle：设置文本的内嵌样式 ParagraphStyle：设置文本的行高，对齐方式，文字方向和文字缩进样式 例子： @Composable

    8.1K30

    Material-UI 从零开始掌握React组件库的设计精髓

    Material Design强调：- 直观的视觉层次结构- 有意义的动画和过渡效果- 跨平台一致的用户体验Material-UI将这些设计理念完美地融入到了React组件中。...有这么几个原因：组件丰富度 - 从基础的按钮、表单到复杂的数据表格、导航栏，应有尽有高度可定制 - 不喜欢默认样式？没问题！...add @mui/material @emotion/react @emotion/styled```注意，Material-UI v5版本使用Emotion作为默认的样式引擎。...上面的代码创建了一个包含标题和按钮的简单界面。你可能注意到了sx属性，这是Material-UI v5引入的一种新的样式API，让我们可以直接在组件上应用样式。...使用styled API创建自定义组件虽然sx属性很方便，但当你需要重复使用某种样式时，创建自定义组件更合理：```jsximport { styled } from '@mui/material/styles

    45410

    「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源

    hyperapp - 用于构建前端应用程序的1kb JavaScript库。 preact - 使用相同的ES6 API快速3kb React替代方案。组件和虚拟DOM。...url-pattern - 比url和其他字符串的正则表达式字符串匹配模式更容易。将字符串转换为数据或数据为字符串。 数字 Numeral-js - 用于格式化和操作数字的JavaScript库。...jQuery-Tags-Input - 使用这个jQuery插件将一个简单的文本输入神奇地转换为一个很酷的标签列表。 vanilla-masker - 纯JavaScript掩码输入。...plupload - 用于处理文件上传的JavaScript API，它支持多文件选择，文件类型过滤，请求分块，客户端图像缩放等功能，并使用不同的运行时来实现此功能，如HTML 5，Silverlight...ECMAScript 6兼容性表 - 适用于各种环境的所有ECMAScript 6功能的兼容性表。 Babel（以前为6to5） - 将ES6 +代码转换为vanilla ES5，没有运行时。

    9.1K21

    「沙里淘金」精选浏览器端JavaScript库资源推荐

    hyperapp - 用于构建前端应用程序的1kb JavaScript库。 preact - 使用相同的ES6 API快速3kb React替代方案。组件和虚拟DOM。...url-pattern - 比url和其他字符串的正则表达式字符串匹配模式更容易。将字符串转换为数据或数据为字符串。 数字 Numeral-js - 用于格式化和操作数字的JavaScript库。...jQuery-Tags-Input - 使用这个jQuery插件将一个简单的文本输入神奇地转换为一个很酷的标签列表。 vanilla-masker - 纯JavaScript掩码输入。...plupload - 用于处理文件上传的JavaScript API，它支持多文件选择，文件类型过滤，请求分块，客户端图像缩放等功能，并使用不同的运行时来实现此功能，如HTML 5，Silverlight...ECMAScript 6兼容性表 - 适用于各种环境的所有ECMAScript 6功能的兼容性表。 Babel（以前为6to5） - 将ES6 +代码转换为vanilla ES5，没有运行时。

    8.2K20

    Bootstrap 4.0重大更新，jQuery4你在哪里

    将所有HTML重置样式表整合到Reboot中：在用不了Normalize.css的地 方可以用Reboot了，它提供了更多选项。...新的自定义选项：不再像上个版本一样，将渐变、淡入淡出、阴影等效 果分放在单独的样式表中。而是将所有选项都移到一个Sass变量中。想 要给全局或考虑不到的角落定义一个默认效果？...使用 rem和em代替px单位，更适合做响应式布局，控制组件大小。如果要支 持IE8，只能继续用Bootstrap 3。 8....改进工具提示和popovers自动定位：这部分要感谢Tether工具的帮助。...三、支持v3 发布Bootstrap 3时，Bootstrap曾放弃了对2.x版本的支持，给很多用户造成了麻烦，同样的错误不会犯第二次。在不久的将来，开发团队还会继续修复v3的bug，改进文档。

    2.1K10

    AngularDart Material Design 选择 顶

    deselectOnActivate bool  如果为true且selectOnActivate为true，则触发此项目组件将取消选择当前选定的值;如果为false，则在选择值时触发此组件将不执行任何操作...此特定样式用于多选菜单项组的材料菜单下拉列表。 value dynamic 此选择项表示的值。...material-dropdown-select组件结合了material-select和material-button-down的API。 当与单个选择模型一起使用时，下拉选择时关闭。...使用声明性API时，不会注入SelectionModel和SelectionOptions，因此将项目标记为选中不是自动的。...组件本身没有弹出窗口，但可用于构建未提供的下拉列表。 对具有相同按钮样式的组件使用material-dropdown-select，并实现下拉列表本身。

    8.9K20

    React PC端框架

    Material-UI 一款React组件库来实现Google的Material Design风格UI界面框架。也是首个React的UI工具集之一。Material-UI 组件是独立工作的。...它们是自我支持的，并只要注入而且仅注入它们需要显示的样式。 他们不依赖任何全局的样式表，如 normalize.css。...Material-UI 3. Semantic-UI-React Semantic-UI-React有极为丰富切漂亮的UI组件库，并且结构化做得非常好。...React版本为官方出版，所有React组件都具有非常简洁的API和简明的属性，并且不依赖与jQuery，操作虚拟DOM提高性能带来更完美的用户体验。 中文文档 | github地址 ?...Amaze UI React 7. React UI React组件库，样式基于bootstrap 4.0。 中文文档 | github地址 ? React UI 8.

    5.3K31

    React UI组件库教程

    一、3个最受欢迎的React UI 组件库1. MUIMaterial-UI 是一个开源的 React 组件库，实现了 Google 的 Material Design。...移动优先的方法： Material-UI 设计为移动优先，这意味着这些组件在任何设备上都会表现出色，从智能手机到桌面设备。...可定制： Material-UI 组件可以轻松定制，以匹配你的品牌指南或应用的设计。可访问性： Material-UI 组件考虑了可访问性，这意味着残障人士也可以使用它们。...专注于状态管理： Headless UI 跟踪组件状态（打开/关闭，选中/未选中等），但将视觉表示完全留给你。3....这使得你的 CSS 代码比传统的 CSS 更容易维护。可组合： 你不必担心手动合并样式。StyleX 可以跨组件和文件边界合并和组合任意样式。类型安全： 它为你的组件提供了一种类型安全的 API。

    1.1K00
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券