AngularDart Material Design 下拉列表 顶
AngularDart Material Design 下拉列表 顶
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
(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; }