AngularDart Material Design 单选按钮 顶

MaterialRadioComponent

Selector: <material-radio>

具有材料风格的单选按钮。 通常与material-radio-group一起使用。 选中后,无法通过用户操作取消选中相同的单选按钮。

焦点的键盘交互有点不寻常,因此我们管理自己的流而不是使用FocusItemDirective。

Attributes:

  • no-ink - 设置此属性以禁用芯片上的涟漪效应。

Inputs:

  • checked bool  是否应该预先选择按钮。
  • disabled bool  按钮是否应该不响应事件,并且具有暗示不允许交互的风格。
  • value dynamic  此按钮表示的值,用于具有按钮组的选择模型。

Outputs:

  • checkedChange Stream<bool>  当按钮选择状态改变时触发。

MaterialRadioGroupComponent

Selector: <material-radio-group>

包含多个材质单选按钮的组,强制选择组中只有一个值。

您可以通过selected和ngModel获取值,但是应该避免同时使用两者,因为ngModel也通过监听onChange来获取值,因此值可能看起来不同步。

在组级别预选值是通过托管区域完成的,因此如果可以将其设置为按钮级别,请执行此操作。

每个辅助功能指南:

  • SPACE选择
  • 箭头键将焦点移至下一个/上一个选项并选择它
  • CTL +箭头键无需选择即可移动焦点
  • 当使用箭头导航时,焦点将环绕到第一个/最后一个选项
  • 当使用TAB导航时,如果未选择任何内容,焦点将转到未被禁用的第一个或最后一个选项,具体取决于方向,否则焦点将转到所选内容(除非禁用,然后完全跳过组);并在第二个选项卡上跳出组。

 Inputs:

  • selected dynamic  当前所选电台的价值。 首选[ngModel]。
  • selectionModel SelectionModel<dynamic>  包含值对象的选择模型。

Outputs:

  • selectedChange Stream<dynamic>  选择更改时发布。 首选(ngModelChanged)。

MaterialRadioExample

查看示例,查看源码

(adsbygoogle = window.adsbygoogle || []).push({}); function googleAdJSAtOnload() { var element = document.createElement("script"); element.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; element.async = true; document.body.appendChild(element); } if (window.addEventListener) { window.addEventListener("load", googleAdJSAtOnload, false); } else if (window.attachEvent) { window.attachEvent("onload", googleAdJSAtOnload); } else { window.onload = googleAdJSAtOnload; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AndroidTv

前端入门1-基础概念声明正文

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

912
来自专栏软件开发

CSS3与页面布局学习总结(四)——页面布局大全

一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%。当一个元素与另一个元素m...

1.1K6
来自专栏HTML5学堂

HTML5项目开发备忘录

HTML5学堂:良好的项目开发,从缜密的分析与计划开始,充分的项目开发准备能够让之后的问题降低到最少,让我们的整体开发效率提升不少。精心准备了关于项目开发的相关...

4515
来自专栏PPV课数据科学社区

【高手捷径】Excel数据操作与处理

作者:聂春霞,2001年毕业于南京邮电大学,在中国移动通信集团江西有限公司工作近4年,2005年加入腾讯公司,现就职于腾讯公司MIG运营商业务部,专注数据分析岗...

3829
来自专栏前端说吧

PS-前端切图教程(切jpg图和切png图)

9145
来自专栏Material Design组件

Human Interface Guidelines —— Page Controls

1315
来自专栏Thinks

10步大幅提升网站可访问性

10步大幅提升网站可访问性。每一步都可以在20分钟内完成。这篇文章也可以在20分钟内看完。 第一步,检查<title></title>,不允许空,不允许过长,简...

801
来自专栏Coco的专栏

【前端性能】高性能滚动 scroll 及页面渲染优化

3247
来自专栏守候书阁

也许vue+css3做交互特效更简单

做项目就难免会开发交互效果或者特效,而我最近开发的项目一直在使用vue,开发技术栈方面,理所当然就使用了vue+css3开发,过程中发现使用vue+css3开发...

1672
来自专栏葡萄城控件技术团队

三天学会HTML5 ——多媒体元素的使用

目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位...

2839

扫码关注云+社区

领取腾讯云代金券