专栏首页Google DartAngularDart Material Design 选择 顶

AngularDart Material Design 选择 顶

MaterialSelectComponent

Selector: <material-select>

材料选择是用于从集合中选择项目的容器,使用复选图标标记所选选项。

可以手动(在模板中)或通过SelectionOptions实例指定选项。 可以通过模板或通过检查选择模型将选项标记为已选择。

Inputs:

  • componentRenderer (dynamic) → Type 已禁用!使用factoryRenderer而不是树可更改树
  • disabled bool  是否应将选择显示为已禁用。 默认为false。
  • factoryRenderer (dynamic) → ComponentFactory<dynamic>  用于创建必须覆盖给定选项的RendersValue的ComponentFactory,以允许更具表现力的选项。
  • itemRenderer (dynamic) → String  一个渲染函数,用于将选择选项呈现给String(如果给定值)。
  • options SelectionOptions<dynamic>  SelectionOptions实例提供渲染选项。
  • selection SelectionModel<dynamic>  此容器的SelectionModel。
  • width dynamic  渲染列表的宽度,从1到5。

MaterialSelectItemComponent

Selector: <material-select-item>

材料选择项是一种特殊的列表项,可以选择。

对于可访问性,应该包含在具有role =“listbox”和aria-multiselectable的元素中,除非将role设置为“option”以外的其他内容。

Inputs:

  • closeOnActivate bool 是否在激活时关闭下拉列表。 默认为True。
  • componentRenderer (dynamic) → Type 已禁用!请使用factoryrenderer,因为它会产生更多树形可动代码。
  • deselectOnActivate bool  如果为true且selectOnActivate为true,则触发此项目组件将取消选择当前选定的值;如果为false,则在选择值时触发此组件将不执行任何操作。
  • disabled bool 组件是否已禁用。
  • factoryRenderer (dynamic) → ComponentFactory<dynamic>  返回用于动态组件加载器的ComponentFactory,以用于呈现项目。
  • hideCheckbox bool 是否隐藏复选框。 默认为False。
  • isHidden bool 是否应隐藏该项目。 默认为False。
  • itemRenderer (dynamic) → String  将项目呈现为String的函数。 如果未提供,则不生成标签(标签仍可作为内容传递)。
  • role String  该组件的作用用于a11y。
  • selectOnActivate bool 如果为true,则触发此项目组件将选择选择内的值; 如果为false,则触发此项目组件将不执行任何操作。
  • selected bool 手动标记所选项目。
  • selection SelectionModel<dynamic>  选择模型以随更改一起更新。
  • tabbable bool  组件是否可以列表化。
  • tabindex String 组件的选项卡索引。 如果tabbable为true且disabled为false,则使用该值。
  • useCheckMarks bool 如果为true,则使用复选标记而不是复选框来指示是否为多选项目选择了该项目。 此特定样式用于多选菜单项组的材料菜单下拉列表。
  • value dynamic 此选择项表示的值。 如果对象实现HasUIDisplayName,则它将呈现使用uiDisplayName字段作为项的标签。 否则,如果提供了ItemRenderer(通过itemRenderer属性),则仅由此组件生成标签。

Outputs:

  • trigger Stream<UIEvent>  通过单击,点击或按键激活按钮时触发。

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>  当下拉列表的可见性发生变化时触发。

Selector: <dropdown-button>

一个专门用于下拉菜单的按钮。

默认情况下,此按钮呈现为带有三角形图标和下划线。 组件本身没有弹出窗口,但可用于构建未提供的下拉列表。 对具有相同按钮样式的组件使用material-dropdown-select,并实现下拉列表本身。

Inputs:

  • ariaActiveDescendant String  下拉列表的活动元素的id。
  • ariaExpanded bool 如果下拉列表已展开,则为True。
  • ariaLabelledBy String  另外描述按钮的元素的id。 例如,对于带有数字选项的下拉列表,显示“每页结果”的文本元素。
  • ariaOwns String 下拉列表内容的ID。
  • buttonAriaLabel String  按钮的咏叹调标签。
  • buttonText String 按钮上的文字。
  • disabled bool  是否禁用该按钮。
  • error String  按钮下方显示错误。 设置此按钮时,该按钮也会显示红色下划线。
  • icon Icon 与按钮一起使用的图标。 (可选的)
  • iconName String 用于按钮的图标。 有关可能的值,请参见MaterialIconComponent。
  • popupType String  aria-haspopup的值。 有关有效值,请参阅https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup
  • raised bool  按钮是否凸起。
  • role String 下拉按钮的ARIA角色。
  • showButtonBorder bool 是否显示下拉按钮的下边框。

Outputs:

  • blur Stream<FocusEvent>  下拉按钮失去焦点时触发的事件。
  • focus Stream<FocusEvent>  元素聚焦时的事件。
  • trigger Stream<UIEvent>  单击按钮或激活键盘时触发事件。

displayNameRendererDirective

Selector: <[displayNameRenderer]>

将此伪指令添加到任何SelectionContainer或SelectionItem组件以呈现HasUIDisplayName对象。

查看源码

MaterialSelectDemoComponent

MaterialDropdownSelectDemoComponent

查看示例,查看源码

(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 下拉列表 顶

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

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

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

    南郭先生
  • AngularDart Material Design 是/否 按钮 顶

    可以使用MaterialSaveCancelButtonsDirective等指令来提供基本文本自定义,该指令用保存/取消替换是/否。

    南郭先生
  • AngularDart Material Design 下拉列表 顶

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

    南郭先生
  • 如何把std::string当char *使用?

    std::string使用很方便,但有时会碰到这样的问题,比如我们有一个结构体,内容如下所示:

    王亚昌
  • 【漏洞通告】Citrix 多个高危漏洞通告

    近日,绿盟科技监测到Citrix发布安全更新通告,修复了应用程序交付控制器(ADC)、网关和SD-WAN WANOP设备中的11个漏洞。详细信息如下:

    绿盟科技安全情报
  • 抽奖问题分析

    普通抽奖问题问题描述 用户随机抽奖,数据如下: // map中,key代表用户名,value代表成用户下单数 var users map[string]int...

    李海彬
  • Spring Transaction 管理原理

    Spring 使用的都是声明式事务,不过在最开始时 Spring 支持的是编程式事务。本篇讲的是 Spring 最初版本 interface21(以下使用它指代...

    Dylan Liu
  • ASP.NET MVC的View是如何呈现出来的[实例篇]

    在《[设计篇]》篇中我们通过对View引擎的总体介绍讲述了从ViewResult的创建到View呈现的原理,为了让读者对View引擎及其View呈现机制具有一个...

    蒋金楠
  • JavaScript之JSON

    一、简介:Json是JavaScript中读取结构化数据更好的方式。因为Json数据可以直接传给eval(),而且不必创建DOM对象。Json是一种数据格式,不...

    郑小超.

扫码关注云+社区

领取腾讯云代金券