首页
学习
活动
专区
圈层
工具
发布
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    AngularDart Material Design 单选按钮 顶

    MaterialRadioComponent Selector: material-radio> 具有材料风格的单选按钮。 通常与material-radio-group一起使用。...选中后,无法通过用户操作取消选中相同的单选按钮。 焦点的键盘交互有点不寻常,因此我们管理自己的流而不是使用FocusItemDirective。...disabled bool  按钮是否应该不响应事件,并且具有暗示不允许交互的风格。 value dynamic  此按钮表示的值,用于具有按钮组的选择模型。...MaterialRadioGroupComponent Selector: material-radio-group> 包含多个材质单选按钮的组,强制选择组中只有一个值。...在组级别预选值是通过托管区域完成的,因此如果可以将其设置为按钮级别,请执行此操作。

    4K20

    【QT】 控件 -- 按钮类(Button)

    1、带有图标的按钮 – 纯代码实现 具体操作步骤参见上篇文章所讲的 QWidget 核心属性中的 windowIcon 部分。...老样子,先引入图片 prc,然后在界面上创建一个按钮, 再修改 widget.cpp,给按钮设置图标 2、带有快捷键的按钮 – 图形化&代码实现 1)在界面中拖五个按钮 五个按钮的 objectName...用于检查或设置按钮当前是否处于选中状态。 autoExclusive 是否排他。对于一组按钮而言,如果其中一个按钮被选中,则其他按钮的选中状态将被取消。...下面我们举一个 选择性别 的例子,如下: (1)在界面上创建⼀个 label 和 3 个单选按钮 设置的文本如下图,3 个单选按钮的 objectName 分别为:radioButton_male、radioButton_female...slot 函数,然后运行程序就可以看到随着选择不同的单选按钮,label 中的提示文字就会随之变化: (3)当前代码中,如果程序启动时并不会选择任何选项,但是可以修改代码,让程序 启动默认选中某个选项

    77400

    CSS实现最简洁的单选折叠菜单

    不到万不得已的时候千万别引入前端UI框架,因为HTML5和CSS3已经能实现绝大多数的功能,比如上期的《CSS实现最简洁的开关》只用了不到50行css就实现了带动画的material design风格的开关...标签页: 既然是单选的,就可以用单选按钮来实现。...首先这些单选按钮组的父元素用,因为可以监听按钮组的变化,同时还能通过name属性直接得到RadioNodeList列表和变化值,非常方便,不用设置其他的css选择器了。...属性要一致,然后通过form[name]得到单选组,form[name].value就是当前选中的按钮的value,也就是折叠按钮的标题,每个后面跟着一个就是菜单展开的内容。...只有被选中的后面的才显示。

    5.8K20

    CompoundButton

    大家好,又见面了,我是你们的朋友全栈君。 CompoundButton 具有两种状态的按钮,选中和未选中。当按钮被按下或点击时,状态会自动改变。...这是一个抽象类,目前有的子类有 复选框,单选按钮,开关,切换按钮。 复选框 复选框是一种特定类型的双状态按钮,可以选中或取消选中。 单选按钮 单选按钮是两个状态的按钮,可以选中也可以取消选中。...切换按钮 将选中/未选中状态显示为带有“指示灯”指示器的按钮,默认情况下带有文本“ON”或“OFF”。...CompoundButton的XML 属性 android:button Drawable 用于按钮图形(例如,复选框和单选按钮)。 android:buttonTint 应用于按钮图形的色调。...void setChecked(boolean checked) 更改此按钮的选中状态。

    2.4K20

    《刚刚问世》系列初窥篇-Java+Playwright自动化测试-28- 操作单选和多选按钮 - 中篇(详细教程)

    1.简介上一篇中宏哥讲解和介绍的单选框知识和理论有点多,多选按钮基本没有介绍。要不时由于时间的关系,估计宏哥还得侃侃而谈,所以宏哥今天决定今天讲解和分享复选框(多选按钮)的相关知识。...单选按钮一般叫raido button,就像我们在电子版的单选答题过程一样,单选只能点击一次,如果点击其他的单选,之前单选被选中状态就会变成未选中。单选按钮的点击,一样是使用click方法。...,再点击会被取消选中,所以不会有前面的报错(宏哥在上一篇小结中提到的报错)。...(选中李白-true,取消选中公孙离-false)。...(选中李白-true,取消选中公孙离-false)。

    17620

    《刚刚问世》系列初窥篇-Java+Playwright自动化测试-28- 操作单选和多选按钮 - 中篇(详细教程)

    1.简介 上一篇中宏哥讲解和介绍的单选框知识和理论有点多,多选按钮基本没有介绍。要不时由于时间的关系,估计宏哥还得侃侃而谈,所以宏哥今天决定今天讲解和分享复选框(多选按钮)的相关知识。...单选按钮一般叫raido button,就像我们在电子版的单选答题过程一样,单选只能点击一次,如果点击其他的单选,之前单选被选中状态就会变成未选中。单选按钮的点击,一样是使用click方法。...,如果已经被选择了,再点击会被取消选中,所以不会有前面的报错(宏哥在上一篇小结中提到的报错)。...(选中李白-true,取消选中公孙离-false)。...(选中李白-true,取消选中公孙离-false)。

    14020

    100 行代码实现 Flutter 自定义 TabBar

    接下来带你一步步实现自定义 TabBar…… 一、目标和效果 需求目标是: 这个页面不要 material 左侧统一的返回键和 Title 在右侧有取消按钮,点取消即返回 点击 Tab 可以实现 content...切换并带有动画效果 滑动内容区域也可以切换 Tab 效果如下图: 二、实现思路 将整个页面分为两部分,上面的 Tab 按钮和下面的内容区域。...上面的 Tab 布局,最外层是 Stack 布局,因为需要取消按钮一直在最右边且不能影响 tab 按钮的排版。多个 tab 按钮用横向布局 Row 来排列,并设置居中对齐。...当点击 Tab 的时候,设置 swiper 的下标切换显示的内容;当左右滑动 swiper,设置 tab 的选中状态,达到 tab 选中状态跟 swiper 滑动的联动。...,没有考虑到更多的情况,比如右侧的取消按钮也应该由外部传入,颜色也应该由外部传入,还有没校验传入的数据是否合法……大家可以根据自己的实际业务需求调整源码。

    1.4K20

    UI设计规范:单选按钮 vs 复选框,没那么简单

    本文中我通过列举几个典型的错误用法,帮助设计师在进行UI/UX设计时,更加规范地使用单选按钮和复选框这两个组件。...使用原型工具:Mockplus 单选按钮和复选框的区别 什么时候使用单选按钮? 有两个或两个以上的互斥选项,用户必须且只能从中选择一个。...换句话说,如果你选择了其中一个没有被选中的选项,那么原本被选中的选项就自动被取消。 什么时候使用复选框? 有一系列选项,用户可以从中选择选择一个或多个,甚至不选也可以。...按照订阅时间长短,应该是:月订阅>季订阅>年订阅 以上三个是单选按钮和复选框在UI/UX设计中常见的错误,除了避免这些错误之外,设计师在使用这两个组件时,最好能遵循以下四点建议: 1....能使用单选按钮时,尽量不使用下拉菜单。在所有选项都被清晰地列举出时,用户更容易进行比较,做出正确的选择。 2. 使用单选按钮时,一定要提供一个已经选中的默认选项。 3.

    2.5K30

    单选按钮的用户体验设计

    单选按钮是表单系统的一个基本元素。它们被使用在当存在互斥的两个或多个选项列表而用户必须选择其中一个时。换句话说,点选某个尚未选中的单选按钮,之前的选择就会恢复成未选中。...一、单选按钮的名字由何而来 单选按钮的命名源自于旧式汽车中收音机用来切换频道的物理按键—当一个按钮被按下,其他的就会被弹出,留下唯一的按钮处于被选中的状态。...现代软件中的单选按钮正是仿照的这些物理按钮。 二、单选按钮的最佳实践 1、使用单选按钮仅用来设置 使用单选按钮来更改设置,而不是作为操作按钮来执行命令。...同时,改变的设置不应该在用户点击命令按钮(标记为“前进”或“保存”为例)前生效。如果用户点击返回或取消按钮,任何在该单选按钮组所做的更改都应该被丢弃而且回到初始状态。...4、通常给一个默认选项 UI设计的十原则之一告诉我们用户应该能够取消或重做他们的行为。这意味着通过UI控制应该能够让用户会到初始状态。在单选按钮的情况下,这意味着单选按钮应该预先选择一个选项。

    7.7K100

    如何使用 v-model 绑定一个 computed 属性?

    return this.msg + '%';   } }, methods: {   updateMessage (e) {     this.msg = e.target.value;   } } 2、使用带有... + '%';     },     set (value) {       this.msg = value;     }   } } 举例 比如:购物车的全选按钮使用的是其他单选按钮遍历得到的结果,...决定全选按钮的状态是否为全选状态。...我们一般会使用 computed 计算各个单选按钮的状态,如果所有的单选按钮都选中状态(假设为true),则设置全选按钮为true;如果有一个单选按钮的状态不为选中状态(假设为false),则设置全选按钮为...---> allCheck改变 点击allCheck的input,执行函数setAllCheck setAllCheck里面,把所有的单选全部选中/取消,进而通过第一步对allCheck进行曲线救国改变

    5.2K10

    原来Pycharm中有这么多好用的插件

    pycharm是一款强大的python集成开发环境,带有一整套python开发工具,今天就给大家介绍几款非常好用的插件。...首先插件的下载方法 进入File -> Settings -> Plugins,根据需要搜索插件名称(记得是在Marketplace中搜索),然后点击Install按钮,需要重启才能生效。 ?...在tools中勾选Vim Emulator即可使用,取消勾选回到正常编辑状态。关于vim的使用可以参考这篇文章Linux之vim快速入门。 ?...Rainbow Brackets Rainbow Brackets可以让代码块之间清晰的显示出各种颜色,比如括号相同颜色,选中区域代码高亮的功能等,并且支持支持Java, Python, JavaScript...Material Theme UI Material Theme UI是一个主题插件,在很多编辑器中都可以使用,暗黑色,还是很有质感的,大家不喜欢默认主题的,可以尝试下。 ?

    2.7K41

    React UI组件库教程

    一、3个最受欢迎的React UI 组件库1. MUIMaterial-UI 是一个开源的 React 组件库,实现了 Google 的 Material Design。...它是一个全面的预构建 UI 组件集合,可以立即在生产中使用。特点:全面的组件集合: Material-UI 包括许多组件,包括按钮、菜单、表单、表格等。...可定制: Material-UI 组件可以轻松定制,以匹配你的品牌指南或应用的设计。可访问性: Material-UI 组件考虑了可访问性,这意味着残障人士也可以使用它们。...主题化: Material-UI 支持主题,因此你可以轻松地更改应用的外观和感觉2....专注于状态管理: Headless UI 跟踪组件状态(打开/关闭,选中/未选中等),但将视觉表示完全留给你。3.

    61200

    Material Design — 菜单(Menus)

    自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚!...菜单(Menus) Material Design链接:菜单 ? 菜单 菜单的形式是在短暂的动作条上展示选项列表。 菜单出现在与按钮,操作或其他控件的交互中。...菜单项还可包含: ·图标和提示文本(如下图中展示的键盘快捷键); ·如复选标记之类的控件(已选择的打勾),表明多个已选的项目或状态。 菜单排序 带有静态内容的菜单应该在菜单的顶部放置最常用的菜单项。...例如,重做在没有任何可重做的操作时被禁用。 剪切和复制在没有选择内容时不可用。 ? 不可用的例子 ---- 行为 菜单出现在app内所有其他UI元素之上。 ?...取消选择 触摸菜单外部或按下系统“后退”按钮,取消操作并关闭菜单。 ? 简单菜单 ·打开时,简单菜单会尝试将当前选定的菜单项目与列表项目垂直对齐。 当前选择的菜单项突出显示(如下图)。 ?

    6.9K100

    原来Pycharm中有这么多好用的插件

    大家好,又见面了,我是你们的朋友全栈君。 pycharm是一款强大的python集成开发环境,带有一整套python开发工具,今天就给大家介绍几款非常好用的插件。...首先插件的下载方法 进入File -> Settings -> Plugins,根据需要搜索插件名称(记得是在Marketplace中搜索),然后点击Install按钮,需要重启才能生效。...在tools中勾选Vim Emulator即可使用,取消勾选回到正常编辑状态。关于vim的使用可以参考这篇文章Linux之vim快速入门。...Rainbow Brackets Rainbow Brackets可以让代码块之间清晰的显示出各种颜色,比如括号相同颜色,选中区域代码高亮的功能等,并且支持支持Java, Python, JavaScript...Material Theme UI Material Theme UI是一个主题插件,在很多编辑器中都可以使用,暗黑色,还是很有质感的,大家不喜欢默认主题的,可以尝试下。

    94530

    unity3d-UGUI

    、NGUI的区别 uGUI的Canavas有世界坐标和屏幕坐标 uGUI的Image可以使用material UGUI通过Mask来裁剪,而NGUI通过Panel的Clip NGUI的渲染前后顺序是通过...UI Scale Mode(UI缩放模式) Constant Pixel Size:像素大小始终不变,即一个100100的图片在任何分辨率下都占用100100的像素。...Anchor锚点:UI元素的四个顶点与锚点的间距保持不变。锚点总是相对于父级,不能超越父物体范围。...使用Image或Text制作Button按钮Toggle(开关) 属性 Is On 复选框的选中状态 Toggle Transition 状态改变时,是否启用过渡效果 Graphic 切换的背景图片...Group 单选组Slider(滑动条) 属性 Fill Rect 填充矩形区域 Handle Rect 手柄矩形区域 Direction 手柄方向 Min/Max Value 最小/最大值

    3.4K30

    Flutter中的常见表单组件

    Radio、RadioListTile 我们可以使用Checkbox来实现多选按钮组的视觉效果,如果想要实现单选按钮组的效果,可以使用Radio。...Radio的常见属性如下: value,单选的值 onChanged,选中该条目的时候触发的函数 activeColor,选中时的背景颜色 groupValue,所在单选按钮组的选中值,要想配置几个Radio..._sex = value; }); }, //配置单选按钮组的选中值,所有该属性值相等的Radio都处于同一个按钮组下...Radio可以用于实现单选按钮组,有三个属性是必须要配置的:value、onChanged、groupValue。...RadioListTile组件的属性如下: value,单选的值 onChanged,选中时候的回调 activeColor,选中时的背景颜色 groupValue,单选组的值 title,标题 subtitle

    5.4K20
    领券