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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逸鹏说道

Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)

如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等

2933
来自专栏卡少编程之旅

Vue进阶部分文档研读和学习

3137
来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(五)元素的创建

1112
来自专栏大数据

Vue.js常见问题精选(一)

一、数据绑定不一定就是使用双大括号 “{{}}” 语法 我们都知道,Vue.js 最常见的数据绑定方式是使用“Mustache”语法(双大括号),Angular...

2116
来自专栏柠檬先生

NEC html规范

HTML规范 - 整体结构 HTML基础设施 文件应以“<!DOCTYPE ......>”首行顶格开始,推荐使用“<!DOCTYPE html>”。 必须申明...

2845
来自专栏从零开始学自动化测试

appium+python自动化26-模拟手势点击坐标(tap)

前言: 有时候定位元素的时候,你使出了十八班武艺还是定位不到,怎么办呢?(面试经常会问) 那就拿出绝招:点元素所在位置的坐标 一、 tap用法 1.tap是...

5264
来自专栏python成长之路

Pygame常用方法

6085
来自专栏AzMark

Python 学习之 Tkinter「下」

2195
来自专栏技术博客

Knockout.Js官网学习(创建自定义绑定)

你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等)。你可以你封装复杂的逻辑或行为,自定义很容易使用和重用的绑定。例如,你可...

1094
来自专栏九彩拼盘的叨叨叨

jQuery 最佳实践(译)

原文 http://shichuan.github.io/javascript-patterns/#jquery-patterns

753

扫码关注云+社区

领取腾讯云代金券