文档章节

AngularDart Material Design 下拉列表

scooplol
 scooplol
发布于 2018/09/11 10:33
字数 897
阅读 11
收藏 0

MaterialDropdownSelectComponent

Selector: <material-dropdown-select>

Material Dropdown Select是按钮触发的下拉列表。

material-dropdown-select组件结合了material-select和material-button-down的API。

当与单个选择模型一起使用时,下拉选择时关闭。 使用多选模型时,用户必须通过单击其外部来关闭下拉列表。

可以通过传递material-select-item元素手动声明选择选项。 使用声明性API时,不会注入SelectionModel和SelectionOptions,因此将项目标记为选中不是自动的。

如果OptionGroup为空并且已定义emptyLabel,则下拉列表将包含其他组。 如果没有为空组定义emptyLabel,它将不会出现在列表中。

通过SelectionOptions实现的ObserveAware接口支持异步建议。

材料选择具有固定的最大高度和自动溢出。 一旦有用例,我们可以为自定义最大高度添加属性。

请参阅示例以了解用法

Attributes:

  • buttonAriaRole - 按钮图标的Aria标签。
  • popupClass - 要添加到下拉列表弹出窗口的样式类,以便可以以封装方式设置弹出窗口的样式。 有关文档,请参阅MaterialPopup。

Inputs:

  • ariaActiveDescendant String 
    下拉列表的活动元素的id。
     
  • buttonAriaLabel String 
    按钮的咏叹调标签。
     
  • buttonAriaLabelledBy String 
    在下拉按钮中描述选择的元素的id。
    例如,对于带有数字选项的下拉列表,显示“每页结果”的文本元素。
     
  • buttonText String 
    按钮上的文字。
     
  • componentRenderer (dynamic) → Type 
    使用factoryRenderer它允许更多树可动作的代码。
     
  • constrainToViewport bool 
    是否限制下拉位置,使其永远不会脱离屏幕。
     
  • deselectLabel String 
    选择项目的文本标签,取消选择当前选择项。
     
  • deselectOnActivate bool 
    是否在单击或enter/space键上取消选择所选选项。仅限单一选择模型。默认为true。
     
  • disabled bool 
    是否禁用该按钮。
     
  • enforceSpaceConstraints bool 
    避免渲染下拉屏幕。
     
  • error String 
    下拉按钮下方显示错误。
     
  • factoryRenderer (dynamic) → ComponentFactory<dynamic> 
    返回组件工厂以呈现Item的函数。
    生成的组件必须实现RendersValue。
     
  • icon Icon 
    与按钮一起使用的图标。 (可选的)
     
  • iconName String 
    用于按钮的图标。有关可能的值,请参见MaterialIconComponent。
     
  • itemRenderer (dynamic) → String 
    将选项对象转换为字符串的函数。
     
  • labelFactory (dynamic) → ComponentFactory<dynamic> 
    返回要用于渲染组标签的组件的工厂。
     
  • labelRenderer (dynamic) → Type 
    已禁用!使用labelFactory而不是它允许更好的树可抖动代码。
     
  • listAutoFocus bool 
    弹出窗口打开时是否默认聚焦选项列表。
    当弹出窗口中的另一个元素专注于打开时,应设置为false,例如一个搜索框。
     
  • options SelectionOptions<dynamic> 
    用于此选择模型的选项。
     
  • popupMatchInputWidth bool 
    弹出宽度是否至少与选择宽度一样宽。
     
  • preferredPositions List<dynamic> 
    当enforceSpaceConstraints为true时,对齐的首选位置
     
  • raised bool 
    按钮是否凸起。
     
  • selection SelectionModel<dynamic> 
    此组件控制的选择模型。
     
  • showButtonBorder bool 
    是否显示下拉按钮的下边框。
     
  • slide String 
    弹出缩放的方向。
    有效值为x,y或null。
     
  • trackLayoutChanges bool 

    设置建议列表是否随输入框滚动。

    这是一个传递属性,如PopupInterface中所定义。
     

  • visible bool 
    下拉列表是否可见。
     

  • width dynamic 
    下拉列表的宽度,默认为无,有效值为0-5。

Outputs:

  • blur Stream<FocusEvent> 
    下拉按钮失去焦点时触发的事件。
     
  • focus Stream<FocusEvent> 
    下拉按钮聚焦时触发的事件。
     
  • visibleChange Stream<bool> 
    当下拉列表的可见性发生变化时触发。

MaterialDropdownSelectDemoComponent

查看示例,查看源码

© 著作权归作者所有

共有 人打赏支持
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
AngularDart Material Design 选择

MaterialSelectComponent Selector: <material-select> 材料选择是用于从集合中选择项目的容器,使用复选图标标记所选选项。 可以手动(在模板中)或通过SelectionOptions实例指定选项。 可以...

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

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

局长
2016/11/13
5.5K
10

没有更多内容

加载失败,请刷新页面

加载更多

微信退款异步通知解密异常->填充无效,无法被移除

该问题是怎么引起的? AESDecrypt 加密处理发生异常 重现步骤 使用模拟工具 POSTMan 发送模拟通知 示例报文一: <return_code>SUCCESS</return_code><mch_id></mch_id><nonce_str></nonce_st......

夏至如沫
7分钟前
0
0
PC端网页使用微信扫码获取用户精确地理位置的一种解决方案[未测试]

移动互联网时代,获取用户地理位置来实现LBS当然不再话下。 在传统的PC浏览器应用领域,想获取用户的位置信息一般采用第三方的IP库,比如:淘宝IP地址库。但这种解决方案的缺陷是显而易见的:...

dragon_tech
9分钟前
0
0
【机器学习PAI实战】—— 玩转人工智能之利用GAN自动生成二次元头像

前言 深度学习作为人工智能的重要手段,迎来了爆发,在NLP、CV、物联网、无人机等多个领域都发挥了非常重要的作用。最近几年,各种深度学习算法层出不穷, Generative Adverarial Network(GAN...

迷你芊宝宝
12分钟前
0
0
Dijkstra算法之 Java详解

迪杰斯特拉算法介绍 迪杰斯特拉(Dijkstra)算法是典型最短路径算法,用于计算一个节点到其他节点的最短路径。 它的主要特点是以起始点为中心向外层层扩展(广度优先搜索思想),直到扩展到终点为...

孟飞阳
14分钟前
0
0
php7.2安装zookeeper扩展

简单记录下安装过程。 一、安装libzookeeper cd /usr/local/src/wget http://mirror.bit.edu.cn/apache//zookeeper/zookeeper-3.4.5/zookeeper-3.4.5.tar.gztar -xf zookeeper-3.4.5.ta......

叫我哀木涕
23分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部