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

【译】W3C WAI-ARIA最佳实践 -- 控件

当一个对话框关闭,焦点返回到唤起该对话框的元素上,除了: 唤起元素不复存在,此时,焦点被设置逻辑工作流程另一个元素上。...多选:开发者可以实现以下两种交互模型的一种来支持多项选择:一个是推荐模型,当导航列表不需要用户按住修饰键,例如 Shift 或Control ,或一种替代模型,当导航需要用户按住修饰键,防止丢失选择状态...例如,使用树视图显示文件夹和文件的文件系统导航,代表文件夹的项目能够被展开文件夹的内容,这些内容可能是文件、文件夹,或两者都有。 理解的树视图的一些术语包括: 节点 树结构的项目。...多选树中选择:作者可使用以下两种交互模式以支持多选:推荐的模式,用户正在浏览列表不要求用户按住辅助键,如 Shift 或 Control ,或另一种模式,当浏览要求按住辅助键,以避免丢失选择状态。...每个作为父节点拥有 treeitem 的元素 aria-expanded 设置为 false,当节点处于关闭状态,并设置为 true ,该节点是在打开状态

4.4K30

使用 CSS Checkbox Hack 技术制作一个手风琴组件

1、创建 HTML 标记结构 本练习,我们从维基百科找一些四种不同类型的内容介绍:动物、植物、空间和河流。...,我们应该默认第一个选项卡的内容出于展示状态,其它选项卡隐藏,这里我们先让所有的选项卡默认隐藏,后面我们会使用 Checkbox Hack 让选中选项卡内容处于展示状态。...示例代码如下: 3、Checkbox Hack: 切换选型内容 这部分代码就像变魔法一般,当我们点击每个标题选型卡内容就响应显示相关内容,这里我们使用了 :checked 伪类,以及结合 CSS的后续同胞选择器...同时为了让用户区分选中了哪个选项卡,我们需要定义选项卡出于选中状态的标题颜色。...但是为了确保没有足够内容支撑,手风琴效果不走样,我们需要进行一些样式上的特殊处理,效果如下图所示: 我们需要在每个当前选中状态选项卡里添加flex-grow: 1属性,并不是所有的选项卡,让当前选中选项卡里占据所有剩余宽度

5.3K30
您找到你想要的搜索结果了吗?
是的
没有找到

React Navigation 3x系列教程』createMaterialTopTabNavigator开发指南

path(可选):用来设置支持schema跳转使用,具体使用会在下文的有关Schema章节中讲到; navigationOptions(可选):用以配置全局的屏幕导航选项如:title、headerRight...tabBarOptions(tab配置) activeTintColor: 设置TabBar选中状态下的标签和图标的颜色; inactiveTintColor: 设置TabBar非选中状态下的标签和图标的颜色...如果您没有选项卡的标签,建议设置此项; tabBarTestID:用于测试中找到该选项卡按钮的 ID; 【案例1】使用createMaterialTopTabNavigator做界面导航、配置navigationOptions...Page3的时候传递了参数{ name: 'Devio' }; 【高级案例】react-navigation的高级应用 使用react-navigation往往有些需求通过简单的配置是无法完成的...大家在学习使用React Navigation3x过程遇到任何问题都可以React Navigation3x的视频教程寻找答案哈。

12.6K20

使用 CSS Checkbox Hack 技术纯手工撸一个手风琴组件

最后我们来定义选项卡内容文本的内容样式,我们应该默认第一个选项卡的内容处于展示状态,其它选项卡隐藏,这里我们先让所有的选项卡默认隐藏,后面我们会使用 Checkbox Hack 技巧让选中选项卡内容处于显示状态...3、Checkbox Hack: 切换选项内容 这部分代码就如同变魔法一般,当我们点击每个标题选项卡就会显示对应相关的内容,这里我们使用了 :checked 伪类,以及结合 CSS的后续同胞选择器(~...同时为了让用户区分选中了哪个选项卡,我们需要定义处理选项卡处于选中状态对应的标题颜色。...5、处理内容有限的情况 我们的案例,每个选项卡的内容都很多,看起来很漂亮。但是为了确保没有足够内容支撑,手风琴效果不走样,我们需要进行一些样式上的特殊处理,效果如下图所示: ?...我们需要在每个当前选中状态选项卡里添加 flex-grow: 1 属性,并不是所有的选项卡都添加这个属性,只是让当前选中选项卡占据所有剩余宽度。

3.2K20

Jump Start Bootstrap 第4章

这两种使用插件的方式,我们都将讨论,你可以选择最适合你的。 本章将使用的全部插件都包含在文件bootstrap.js或bootstrap.min.js。...上一章,导航栏只包含一个简单的链接列表。本节,我们将使用一些Bootstrap的JavaScript插件帮助扩展我们网站现有组件的功能。... 在这代码,我使用类btn、btn-lg、btn-default创建了一个大的灰色按钮,它正好处于inactive状态当我们点击它,Bootstrap将在按钮上添加类active。...选项卡窗格的数量应该等于显示导航的链接数。nav-tabs包裹的一个元素添加一个类”active”,将使它成为默认选项卡。 就是这样!你有了一个可以工作的选项卡插件。...当使用Bootstrap,您应该始终使用内置的插件,避免编写自定义插件。

28.3K40

Material Design —Tabs

点击菜单“book”后的tab bar ? 带有滚动标页码的tab bar ? 选中tab bar 何时使用 例如,使用选项卡组织高级别的内容,以呈现报纸的不同部分。...这些使用案例涉及查看内容,而不是在内容组之间进行导航。 有关使用制表符导航顶层视图的更多详细信息,请参阅导航 - 模式的“制表符”。...请勿使用包含支持滑动手势的内容的选项卡,因为滑动手势用于选项卡之间进行导航。 例如,避免在内容可平移的地图中使用选项卡,或者避免滑动内容的情况下使用可以取消项目的列表。...选择文字标签,请使用简短的标题。 避免对内容进行交叉标签比较的需要。 重要的跨标签比较可能表明内容将从不同的组织方式或展示方式获益,从而使内容更接近。 ?...当用户不需要直接比较选项卡标签,可滚动选项卡最适合用于浏览触摸界面的上下文。 要在可滚动选项卡之间导航,请触摸选项卡或向左或向右滑动内容区域。

2.4K100

Banber V2.9.3更新:弹窗、预警、全新组件不容错过

01 蒙版弹窗及悬浮弹窗 动作属性,新增蒙版弹窗及悬浮弹窗。 ? 蒙版弹窗——弹窗打开后,整体灰色蒙版覆盖页面(点击右上角关闭按钮或点击屏幕任意位置,可关闭弹窗) ?...02 Tab选项卡组件 原先实现网页切换,我们会用导航/切换+网页组件来实现,现在一个Tab选项卡就搞定啦,还可以自定义选项卡默认、选中、悬浮的颜色,让我们来看看他们的区别: 1....导航/切换+网页组件需要设置参数并传参,Tab选项卡组件只需选择相应的子页面; ? ? 导航/切换+网页组件设置 ? Tab选项卡组件设置 2....对于如选择器这样的多选组件,可自定义默认选中状态选择默认第一个,或使用参数默认值。 ?...弹窗播放及缩回窗口 08 表格选中、文字超出、预警设置 表格新增文字预警功能,可设置预警规则;自定义选中字体颜色及背景颜色;同时可勾选文本超出省略。 ? 数字预警 ? 选中状态设置 ?

2K80

最全Excel 快捷键总结,告别鼠标!

(特别重要) Ctrl+F:显示“查找和替换”对话框,其中的“查找”选项卡处于选中状态。(特别重要) Ctrl+H:显示“查找和替换”对话框,其中的“替换”选项卡处于选中状态。...当功能区处于选中状态,按向左键或向右键可选择左边或右边的选项卡。当子菜单处于打开或选中状态,按这些箭头键可在主菜单和子菜单之间切换。当功能区选项卡处于选中状态,按这些键可导航选项卡按钮。...当菜单或子菜单处于打开状态,按向下键或向上键可选择下一个或上一个命令。当功能区选项卡处于选中状态,按这些键可向上或向下导航选项卡组。...当 Scroll Lock 处于开启状态,移到窗口左上角的单元格。 当菜单或子菜单处于可见状态选择菜单上的第一个命令。 按 Ctrl+Home 可移到工作表的开头。...End 如果单元格为空,请按 End 之后按箭头键来移至该行或该列的最后一个单元格。 当菜单或子菜单处于可见状态,End 也可选择菜单上的最后一个命令。

7.2K60

最新iOS设计规范三|3大界面要素:栏(Bars)

搜索栏可以单独显示,也可以显示导航栏或内容视图中。当显示导航,可以将搜索栏固定在导航,以便始终可以调用。也可以将其折叠,当用户向上滑动展开显示。...状态显示的实际信息取决于设备和系统配置。 使用系统提供的状态栏。用户期望状态系统范围内保持一致,所以不要用自定义状态栏替换它。 ? 选择样式相协调的状态栏。...仅包括基本选项卡,并使用信息层次结构所需的最少数量的选项卡。通常,iPhone上使用三到五个标签;如果需要,iPad上可以接受更多一些。 当人们导航到您应用的其他区域,请不要隐藏标签栏。...确保所有选项卡始终处于启用状态,并说明为什么选项卡内容不可用。例如,如果iOS设备上没有歌曲,则“音乐”应用的“立即收听”选项卡将说明如何下载歌曲。 始终附加视图中切换上下文。...为了使您的界面具有可预测性,选择一个选项卡始终影响直接连接到选项卡栏的视图,而不影响屏幕上其他位置的视图。例如,拆分视图的左侧选择一个选项卡不应导致拆分视图的右侧突然改变。

9.8K10

python测试开发django-153.bootstrap导航-标签页切换(nav-tabs)

前言 Bootstrap 导航组件都依赖同一个 .nav 类,状态类也是共用的。标签页.nav-tabs 类依赖 .nav 基类。...tab标签页 标签 ul 添加 nav 和 nav-tabs 属性,将应用Bootstrap标签样式。...li 里面 a 标签上简单的指定 data-toggle=”tab” 或 data-toggle=”pill”,就可以完成一个标签导航页 <ul id="tabs" class="nav nav-tabs...content }) 如果<em>使用</em>javascript实现这种<em>导航</em>内容的切换,a标签<em>中</em>无须再添加data-toggle=’tab’或data-toggle=”pill”,如果每个a链接都<em>使用</em>了此属性...淡入淡出效果fade 要使<em>选项卡</em>淡入,请添加.fade到每个.tab-pane. <em>第一个</em><em>选项卡</em>窗格还必须.in使初始内容可见。

1.1K30

【Flutter】StatefulWidget 组件 ( FloatingActionButton 组件 | RefreshIndicator 组件 )

组件是悬浮按钮组件 ; FloatingActionButton 组件常用设置 : 点击事件 : onPressed ; 显示组件 : child ; FloatingActionButton 构造函数源码 : 构造函数的可选参数...组件会自动更新当前选中选项卡 setState(() { // 改变 int _currentSelectedIndex 变量的状态...ms , 使用 await 关键字实现 // 在这 500 ms 之间 , 列表处于刷新状态 // 500 ms 之后 , 列表变为非刷新状态 await Future.delayed...组件会自动更新当前选中选项卡 setState(() { // 改变 int _currentSelectedIndex 变量的状态...之间 , 列表处于刷新状态 // 500 ms 之后 , 列表变为非刷新状态 await Future.delayed(Duration(milliseconds: 500));

2.6K00

React Navigation 3x系列教程』createBottomTabNavigator开发指南

path(可选):用来设置支持schema跳转使用,具体使用会在下文的有关Schema章节中讲到; navigationOptions(可选):用以配置全局的屏幕导航选项如:title、headerRight...tabBarOptions(tab配置) activeTintColor: 设置TabBar选中状态下的标签和图标的颜色; inactiveTintColor: 设置TabBar非选中状态下的标签和图标的颜色...如果您没有选项卡的标签,建议设置此项; tabBarTestID:用于测试中找到该选项卡按钮的 ID; 提示:和本文配套的还有一个React Navigation3x的视频教程,欢迎学习。...【高级案例】react-navigation的高级应用 使用react-navigation往往有些需求通过简单的配置是无法完成的,比如: 动态配置createBottomTabNavigator:...大家在学习使用React Navigation3x过程遇到任何问题都可以React Navigation3x的视频教程寻找答案哈。

7K30

【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )

底部导航选中状态切换代码示例 五、BottomNavigationBar 底部导航栏切换选项卡界面 六、 相关资源 一、BottomNavigationBar 组件 ---- BottomNavigationBar...: _currentSelectedIndex, ) 设置 BottomNavigationBar 组件的 onTap 回调事件 , 传入一个匿名回调函数 , 该匿名方法回调 StatefulWidget...组件的 setState 设置状态的方法 , 修改当前选中索引 , 之后 BottomNavigationBar 组件会自动更新当前选中选项卡 ; // 底部导航栏 BottomNavigationBar...---- BottomNavigationBar 底部导航栏的 onTap 回调方法 , 设置当前选中选项卡索引 , 根据该索引值修改 Scaffold 组件的 body 对应组件 , 如果选项卡索引为...0 , 显示组件 0 , 如果选项卡索引为 1 , 那么显示组件 1 ; 设置 body 字段值 , 根据当前的被中选的选项卡索引值 , 判断应该显示哪个组件 ; body: _currentSelectedIndex

2.2K00

手把手教你如何自定义 React Native 底部导航

我们将导入 screens 并使用createBottomTabNavigator 创建默认选项卡导航器。...默认标签栏支持图标,我们将在本教程中使用 ascii 字符,当然实际应用可以使用 react-native-vector-icons 或自定义图标字体。...我们 router.js 更改 screens ,以接受带有navigationOptions 配置的对象。默认选项卡栏将 tintColor 传递给图标组件,因此我们使用它来设置图标颜色。...此外,我们还注意到我们路由器配置 tabBarOptions 是如何被注入到组件的。 现在重新编写 TabBar 组件。首先,让我们尝试重新创建默认选项卡栏。...例如,当前的实现假设选项卡导航总会有 4 个 Screen,聚光灯颜色选项卡栏组件是写死。

7.5K20

【Flutter】Flutter 布局组件 ( 布局组件简介 | Row 组件 | Column 组件 | SizedBox 组件 | ClipOval 组件 )

, 设置其对应的 children: [] 即可 , 括号 [] 是多个组件的集合 , 使用逗号隔开 ; 示例代码 : // 水平方向排列的线性布局 Row( children: <Widget...组件会自动更新当前选中选项卡 setState(() { // 改变 int _currentSelectedIndex 变量的状态...: 三目运算符 ), ); } /// RefreshIndicator 发生下拉操作, 回调该方法 /// 该方啊是一个异步方法 , 方法体前添加 async 关键字...之间 , 列表处于刷新状态 // 500 ms 之后 , 列表变为非刷新状态 await Future.delayed(Duration(milliseconds: 500));...return null; } } 运行效果展示 : 第二行的整体布局放在 Row 组件 , 横向布局中放置了两个组件 , 第一个 Image 组件显示原始图片 , 第二个组件是经过 SizedBox

2.3K00

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

要在另一个脚本中使用代码,请使用该require函数从另一个脚本加载导出。...当拥有 Earth Engine 帐户的人访问 URL ,浏览器将导航到代码编辑器并复制创建链接的环境,包括代码、导入、地图图层和地图位置。单击“获取链接”按钮将自动将脚本链接复制到剪贴板。...请注意以下两个 URL 的结尾,第一个将debug变量设置为 false ,第二个将其设置为true; 访问这两个链接并注意控制台中的调试复选框在第一个没有被选中,而在第二个中被选中,改变了每个脚本的行为...当检查器选项卡被激活,光标变成一个十字准线,当您单击地图,它将显示光标下的位置和图层值。例如,图显示了Inspector选项卡单击地图的结果 。...控制台选项卡 当您print()从脚本获取某些内容,例如文本、对象或图表,结果将显示Console 。控制台是交互式的,因此您可以展开打印对象以获取有关它们的更多详细信息。

89510
领券