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

AngularDart Material Design 单选按钮

MaterialRadioComponent Selector: 具有材料风格单选按钮。 通常与material-radio-group一起使用。...选中后,无法通过用户操作取消选中相同单选按钮。 焦点键盘交互有点不寻常,因此我们管理自己流而不是使用FocusItemDirective。...disabled bool  按钮是否应该不响应事件,并且具有暗示不允许交互风格。 value dynamic  此按钮表示,用于具有按钮选择模型。...MaterialRadioGroupComponent Selector: 包含多个材质单选按钮组,强制选择组中只有一个。...您可以通过selected和ngModel获取值,但是应该避免同时使用两者,因为ngModel也通过监听onChange来获取值,因此可能看起来不同步。

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

Android单选按钮RadioButton使用详解

RadioButton是最普通UI组件之一,继承了Button类,可以直接使用Button支持各种属性和方法。...RadioButton与普通按钮不同是,它多了一个可以选中功能,可额外指定一个android:checked属性,该属性可以指定初始状态时是否被选中,其实也可以不用指定,默认初始状态都不选中。...使用RadioButton必须和单选框RadioGroup一起使用,在RadioGroup中放置RadioButton,通过setOnCheckedChangeListener( )来响应按钮事件;...getMenuInflater().inflate(R.menu.main, menu); return true; } } (3)显示结果,当点击时候显示文字 ?...总结 以上就是这篇文章全部内容了,希望本文内容对大家学习或者工作具有一定参考学习价值,谢谢大家对ZaLou.Cn支持。

3.6K20

单选按钮用户体验设计

单选按钮是表单系统一个基本元素。它们被使用在当存在互斥两个或多个选项列表而用户必须选择其中一个时。换句话说,点选某个尚未选中单选按钮,之前选择就会恢复成未选中。...一、单选按钮名字由何而来 单选按钮命名源自于旧式汽车中收音机用来切换频道物理按键—当一个按钮被按下,其他就会被弹出,留下唯一按钮处于被选中状态。...现代软件中单选按钮正是仿照这些物理按钮。 二、单选按钮最佳实践 1、使用单选按钮仅用来设置 使用单选按钮来更改设置,而不是作为操作按钮来执行命令。...4、通常给一个默认选项 UI设计十原则之一告诉我们用户应该能够取消或重做他们行为。这意味着通过UI控制应该能够让用户会到初始状态。在单选按钮情况下,这意味着单选按钮应该预先选择一个选项。...在例子中,选项是对立因此使用单选按钮是更好方案。 设置向导。你应该在向导页面上使用单选按钮使选项明确,即使一个复选框也是可以接受。一个有默认单选设计恩狗给用户一个很好建议。

6.1K100

【鸿蒙 HarmonyOS】UI 组件 ( 单选按钮 | RadioButton 与 RadioContainer 组件 )

RadioContainer 组件 二、监听 RadioContainer 选择事件 三、GitHub 地址 一、RadioButton 与 RadioContainer 组件 ---- RadioButton 组件就是单选按钮...; 给出 3 个 RadioButton 按钮 , 使用 RadioContainer 编组后 , 只能 3 选 1 , 同一时刻 , 只能有单个按钮处于选中状态 ; RadioContainer...组件是单选按钮编组组件 , 可以将若干 RadioButton 放到 RadioContainer 标签中 , 这些 RadioButton 组件只能有一个处于选中状态 ; RadioContainer...3" ohos:text_size="100"/> 显示样式 : 当前单选按钮 2 处于选中状态...; 下图是使用远程鸿蒙模拟器显示单选按钮 ; 二、监听 RadioContainer 选择事件 ---- 调用 RadioContainer 对象 setMarkChangedListener

1.2K00

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

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

2K30

前端Vue监听路由变化, 点击页面内按钮跳转菜单更改导航菜单选中状态

只需添加一个具有唯一 key 属性即可(Vue文档原话) 使用computed属性和Date()可以保证每一次key都是不同,这样就可以如愿刷新数据了。...获取组件实例 `this` // 因为当钩子执行前,组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变...`this` } 使用场景: 点击页面内跳转按钮 导航菜单选中 在element中有个NavMenu 导航菜单 组件 在A菜单页面中,有一个按钮button组件,...虽然页面已经跳过去了,但是导航菜单选中状态并没有发生改变,还在A菜单上面。也就是default-active,还停留在A上。 此时就可以在导航菜单组件中去监听router。...@select="handleSelect" > 首页 <el-menu-item index="/<em>Material</em>

3.7K21

checkbox(复选框)和radio(单选按钮)区别与详解

选中和取消 选中一个 checkbox(复选框) 后,再次点击它,即可取消选中 选中一个 radio(单选按钮) 后,再次点击它,不能取消选中 <!...checkbox,就必有相应个数 checkbox 被选中 如果要实现只能同时选中一个 checkbox,可以用 js 代码来控制 也就是说,checkbox 所谓单选”是不受其 name...默认情况下(不设置name属性时),也是点了几个 radio 就有几个 radio 被选中,并且选中后再次点击不可取消选中,除非重置或者刷新页面等 但 radio 既然是单选按钮,肯定是可以实现单选操作...,这时只要设置每个 radio name 属性一样就可以实现单选操作,也就是始终只会有一个 radio 被选中 要实现 radio 多选操作,除了前面说默认情况以外,还可以通过设置其...name 属性不相同来实现 如果有三个 radio 按钮,前两个 name 属性是一样,但第三个和前两个不一样,则前两个 radio 按钮,只能同时选中一个,第三个 radio 按钮可以和第一个或第二个同时被选中

4.1K10

Flutter中常见表单组件

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

4.8K20

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

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

5K20
领券