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

DropdownButtonComponent

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