博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AngularDart Material Design 选择
阅读量:7107 次
发布时间:2019-06-28

本文共 4941 字,大约阅读时间需要 16 分钟。

hot3.png

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的值。
    有关有效值,请参阅。
     

  • 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

查看,查看。

转载于:https://my.oschina.net/u/3647851/blog/2049783

你可能感兴趣的文章
渲染机制/页面性能/错误监控
查看>>
304. Range Sum Query 2D - Immutable
查看>>
css多种方式实现等宽布局
查看>>
AWS EC2 实例磁盘空间扩容
查看>>
css多种方式实现等高布局
查看>>
使用 travis + gitbook + github pages 优雅地发布自己的书
查看>>
巧用flex布局实现左侧文字溢出省略,右侧文字自适应。
查看>>
package.json文件各字段的说明
查看>>
【学习笔记】CSS深入理解之margin
查看>>
MySQL集群搭建(4)-MMM+LVS+Keepalived
查看>>
Hive database does not exist 排查
查看>>
为什么要用Log4j来替代System.out.println
查看>>
如何使用IconFont?——矢量图标
查看>>
详谈vue组件间事件派发与接收
查看>>
ApacheCN 学习资源汇总 2018.12
查看>>
用node探究下http缓存
查看>>
js实现复制粘贴功能
查看>>
前端开发中提到的“脚手架”到底指什么,CLI?gulp 和 gulp-cli有什么区别
查看>>
Ghost配置4——添加网站统计
查看>>
在keystone.js后台编辑器中上传图片
查看>>