首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >AngularDart Material Design 单选按钮 顶

AngularDart Material Design 单选按钮 顶

作者头像
南郭先生
发布2018-09-30 11:01:17
3.3K0
发布2018-09-30 11:01:17
举报
文章被收录于专栏:Google DartGoogle Dart

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; }

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • MaterialRadioComponent
  • MaterialRadioGroupComponent
  • MaterialRadioExample
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档