文档章节

AngularDart Material Design 选择

scooplol
 scooplol
发布于 2018/09/11 20:21
字数 2003
阅读 4
收藏 0

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

查看示例,查看源码

© 著作权归作者所有

共有 人打赏支持
scooplol
粉丝 15
博文 103
码字总数 205785
作品 0
南充
程序员
私信 提问
AngularDart 现已全面采用 Dart 开发

一直以来,Angular 2依然采用TypeScript作为主流开发语言,然后自动编译成JavaScript 和 Dart。Dart开发者一直在进行Angular 2拆分,将其分为TypeScript/JavaScript版本和Dart版本,并成立了...

oschina
2016/07/21
6K
25
AngularDart 3.0:轻松升级,性能更好

AngularDart 3.0 现已推出。它带来更好的性能和更少的代码生成,加速开发效率。 3.0 版本尽管有一些突破性的变化,但由于 public API 的调整极少,可以看成是一个平滑的升级。主要改进在于代...

王练
2017/05/06
2.6K
4
AngularDart Material Design 卡片

自述 Material Card 材料卡是由Google材料团队(也称为mdc-web)提供的卡片样式。 这是一个允许在AngularDart应用程序中使用样式的包装器。 有关如何使用这些样式的文档,请参阅mdc文档。 可...

scooplol
2018/09/09
0
0
谷歌的 “Dart ”编程语言重返舞台

谷歌 Dart 曾经踌踌满志地想要取代 JavaScript 成为 Web 开发的首选语言。然而在一年半前,谷歌放弃了这个想法。因为 Dart 不仅仅在语言本身,包括它的整个生态圈,都比 JavaScript 落后了一...

局长
2016/11/13
5.5K
10
AngularDart Material Design 列表

MaterialListComponent Selector: <material-list> 材料列表是用户要与之交互的一组项目的容器组件。 它构成了选择和菜单组件的基础。 MaterialListComponent类充当提供样式和收集项事件的能...

scooplol
2018/09/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

关于360插件化Replugin Activity动态修改父类的字节码操作

近期在接入360插件化方案Replugin时,发现出现崩溃情况。 大概崩溃内容如下: aused by: java.lang.ClassNotFoundException: Didn't find class "x.x.x.xActivity" on path: 我自己在插件代码......

Gemini-Lin
47分钟前
0
0
mybatis缓存的装饰器模式

一般在开发生产中,对于新需求的实现,我们一般会有两种方式来处理,一种是直接修改已有组件的代码,另一种是使用继承方式。第一种显然会破坏已有组件的稳定性。第二种,会导致大量子类的出现...

算法之名
昨天
17
0
单元测试

右键方法 Go To --> Test,简便快速生成测试方法。 相关注解 @RunWith(SpringRunner.class) 表示要在测试环境中跑,底层实现是 jUnit测试工具。 @SpringBootTest 表示启动整个 Spring工程 @A...

imbiao
昨天
4
0
欧拉公式

欧拉公式表达式 欧拉公式的几何意 cosθ + j sinθ 是个复数,实数部分也就是实部为 cosθ ,虚数部分也就是虚部为 j sinθ ,对应复平面单位圆上的一个点。 根据欧拉公式和这个点可以用 复指...

sharelocked
昨天
5
0
burpsuite无法抓取https数据包

1.将浏览器和burpsuite的代理都设置好 2.在浏览器地址栏输入: http://burp 3.下载下面的证书,并将证书导入浏览器 cacert.der

Frost729
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部