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

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

如果实现只允许一个面板被展开,如果另一个面板被展开,折叠这个面板。 当焦点在展开状态的手风琴标题上,如果实现支持折叠,折叠该面板。...Escape: 关闭对话框。 NOTE 当对话框被打开,根据内容的性质和大小放置焦点。 在任何情况下,焦点都应该移动到对话框中的一个元素上。...当一个对话框关闭,焦点返回到唤起该对话框的元素上,除了: 唤起元素不复存在,此时,焦点被设置在逻辑工作流程中的另一个元素上。...Down Arrow: 不打开关闭节点,将焦点移到下一个可聚焦的节点。 Up Arrow: 不打开关闭节点,将焦点移到上一个可聚焦的节点。...每个作为父节点拥有 treeitem 的元素 aria-expanded 设置为 false,当节点处于关闭状态,并设置为 true ,该节点是在打开状态。

4.5K30

腾讯面试官:如何从0到1实现一个高性能Collapse折叠组件,直到现在我还实现不出来

,然后逐步添加更多的功能,手风琴模式、自定义箭头、禁用状态、隐藏是否渲染DOM结构 组件接口定义 Collapse 属性 说明 类型 默认值 accordion 是否开启手风琴模式 boolean...非手风琴模式:string[] - onChange 切换面板触发 手风琴模式:(activeKey: string | null) => void 非手风琴模式:(activeKey: string...在这种模式下,只有一个面板可以被展开。当一个新的面板被展开,之前展开的面板将被关闭。 activeKey:当前展开面板的key。如果我们处于手风琴模式,这将是一个字符串或null。...如果这是一个函数,它将接收一个参数,表示面板是否被展开,并返回一个React节点。 destroyOnClose:如果设置为true,我们将在面板关闭销毁它的内容。...disabled:如果设置为true,我们将禁用面板,使其不能被打开关闭。 forceRender:如果设置为true,我们将在面板关闭仍然渲染它的DOM结构。

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

使用element-ui中table expand展开行控制显示隐藏(手风琴效果)

同样的,toggleRowExpansion方法也支持手风琴效果,点击展开自己的同时关闭原先除自己之外的已打开的展开项,实现手风琴,修改methods→toogleExpand方法: toogleExpand...我们把每行的expand关闭一次,再把对应的行打开,这样就实现了手风琴效果了。...新的问题,当我们点击打开手风琴,每次都至少有一个是打开状态的,这样很明显是bug了,我们做一下让已打开行的expand合闭。...bug原因:当我们点击已打开的expand想关闭,相当于走了一遍$table.toggleRowExpansion(row, false)后,又走了一遍$table.toggleRowExpansion...遍历外层数组,找到除了当前点击的展开项之外的行,关闭除自己之外的已展开项,然后展开或者关闭当前点击的行。

8.4K31

【新手指南】App原型设计:如何快速实现这6种交互效果?

打开右侧交互面板中,左边形状组件的尺寸调整方式设 为默认,右边形状组件的尺寸调整方式设为向左。 最前沿的中国产品人和设计师 摹客专访 Step 6: 交互设置完成,点击按钮即可预览进度条效果。...在我们浏览这些移动端App,最多的操作是什么?对,就是滚动页面。设计师在进行APP原型设计时,如何实现页面的滚动效果?其实,在一个滚动区里放几个组件就解决了?不信?不妨让我们一起看看如何操作吧!...Step 3:编辑若滚动区放不下所展示内容或编辑区过大,可点击下方滚动条”+”“-”进行调整。 Step 4:编辑完成后点击滚动区外部退出,根据演示区域调整滚动区所占区域大小。...下拉菜单的形式多种多样,但最令设计师最头疼的还是手风琴菜单效果。即使是利用功能强大的Axure,想实现该效果也比较麻烦。但是利用Mockplus的“面板”组件,可以快速地做一个手风琴菜单。...面板2,链接到自己,调整的大小。链接到面板3,位移。 c. 面板3,链接到自己,调整大小。 Step 3:交互设置完成,可演示查看手风琴菜单效果。

3.2K40

SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(六)

当前后端分离,权限问题的处理也和我们传统的处理方式有一点差异。...角色展示 角色的展示采用了ElementUI中的Collapse 折叠面板,并且采用了手风琴模式,即一次只打开一个角色,如下图: ?...2.el-collapse-item的内容就是一个树形控件,很明显,树形控件的数量和el-collapse-item的数量是一样多的,但是考虑到el-collapse-item使用了手风琴模式,即一次只有一个折叠面板打开...,因此树形控件的数据源只有一个,即多个树形控件共用一个数据源,为了避免数据紊乱,我采取了这样的数据加载方式:当用户每次点击折叠面板的时候,我都根据当前折叠面板所对应的角色去查询该角色所对应的资源,同时也查询所有的资源

85370

如何设计下拉菜单(技巧+实例)

精确数值 对于精确数值(购物车里的商品数量),可以使用计数器来让用户快速对数字进行增减。 ? 不精确数值 对于不精确的数值,可以使用滑块。 ?...设计下拉菜单需注意: 尽量不要使用交互式下拉菜单 交互式下拉菜单指在同一页面内,用户选中某一菜单中的选项后,另一菜单的选项也会跟着变化。...保留菜单标签/说明 打开下拉菜单,最好是标明菜单标签或说明。菜单标题能有效地提醒用户,他们刚刚选择了什么内容。如果菜单打开后标签消失了,用户就得打断操作、去回忆到底该选择什么选项。...从组件面板中拖出一个下拉选择组件和一个弹出面板,在弹出面板中编辑出下拉菜单的下拉内容,再将弹出面板同下拉选择组件进行拼凑、交互。...用Mockplus还可以做出复杂一些的下拉菜单,手风琴菜单,详细教程见:http://doc.mockplus.cn/?p=3078 ?

2.9K84

【新!超详细】Figma组件属性完全指南

您可以直接从属性面板中选择整个组件并在其中交换层。 何时使用实例交换属性? 当您想在另一个组件中交换组件使用它。例如,当您有一个按钮,您可以通过属性面板更改按钮内部的图标。 目前,无法交换变体。...文本属性 text 属性允许您从属性面板编辑文本层。您无需单击组件内的文本层即可更改文本。选择组件,您可以直接从属性面板编辑文本。 何时使用文本属性? 设置组件变体,无需单击文本图层即可更改文本。...例如,创建一个具有不同状态(启用、悬停和禁用)的按钮。 还有一件事,如果你想使用交互式组件,你必须使用变体。 如何在 Figma 中添加属性? 第一步,您需要创建一个组件。...更改列表中的变体顺序 当您单击一个实例并想要更改变体,您希望它按字母顺序排列,或者最流行的变体在顶部。 在变体行上,单击详细信息图标。在打开的窗口中,拖放变体。...属性列表 如果您有一个具有布尔值和另一个属性的组件,请对属性列表进行排序,布尔值位于顶部,然后是其他属性。当您将布尔值切换为关闭另一个属性会消失并且列表会移动。

10.9K22

我是如何黑掉惠普打印机的?

注:所有的安装步骤都是按照惠普说明手册安装的 信息泄漏 我在HP打印机的本地IP上运行了nmap,并得到了一些有趣的结论,在我看来,当任何本地网络用户连接在同一网络,他们的网络信息就会被泄漏,你可以在...HP今后也将致力于衡量和平衡如何在限制信息不被泄露的情况下又能保证提供给用户所需要的重要信息。...管理面板访问和错误的密码加密类型 另一个主要的问题是管理员控制面板默认用户名名没有设置密码,在我看来是很糟糕的安全策略。...,你需要保持打印机处于忙碌状态直到你关闭远程登录会话,以防止其它用户使用打印机。...HP声称:通过Windows 标准的TCP / IP端口监视器要求9100端口在默认情况下打开是设定好的,而其他端口,9101和9102则被用于诊断和发现故障的目的,并没有提供有用的数据。

1.7K50

高颜值在线绘图平台ImageGP系列教程 - 参数介绍

第五部分是 更多参数 Cluster parameters, Data preprocess, Layout等。...每个手风琴里面有更多参数可以设置,如果该手风琴里面有必选参数,通常是打开的;如果没有必选参数,默认是收起的。...如果必选或必填参数为空,则不能提交;或提交也会弹出信息,不允许提交。 参数后面都有一个符号 (i),鼠标放上去后会悬浮显示这个参数的解释。这是了解这个参数的关键信息。...热图聚类,如果没有选要做聚类、则聚类方法、距离计算方法不可选,选了也没用。看到一个参数不可用,如果不知道是做啥的或用不到,就可以大胆的忽略。如果想用,却发现用不了,就要找下其相关参数有没有设置。...选择颜色集合和自定义取色两个只有一个处于可选状态,清空一个选项,另一个选项即可用。 1.4 数据格式效验 数据格式效验主要包括几个内容: 数据矩阵的列分割符是否为单个TAB键。

1.2K40

windows关闭端口方法「建议收藏」

关闭端口 比如在Windows 2000/XP中关闭SMTP服务的25端口,可以这样做:首先打开“控制面板”,双击“管理工具”,再双击“服务”。...为了让你的系统变为铜墙铁壁,应该封闭这些端口,主要有:TCP 135、139、445、593、1025 端口和 UDP 135、137、138、445 端口,一些流行病毒的后门端口( TCP 2745...下面介绍如何在WinXP/2000/2003下关闭这些网络端口: 方法一:“本地安全策略“中关闭 第一步,点击“开始”菜单/设置/控制面板/管理工具,双击打开“本地安全策略”,选中“IP 安全策略,在本地计算机...方法二:防火墙关闭端口方法 1、在任务栏右端的网络连接图标处右键单击-打开网络和共享中心,弹出的面板里面左侧下找到windows防火墙; 2、开始-控制面板-windows防火墙。...3、击左侧的“高级设置”,打开防火墙的控制面板。 4、点击防火墙控制面板左侧的“高级设置”打开防火墙高级设置面板。 5、点击左侧的“入站规则”,拖曳下方的滑块,即可查看到各个端口的状态。

17K21

Jump Start Bootstrap 第4章

在这里,请求是打开关闭下拉菜单。 让我展示一个如何使用这些事件的例子。我已经写了下面的JQuery代码片段去监听所有的下拉插件状态,并打印每个事件触发的状态。 <!...) 折叠插件被广泛地称为Web上的“手风琴”插件。...它是一个插入多个垂直堆叠标签的插件,但同一间只能打开一个标签。 在Bootstrap中,通过将多个面板组件组合在一个容器中来创建Collapse。我们在最近一章看到了如何创建一个面板。...Bootstrap也给Collapse插件附加了四个自定义事件: show.bs.collapse: 即将打开选项卡触发 shown.bs.collapse: 打开选项卡后触发 hide.bs.collapse...当设置为“静态”,当在模态主体外的任何地方点击,模式对话框不会关闭。 keyboard属性用于启用或禁用键盘的escape键功能,当设置为false,Esc键不会关闭模式对话框。

28.3K40

记一个“奇葩”需求的实现

2、需求: 导航菜单(el-menu组件)竖向展示的 鼠标移入一级菜单展示下面的子菜单,移出则收起来(手风琴模式,正常状态下只保持一个菜单处于展开状态,手动鼠标悬浮展开的不算) 选中某个子菜单高亮对应的一级菜单...,并且当鼠标移出高亮的这个菜单模块不折叠,但是可以点击一级菜单进行折叠(注意:跟第一条有区别) 3、问题: element-ui的导航组件子菜单打开的触发方式可以通过 menu-trigger...close方法关闭。...// 登录系统的时候,记录展开的菜单信息, // 在 mounted 里面获取 openedMenus ,并记录信息 mounted() { // 获取当前展开的菜单 - array // 手风琴模式...,再打开新的 this.

69410

怎么提高苹果电脑系统运行速度?CleanMyMac X2023

确保“更改图片”选项已关闭。对于老款MAC电脑的另一个建议是关闭一些视觉动画。当然,它们看起来很漂亮,但是当你的系统陷入停顿时,谁会在乎呢?肯定不是当时用Mac的人。...您的偏好设置面板中的项目太多偏好设置面板是存放系统widgets和macOS实用工具的地方。许多第三方应用程序会将自己的widgets添加到您的系统偏好设置中。这给macOS带来了额外的负担。...缩小您的偏好面板前往Apple标志3E系统偏好设置浏览窗口底部的小部件列表。按住Control键点按您想要删除的项目,并确认删除。删除启动项:最快的方法启动项目是在您启动Mac自动启动的应用程序。...它正在升温,并试图告诉你,你应该选择一些你真正需要的应用程序,关闭其余的应用程序。关闭占用大量内存的应用程序来加速macOS当你的Mac由于应用程序过载而运行缓慢,你需要找到导致问题的原因。...如何在Mac上停用通知: 打开您的系统偏好设置 点击通知和焦点浏览列表并选择一个应用程序。关闭右边菜单中的“允许通知”。你的硬件是旧的我们终于到了硬件部分。

1.4K30

【说站】宝塔面板如何添加免费的waf防火墙?

在宝塔面板后期的版本6.X、7.X中,阉割了很多功能,但宝塔面板还是编译了ngx_lua_waf模块,品自行今天主要说一下如何在宝塔面板7.8.0中开启隐藏的nginx防火墙waf防火墙。...第一步:Nginx配置修改 1、打开宝塔面板打开左侧“软件商店”,在“已安装”下面找到Nginx,点击后面的“设置”》“配置修改”; 2、找到大约在第 25 行的 #include luawaf.conf...打开面板的文件管理,进入 /www/server/nginx/waf 目录,里面的 config.lua 文件就是防火墙的配置文件。...RulePath=”/www/server/panel/vhost/wafconf/”–waf 详细规则存放目录(一般无需修改) attacklog =“on”–是否开启攻击日志记录(on 代表开启,off 代表关闭...:{“后缀名1”,“后缀名2”,“后缀名3”……} ipWhitelist={“127.0.0.1”}–白名单 IP,如有多个则用英文逗号分隔。

2K20

Adobe Premiere Pro 2021【PR 2022简体中文版】免费激活版下载PR2023安装教程

在您工作,项目知识兔文件会记录您的所有编辑决定,例知识兔修建剪辑的入点和出点和各个效果的参数。编辑的应用是非破坏性的,知识兔这意味着Premiere Pro不会更改源文件。...Premiere Pro的Windows版本可知识兔以打开使用早期版本Premiere Pro创建的项目文件。一次只能知识兔打开一个项目。要将一个项目的内容传递到另一个项目,请使用“导入”命令。...即使在您处理项知识兔目,也可以打开现有的Premiere Pro项目或创建另一个P知识兔remiere Pro项目。...当您有多个打开的项目,在关闭知识兔每个已更改的项目之前,可以看到此类消息:保存对“Project_X.pr知识兔proj”所做的更改。您可以在不同项知识兔目之间拖动媒体或序列。...关闭任意项目,将工知识兔作区保存在其中,但在关闭前移除“项目”面板和“时间轴”面板。知识兔这是为了确保当您再次打开知识兔项目,不会打开额外的“项目”或“时间轴知识兔”面板

2K20

Chrome 120 有哪些值得关注的更新?

当用户发送一个关闭请求,比如按下 Esc 键或者安卓的返回键,CloseWatcher 会触发一个 onclose 事件。开发者可以通过监听这个事件,来处理用户的关闭请求。...,例如按Esc键或者安卓的返回键'); }; // 当你不再需要CloseWatcher,你可以销毁它 watcher.destroy(); // 如果你想在用户试图关闭某个对话框弹出一个确认对话框...新增 name 属性 元素新增了一个 name属性,可以为我们轻松的创建手风琴效果(accordion pattern)。...它支持将多个 元素通过相同的 name 属性值串联在一起形成一个组,使得在一个组内最多只能有一个元素处于打开的状态。...换句话说,在一个组内,一旦一个 元素被打开,其他所有 元素都会被关闭

38710

如何关闭笔记本小键盘_笔记本电脑怎么关键盘灯光

2016-12-08 15:00:40 您使用下面两个方法,都可以用来关闭触摸板:(1)请您“双击”触摸板左上角位置的小圆点,当指示灯为橙色,表示触摸板关闭。...能打开就能关闭。通过Fn键组成的快捷键就可以关闭数字键盘。...2016-11-25 16:30:52 这个我也遇到过,提示的关闭方法全部不管用, 建议试一下 控制面板-鼠标-关掉触摸版驱动右键我的电脑-设备管理器-鼠标类下的两个硬件,关掉一个看是否管用,否则关另一个...2016-12-13 14:05:42 禁用触控板打开控制面板,双击打开“鼠标”选项,打开“装置设定值”选项,点击“禁用”,确定即可。...发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

2.2K10
领券