AngularDart

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 自述 应用布局 应用程序布局是一个样式，指令和组件系统，当它们一起使用时，可以提供材质外观和感知应用程序的层叠关系。 它根据材料规格提供应用栏，抽屉和导航样式。 构建 样式由包提供：angular_components/app_layout / layout.scss.css。 要在Angular组件中使用这些样式，只需将其添加为Component注解中的styleUrls值即可。 建议在任何特定于组件的样式之前添加样式，以便您可以根据需要轻松覆盖样式值。 @Component( selector: 'my-component', templateUrl: 'my_component.html', styleUrls: const [ 'package:angular_components/app_layout/layout.scss.css', 'my_component.scss.css']) class MyComponent {} 应用栏 应用栏具有以下类，可以一起使用来创建标题： class 描述 material-header 头部标题的容器元素。 shadow 材质标题上的修饰符可以将阴影应用于标题。 dense-header 使主要使用鼠标和键盘界面的应用栏更加密集。 material

MaterialInputComponent Selector: <material-input:not(material-input[multiline])> material-input是单行或多行文本字段，用户可以在其中输入。 它有可选的标签。注意：客户端必须在其指令列表中声明materialInputDirectives而不是MaterialInputComponent。 Attributes: type - 输入的类型。 默认为“text”。 其他支持的值是“email”，“password”，“url”，“number”，“tel”和“search”。 （输入类型“number”也使用materialNumberInputDirectives） multiple - 用户是否可以输入多个值，以逗号分隔。 此属性仅在type =“email”时适用，否则将被忽略。 role - input元素的role属性。 Inputs: characterCounter (String) → int 自定义字符计数器功能。 键入输入文本; 返回文本应被视为多少个字符。 checkValid (String) → String 已禁用！ 请改用angular2 forms API disabled bool 是否禁用此输入（只读输入） displayBottomPanel bool

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 - 要添加到下拉列表弹出窗口的样式类，以便可以以封装方式设置弹出窗口的样式。 有关文档

MaterialAutoSuggestInputComponent Selector: <material-auto-suggest-input> material-auto-suggest-input 是一个输入字段，在用户输入时提供自动完成输入的建议。 此组件的调用者必须提供初始/未过滤建议的列表，这些建议根据组件过滤如同用户键入。 过滤器不区分大小写。 通过SelectionOptions实现的ObserveAware接口支持异步建议。 弹出建议列表具有最大高度和自动溢出。 一旦有用例，我们可以为自定义最大高度添加属性。 Inputs: ariaLabel String 用于辅助技术的标签。 如果未提供，请改用标签。 characterCounter Function 自定义字符计数器函数。 键入输入文本; 返回文本应被视为多少个字符。 checkValid Function 已弃用！ 请改用表单API clearIconTooltip String 显示在清除图标上的工具提示。 closeOnActivate bool 是否在激活时关闭下拉列表。 closeOnEnter bool 是否关闭甚至输入字符串未匹配选项。 componentRenderer (dynamic) → Type 已弃用！ 使用factoryRenderer，因为它可以树摇动。

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。

MaterialCheckboxComponent Selector: <material-checkbox> <material-checkbox> 是一个可以选中或取消选中的按钮。 用户可以点击该复选框以选中或取消选中它。 通常使用复选框允许用户从一组中选择多个选项。如果您有一个ON/OFF选项，请避免使用单个复选框并使用 material-toggle 。 我们没有扩展 ButtonDecorator ，因为我们需要覆盖几个属性，包括role，tabindex，但最重要的是因为checkbox只能与SPACE交互，而button适用于SPACE和ENTER。 Attributes: no-ink - 设置此属性以禁用芯片上的涟漪效应。 Inputs: checked bool 复选框的当前状态。这是用户可设置状态，通过 toggleChecked() ，因此在选中时， indeterminate 状态将被清除。 true 是 CHECKED 而 false 不是。 disabled bool 复选框是否不应响应事件，并且具有暗示不允许交互的样式。 indeterminate bool 复选框的替代状态，而不是用户可设置状态。 在 checked 和 indeterminate 之间，只有一个可以是真的，尽管两者都可能是假的。 true 是 INDETERMINATE 而

MaterialListComponent Selector: <material-list> 材料列表是用户要与之交互的一组项目的容器组件。 它构成了选择和菜单组件的基础。 MaterialListComponent 类充当提供样式和收集项事件的能力的列表的根节点。 Attributes: size：string {x-small，small，medium，large，x-large} 列表的大小，导致宽度分别为64px * {1.5,3,5,6,7}。 默认大小为“auto”，它将列表的大小调整为其内容。 min-size：string {x-small，small，medium，large，x-large} 列表的最小尺寸，导致宽度至少为指定的宽度。 Inputs: size String 预设宽度，1到5. 默认情况下，材质列表将扩展到其父级的整个宽度。 注意：规范清楚地列出了预定义的列表大小，因此请谨慎使用默认的扩展大小。 每个宽度将基本块宽度（桌面和平板电脑上的64px）分别乘以1.5,3,5,6,7，以获得可预测的宽度。 设置为0可使列表扩展到其父级的全宽。 width dynamic 已禁用！ 改用siaze输入。 MaterialListItemComponent Selector: <material-list-item> Material List

MaterialMenuComponent Selector: <material-menu> 材质菜单基于 MenuModel 对象呈现菜单。 此菜单包含 material-popup 中的 material-list 和 material-button ，其文本或图标可由调用者指定。 单击按钮时菜单会扩展，当选择项目或单击下拉菜单外的区域时，菜单会关闭。 Inputs: ariaLabel String 按钮触发器的Aria标签。 buttonText String 触发按钮文本。 如果MenuModel有图标，则忽略。 closeMenuOnClick bool 如果为true，则在菜单打开时单击触发按钮将关闭材质菜单。 否则，在菜单已打开时单击触发按钮将不会执行任何操作。 disabled bool 菜单是否被禁用。 isExpanded bool 菜单是否开放打开。 menu MenuModel<dynamic> 显示的菜单。 popupClass String 要附加到菜单弹出窗口的CSS类。 这些CSS类将被复制到弹出窗口叠加层中。 当弹出窗口打开时，这些类可用于在叠加层中选择DOM元素。 preferredPositions Iterable<dynamic> 传递给材质弹出组件的首选位置。 有关此参数的含义，请参见PopupInterface文档。 width

MaterialToggleComponent Selector: <material-toggle> material-toggle 是一个可以是ON或OFF的按钮。 用户可以点击切换按钮来更改状态。 通常，当您有一个ON / OFF选项时，您可以使用切换按钮。 如果您要一组中的多个选项中选中/取消选中，请改用 material-checkbox 。 Inputs: ariaLabel String 用于切换按钮的ARIA标签。 checked bool 切换按钮的当前状态。 true为ON，false为OFF。 disabled bool 启用/禁用切换按钮。 如果禁用true，则启用false。 label String 切换按钮的标签。 Outputs: checkedChange Stream<bool> 检查切换时触发的事件。 MaterialToggleExampleComponent 查看 示例 ，查看 源码 。 来源： oschina 链接： https://my.oschina.net/u/3647851/blog/2049817

FixedMaterialTabStripComponent Selector: <material-tab-strip> 选项卡条组件，带有选项卡样式按钮和活动选项卡指示器。 这是材质规格中的“固定”选项卡条，它具有相同大小的选项卡按钮，并且没有滚动。 注意：为了获得高质量的用户体验，选项卡条的用户必须将焦点设置为新显示的内容，以便1）选项卡不保留焦点样式，2）屏幕阅读器可以计算已更改的内容。 Inputs: activeTabIndex int 活动面板的索引，基于0。 默认值为0。 tabIds List<String> 选项卡按钮ID列表。 tabLabels List<String> 选项卡按钮标签列表。 Outputs: activeTabIndexChange Stream<int> 在tabChange事件触发后发布的activeTabIndex更新流。 beforeTabChange Stream<TabChangeEvent> TabChangeEvent实例的流，在选项卡更改之前发布。 调用TabChangeEvent＃preventDefault将阻止选项卡更改。 tabChange Stream<TabChangeEvent> 选项卡发生更改时发布的TabChangeEvent实例流。 MaterialTabPanelComponent Selector: