专栏首页Google DartAngularDart Material Design 单选按钮 顶

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 条评论
登录 后参与评论

相关文章

  • AngularDart Material Design 切换 顶

    用户可以点击切换按钮来更改状态。 通常,当您有一个ON / OFF选项时,您可以使用切换按钮。 如果您要一组中的多个选项中选中/取消选中,请改用material...

    南郭先生
  • AngularDart Material Design 选项树 顶

    如果SelectionOptions实现Parent接口,则为Parent.hasChildren设置的每个选项显示一个handle,并且切换handle将从P...

    南郭先生
  • AngularDart Material Design 处理指示器 顶

    请参阅http://www.google.com/design/spec/components/progress-activity.html。

    南郭先生
  • Gtk 窗口,控件,设置(添加图片等)

    让窗体尺寸不可调整,但是好像与全屏使用时有些问题,会自动地调整窗口的大小

    RainMark
  • 通过 pxe(网络安装)完成centos 系统的网络安装

    首先交代环境。本地2台主机,一台windows主机,一台等待安装centos的主机。2台主机在同一个局域网。通过路由器自动获取ip上网。 网上大多数pxe安装...

    旺财的城堡
  • 关于AS3的事件移除释疑

    as3.0中的事件Event(位于包flash.events内,继承至Object,子类有…)

    meteoric
  • js中将日期类型转换成字符串型格式

    源哥
  • 推荐安全且匿名的邮箱 ProtonMail

    安全确实做得很好,关于这点我们尤其在意前端安全是否做得足够,比如对抗 XSS/CSRF 的策略,这在邮箱攻击里是常用的手法。另外在很多安全细节上很具备前瞻性,如...

    周俊辉
  • 第七课 技术小白如何在45分钟内发行通证(TOKEN)并上线交易

    通过逐步的指导和截图举证,一步步带领一个技术小白完成一个数字货币(通证,代币,TOKEN)的发布演示和上线交易。

    辉哥
  • 字符串练习——输入关键字找歌曲

    Zoctopus

扫码关注云+社区

领取腾讯云代金券