文档章节

AngularDart Material Design 单选按钮

scooplol
 scooplol
发布于 2018/09/11 19:34
字数 542
阅读 12
收藏 0

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

查看示例,查看源码

© 著作权归作者所有

共有 人打赏支持
scooplol
粉丝 15
博文 103
码字总数 205785
作品 0
南充
程序员
私信 提问
AngularDart 现已全面采用 Dart 开发

一直以来,Angular 2依然采用TypeScript作为主流开发语言,然后自动编译成JavaScript 和 Dart。Dart开发者一直在进行Angular 2拆分,将其分为TypeScript/JavaScript版本和Dart版本,并成立了...

oschina
2016/07/21
6K
25
AngularDart 3.0:轻松升级,性能更好

AngularDart 3.0 现已推出。它带来更好的性能和更少的代码生成,加速开发效率。 3.0 版本尽管有一些突破性的变化,但由于 public API 的调整极少,可以看成是一个平滑的升级。主要改进在于代...

王练
2017/05/06
2.6K
4
AngularDart Material Design 卡片

自述 Material Card 材料卡是由Google材料团队(也称为mdc-web)提供的卡片样式。 这是一个允许在AngularDart应用程序中使用样式的包装器。 有关如何使用这些样式的文档,请参阅mdc文档。 可...

scooplol
2018/09/09
0
0
谷歌的 “Dart ”编程语言重返舞台

谷歌 Dart 曾经踌踌满志地想要取代 JavaScript 成为 Web 开发的首选语言。然而在一年半前,谷歌放弃了这个想法。因为 Dart 不仅仅在语言本身,包括它的整个生态圈,都比 JavaScript 落后了一...

局长
2016/11/13
5.5K
10
AngularDart Material Design 按钮

MaterialButtonComponent Selector:<material-button> 平面或凸起按钮,带有可选的波纹效果。 Attributes: 以下属性通常与<material-button>一起使用: icon:如果存在,则删除按钮的最小宽度...

scooplol
2018/09/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

网友第一次开发EOS区块链的经验

在处理项目时,用Java Connector for EOS区块链编写: 创建钱包 创建帐户 创建交易 创建签名交易 在帐户之间转移代币 我遇到了各种和运行本地EOS节点需要遵循的基本步骤。这个小指南纯粹是为...

geek12345
27分钟前
1
0
mybatis insert 动态生成插入的列及插入的值

代码如下 : 1.mapper.xml 文件 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"......

qimh
36分钟前
2
0
junit启动报错 Unable to find a @SpringBootConfiguration

环境 springboot项目 工程结构: test类代码如下: 问题 控制台中抛出如下异常: Unable to find a @SpringBootConfiguration, you need to use @ContextConfiguration or @SpringBootTest(......

zzx10
37分钟前
1
0
Html5 学习

1、mui 框架中的 plusReady 真机运行,浏览器不执行 http://ask.dcloud.net.cn/question/31708。 2、参考网络请求 仿网页 https://www.jianshu.com/u/84b5ef6309d6...

QGlaunch
38分钟前
1
0
net.sf.ezmorph.bean.MorphDynaBean cannot be cast to com.console.demo.web.model.XXX

前景: net.sf.ezmorph.bean.MorphDynaBean cannot be cast to com.console.demo.web.model.XXX //jsonObject:所有参数//FreightTemplate对象里面包含一个 private List<FreightTemplateCi......

事儿爹
38分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部