文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

AngularDart Material Design 单选按钮 顶

Attributes: no-ink - 设置此属性以禁用芯片上的涟漪效应。 Inputs: checked bool  是否应该预先选择按钮。...MaterialRadioGroupComponent Selector: 包含多个材质单选按钮的组，强制选择组中只有一个值。...在组级别预选值是通过托管区域完成的，因此如果可以将其设置为按钮级别，请执行此操作。...每个辅助功能指南： SPACE选择 箭头键将焦点移至下一个/上一个选项并选择它 CTL +箭头键无需选择即可移动焦点 当使用箭头导航时，焦点将环绕到第一个/最后一个选项 当使用TAB导航时，如果未选择任何内容...，焦点将转到未被禁用的第一个或最后一个选项，具体取决于方向，否则焦点将转到所选内容（除非禁用，然后完全跳过组）;并在第二个选项卡上跳出组。

3.4K20

单选按钮的用户体验设计

4、通常给一个默认选项 UI设计的十原则之一告诉我们用户应该能够取消或重做他们的行为。这意味着通过UI控制应该能够让用户会到初始状态。在单选按钮的情况下，这意味着单选按钮应该预先选择一个选项。...为用户提供一个明确的,中立的默认选项比要求的内隐行为不是从列表中选择要好。 5、设法让你的选项列表垂直排列 横向单选按钮有时很难浏览和布局。...7、使用单选按钮而不是下拉列表 如果可能，就使用单选按钮而不是下拉列表。单选按钮认知成本低因为它把所有选项可见从而让用户很容易比较选择。 如果你的选择项少于7个，你应该考虑使用单选按钮。...在例子中，选项是对立的因此使用单选按钮是更好的方案。 设置向导。你应该在向导页面上使用单选按钮使选项明确,即使一个复选框也是可以接受的。一个有默认值的单选设计恩狗给用户一个很好的建议。...默认选项可能引导用户做出最好的决定，并提升它们在草错过程中的信心。 简单的是或否的答案。当你有一个简单的问题而用户只需回答是或否的时候，使用复选框还是正确无误的。

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

    后台系统设计（上篇：选择）

    习惯用法是遵循互联网产品中的一些默认处理方式，例如，注册中的同意条款就是使用复选框。...·列表提供全选和多选操作，以便用户能够在列表间移动大量选项。 ·实时显示当前被选中列表/ 「源」 列表的数量比及 「目的」 列表的数量。 ·若列表框内容大于视窗高度，列表框的高度为：N列表+½列表。...最佳用法 ·在较小的空间下，对多个选项进行选择或内容较为次要且不需要一直显示时，下拉菜单是不错的选择。若选项较少，考虑使用单选框（当进行单项选择时）或复选框（当进行多项选择时）。...·如果没有预先选择，使用占位符（灰色文本）进行操作提示。例如：请选择。如果需要指出所有项目都适用，例如，作为列表过滤器，请将「全部」 作为选项，并将其放置在列表的开头。 ?...关于下拉搜索 下拉搜索有两种情况，下拉单选和下拉多选的情况。 ·在单选情况下，我们将搜索放在了原有的框体内，流程如下：用户输入关键字>实时匹配检索出选项>用户点击选项>完成操作。 ?

    9.8K21

    180多个Web应用程序测试示例测试用例

    31.第一个和最后一个位置为空白的输入数据应正确处理。 GUI和可用性测试方案 1.页面上的所有字段（例如，文本框，单选选项，下拉列表）应正确对齐。 2.除非另有说明，否则数值应正确对齐。...14.默认的单选选项应在页面加载时预先选择。 15.特定领域和页面级别的帮助消息应该可用。 16.如果出现错误，请检查是否突出显示了正确的字段。...25.用户应该只能选择一个单选选项以及复选框的任意组合。 筛选条件的测试方案 1.用户应该能够使用页面上的所有参数过滤结果。...3.检查页面上是否有任何具有默认焦点的字段（通常，焦点应设置在屏幕的第一个输入字段上）。 4.在关闭父窗口/打开器窗口时，检查子窗口是否已关闭。...18.检查单选按钮和下拉列表选项是否正确保存在数据库中。 19.检查数据库字段的设计是否具有正确的数据类型和数据长度。 20.检查所有表约束（例如主键，外键等）是否正确实现。

    8.3K21

    通过Knockout.js + ASP.NET Web API构建一个简单的CRUD应用

    不过客户对“用户体验”的要求是“与日俱增”的，很多被“惯坏了”的用户已经不能忍受Postback带来的页面刷新，所以Ajax在企业级Web应用中得到了广泛的应用。...一、一个简单的基于CRUD的Web应用 在《通过ASP.NET Web API + JQuery创建一个简单的Web应用》中，我采用jQuery + ASP.NET Web API构建了一个单纯的对单一数据进行...CRUD操作的应用，对于数据在界面上的呈现，我是通过jQuery 动态生成HTML的方式实现的。...现在我们通过Knockout.js来进行数据绑定，你会发现我们代码会变得很优雅。 这个简单的Demo应用用于模拟“联系人管理”。当页面加载的时候，所有的联系人列表被列出来。...在同一个页面中，我们可以添加一个新的联系人，也可以修改和删除现有联系人信息。整个应用唯一的页面在浏览器中的呈现效果如下图所示。 ?

    1.2K90

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

    允许选择一个选项的列表框是一个单选列表框;允许选择多个选项的列表框是一个多选列表框。 当屏幕阅读器呈现一个列表框，可能会渲染出其名称、状态和每个选项在列表中的位置。...在这种情况下，最好有2个列表框，一个用于国家，一个用于城市。 键盘交互 对于一个垂直向的列表框： 当一个单选列表框接收到焦点： 如果在列表框接收焦点前，没有选择任何选项，第一个选项获得焦点。...当一个多选列表框接收到焦点： 如果列表框接收焦点之前没有选择任何选项，焦点设置在第一个选项并且选择状态不会自动改变。 如果列表框接收焦点之前选择一个或多个选项，焦点设置在已选择选项的第一个。...Down Arrow: 移动焦点到上一个选项。可选地，在一个单选列表框中，选择也可以跟随焦点移动。 Up Arrow: 将焦点移到前一个选项。通常，一个单选列表框，选择也可以跟随焦点移动。...Home (可选地): 将焦点移到第一个选项。通常，一个单选列表框，选择也可以跟随焦点移动。对于超过5个选项的列表，强烈建议支持此键。 End (可选地): 将焦点移到最后一个选项。

    4.6K30

    记一次Radio组件的小坑体验

    一、坑的发现 最近在使用tdesign-vue-next开发时，遇到了一个问题。 RadioGroup Prop 中有这么个属性 **options**(单选组件按钮形式。...TS 类型：Array) 此处引用官方文档Radio 单选框 通过options可以快速的生成radio而无需再使用v-for，而第一个坑就出来了，这个options生成的是radio...再设置variant属性后，会得到一个奇怪的**选择组**（如下图） [奇怪的选择组] 个人希望可以在后面的版本中检测variant属性，自动生成radio-button 于是为了得到radio-button...二、解决办法 既然是值更新的问题，那就调整一下赋值的顺序就好了。 执行顺序： 1.赋值给选项列表。 2.赋值给选定的值。...三、小结 对于vue3和tdesign-vue-next来说还是不熟悉，以上是我的一些小小总结，如果大佬有更好解决办法或是此问题发生的原因，欢迎在评论区指正。

    1.5K00

    AWT常用组件

    作为同一组的多个单选按钮组件是互斥的，即每一时刻只能有一个组件的状态为“true”，从而实现单项选择。 在AWT中，单选按钮对象的创建也是通过 Checkbox类实例化的。...（Choice） 下拉列表是一种输入信息的组件，带有一系列选项，每次可以从中选择一项作为输入，即支持单选。...AWT中的类 Choice 实例化得到下拉列表组件，它的构造方法 Choice()创建一个没有任何选项的空白下拉菜单。...列表将所有选项罗列和显示在列表框中，比下拉列表更加直观。 AWT的List 类实例化列表组件，提供多个文本选项，支持滚动条。...addItem(String , int) 在指定位置加入一个选项 void addltem (String) 向列表末尾加入一个选项 void select(String) 选择指定字符串的选项

    10010

    Python 学习之 Tkinter「下」

    开始正文： 列表框控件：可以包含一个或者多个文本框。作用：在 ListBox 控件的小窗口显示项目列表 注意 selectmode 几种方式的区别: 1.BROWSE:通常，只能从列表框中选择一行。...Menu 控件 I # 菜单条 menuBar = tkinter.Menu(win) win.config(menu=menuBar) # 创建一个菜单选项 menu1 = tkinter.Menu...(menuBar, tearoff=True) # 给菜单选项添加内容 for i in ["C", "C++", "Java", "Python", "PHP", "JS", "C#", "Mysql...["white", "black", "red", "green", "blue", "yellow", "pink"]: menu2.add_command(label=i) # 向菜单条中添加菜单选项...Python 学习之 Tkinter「上 」 用Python获取公众号评论并生成词云图证明抖音无罪 Python抓取公众号文章并生成pdf文件保存到本地 用Python抓取某大V的公众号文章 抓取得到

    2.2K20

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

    三态复选框的一种常见使用场景是在软件安装时，一个单独的三态复选框用来代表和控制整个安装选项组的状态。并且，该组中的每个选项都可以单独使用双态复选框开启或关闭。...取消选中整体复选框，可以取消选中组中的所有选项。 并且，在某些实现中，系统可能会记住上次选中的选项，整体状态为部分选中。如果提供了此功能，第三次激活整体复选框会恢复选项组中部分被选中的状态。...如果没有被选中的单选按钮，那么将焦点设置在第一个单选按钮上。 Space: 如果该按钮还没有被选中，则选中当前聚焦的单选按钮。...在某些浏览器中，如果没有选中任何一个单选按钮，使用 Shift+ Tab 将焦点移动到单选按钮组，焦点将会被放置在最后一个单选按钮，而不是第一个单选按钮。...例如，如果把快捷键 Alt+U 分配给“向上”按钮，该按钮会将当前聚焦的列表项目移动到列表中的较高位置，当焦点在列表中时，按 Alt+U 将焦点移出列表。

    8.3K30

    软件测试|软件测试|超好用超简单的Python GUI库——tkinter（八）

    Listbox控件列表框，即 Listbox。在使用 Tkinter 进行 GUI 编程的过程中，如果需要用户自己进行选择时就可以使用列表框控件。...列表框中的选项可以是多个条目，也可以是单个唯一条目，但常用于多个条目。...selectmode决定选择的模式，tk 提供了四种不同的选择模式，分别是："single"（单选）、"browse"（也是单选，但拖动鼠标或通过方向键可以直接改变选项）、"multiple"（多选）和...: listbox1.insert(i,item)# 显示窗口win.mainloop()生成的窗口如下：图片除了上述使用 enumerate() 来实现选项插入的方法外，我们还可以使用 "end...= BOTTOM)# 显示窗口win.mainloop()程序运行结果，如下所示：图片StringVar() 添加列表选项通过 StringVar() 方法动态地获取列表框中的选项，示例代码如下：import

    2K10

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

    这是我的最爱，不仅可以完成本文的例子，还会制作一些更有趣例子，稍后会介绍到。 1、创建 HTML 标记结构 在本练习中，我们从维基百科找一些四种不同类型的内容介绍：动物、植物、空间和河流。...然后我们创建相应的单选按钮，并为其分配内容关键词： 建立无序列表 接下来，我们设置一个包含4行的无序列表，每行列表包含了标题项标签和内容项标签： 首先我们在标题选型卡外层定义标签...基于上面的思路，整理后无需列表内容如下： 2、定义相关样式 准备好上述的HTML内容后，我们来定义相关样式，首先我们需要隐藏我们的几个单选按钮，我们可以使用left属性，将其移除屏幕显示区域，示例代码如下...70px，以及定义鼠标经过的外观样式: 由于宽度有限，我们需要旋转标题文字的方向，让其由下往上垂直显示，示例代码如下： 最后我们来定义选项卡内容文本的样式，我们应该默认第一个选项卡的内容出于展示状态...在我们的案例中，每个选项卡的内容都很多，看起来很漂亮。

    5.4K30

    【愚公系列】2023年09月 WPF控件专题 RadioButton控件详解

    第一个RadioButton被选中，并且可以在后台代码中使用IsChecked属性检查是否选中了该选项。...2.常用场景 选项卡控件：在WPF中，我们可以通过RadioButton来实现选项卡控件，在选项卡中选择不同的RadioButton，来展示不同的内容页面。...单选列表：在WPF中，我们可以利用RadioButton来实现单选列表，用户只能选择其中一个选项。...问卷调查：在问卷调查中，我们通常会针对一个问题提供多个选项，利用RadioButton可以实现单选。 设置界面：在设置界面中，我们可以利用RadioButton来提供多个选项，同时只能选择其中一个。...数据筛选：在数据筛选的过程中，我们可以利用RadioButton来实现单选，在筛选条件中选择一个选项。 RadioButton可以用于任何需要单选功能的场景，让用户只能从多个选项中选择一个。

    93411

    Flask Web 极简教程（四）- Flask WTF Froms

    ，可以通过Python代码生成表单，而Flask-WTF则是Flask集成了WTF表单功能的实现。...，Value可以是任意的字符串app.config['WTF_CSRF_SECRET_KEY'] = 'abc21231fafae2'第一个表单模型在项目目录下新建一个form.py文件，专门用来编写表单模型...labelform表单中的label标签，如输入框前的文字描述default表单中输入框的默认值validators表单验证规则widget定制界面的显示方式description帮助文字在app.py...在表单中的用户名和密码输入框中输入数据 可以看出密码是非明文显示的表单模型的字段类型在第一个表单模型中使用了两个字段类型，分别是StringField和PasswordField，并且在页面输入密码是也能够将密码以非明文的形式显示...，文件多选其他类型 SubmitField，提交表单按钮FieldList，自定义的表单选择列表FormField，自定义多个字段构成的选项

    3.9K20

    使用Python和SQLite构建软考评估系统

    系统简介 我们构建的计算机科学知识评估系统有两个主要目的： 数据提取和存储：首先，我们将从一个JSON文件中提取考试问题和答案，并将它们存储在一个SQLite数据库中。...数据提取和存储 我们从一个JSON文件（timu.json）中解析考试问题和答案，并将它们存储在一个SQLite数据库（.db）中。...数据插入：我们遍历提取的数据，将每个问题以及其答案选项和正确答案插入到SQLite数据库中。...关键功能包括： 显示问题：问题按顺序显示，同时显示相应的答案选项，以单选按钮形式呈现。 提交答案：用户选择他们的答案并提交。...反馈机制：提交后，用户会立即收到反馈，指示他们的答案是否正确或不正确，以及他们当前的得分。 模式切换：用户可以在“复习模式”（正确答案预先选择）和“测试模式”（用户必须选择答案）之间切换。

    15010

    为什么别人的代码总是很美，而你的却是很丑，让这款神器来彻底解救你吧！

    什么是 Codeimg.io 「Codeimg.io」是一款帮你把源代码转换成漂亮图片格式的在线工具，以便于在社交网络分享。...阴影大小、颜色 主题 程序语言 字体大小 显示行数 「Codeimg.io」使用教学 STEP 1 开启 Codeimg.io 后选择要套用的社交网站模版尺寸，选项上会提示你这个尺寸适用于那个区块...在下方项目名称的命名后面可预先选择要使用的图片格式，Codeimg.io 亦可制作 .svg 矢量图。 STEP 2 接着把 Codeimg 预设程式码移除，在第一行将你要转为图片的代码贴上。...STEP 3 左侧有几个选项，点开后会有更多可以设定的功能，例如窗口外框可调整为 macOS 或 Windows 样式，外框尺寸、对齐位置、圆角和阴影等等，设定后右边预览会即时更新。...STEP 5 最后，点选右上角的「Download」就能将这张代码图片导出，保存为预先选择的图片格式。

    56710

    Flask Web 极简教程（四）- Flask WTF Froms（Part A）

    ，可以通过Python代码生成表单，而Flask-WTF则是Flask集成了WTF表单功能的实现。...的CSRF，Value可以是任意的字符串 app.config['WTF_CSRF_SECRET_KEY'] = 'abc21231fafae2' 第一个表单模型 在项目目录下新建一个form.py文件...在表单中的用户名和密码输入框中输入数据 可以看出密码是非明文显示的 表单模型的字段类型 在第一个表单模型中使用了两个字段类型，分别是StringField和PasswordField，并且在页面输入密码是也能够将密码以非明文的形式显示...文件上传相关类型 FileField，文件单选 MultipleFileField，文件多选 其他类型 SubmitField，提交表单按钮 FieldList，自定义的表单选择列表 FormField...，自定义多个字段构成的选项

    3.1K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券