AngularDart Material Design 输入

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 
  是否显示错误，提示文本和字符计数器面板。
   

• error String 
  显示错误。比此输入上可能存在的所有其他错误更高的先验。
   

• errorMsg String 
  如果输入的字符数超过maxCount，则输入错误信息。
   

• errorRenderer (Map<String, dynamic>) → Map<String, dynamic> 

  一个函数，它接收错误映射，并返回另一个映射，用人类可读文本替换错误。

  警告：此机制的API仍在不断变化，并且会有重大变化。小心依靠它。
   

• floatingLabel bool 
  标签是否“浮动”。
  如果为false，则在文本输入框中时标签会消失。如果为真，则它会“漂浮”在输入之上。
   

• hintText String 

  要在输入上显示的提示。

  如果输入上有错误消息，则不会显示此文本。
   

• inputAriaActivedescendent String 
  应分配给内部输入元素的aria-activedescendant属性的元素的ID。
   

• inputAriaAutocomplete String 
  应用于内部输入元素的自动完成方法。
  这可以与“combobox”或“textbox”的inputRole值一起使用。如果此值是“list”或“both”，则inputAriaHasPopup应设置为“true”。
   

• inputAriaExpanded bool 
  inputAriaOwns引用的可扩展元素当前是否可见。
   

• inputAriaHasPopup String 

  input元素的aria-haspopup属性的值，表示inputAriaOwns引用的元素是可扩展的。

  如果inputAriaOwns引用的元素是可扩展的，则它应该是“true”或拥有元素的角色。
   

• inputAriaLabel String 

  用于辅助技术的标签。

  当需要可见标签时，请使用label代替此标签。
   

• inputAriaOwns String 
  应分配给内部输入元素的aria-owns属性的元素的ID。
   

• label String 
  此输入的标签。
  如果没有在文本框中输入任何内容，则显示默认文本。当用户输入文本时，它会消失。
   

• leadingGlyph String 
  要在输入的前沿显示的任何符号 - 例如URL链接图标或类似内容。
   

• leadingGlyphAriaLabel String 
  咏叹调标签用于领导字形。
   

• leadingText String 
  要在输入的前沿显示的任何文本 - 例如货币符号或类似物。
   

• maxCount int 

  字符计数输入框允许的最大字符数。

  当值为非null时，始终显示字符计数。
   

• required bool 

  是否需要输入。

  如果没有输入文本，则必需的输入将在第一次模糊时显示验证错误。
   

• requiredErrorMsg String 
  自定义错误消息，以显示何时需要该字段并显示空白。
   

• rightAlign bool 

  输入内容是否应始终右对齐。

  默认值为false。
   

• showCharacterCount bool 
  即使maxCount为null，也显示字符数。
   

• showHintOnlyOnFocus bool 

  输入未聚焦时是否显示提示文本。

  默认为false。
   

• trailingGlyph String 
  在输入的后缘显示的任何符号 - 例如 URL链接图标或类似内容。
   

• trailingGlyphAriaLabel String 
  咏叹调标签用于尾随字形。
   

• trailingText String 
  要在输入的后缘显示的任何文本 - 例如 货币符号或类似物。

Outputs:

• blur Stream<FocusEvent> 
  触发失去焦点事件时发布事件。
   
• change Stream<String> 
  触发更改事件时发布事件。 （在输入或失去焦点时。）
   
• focus Stream<FocusEvent> 
  元素聚焦时的事件。
   
• inputKeyPress Stream<String> 
  每当输入文本更改（每个按键）时发布事件。

MaterialMultilineInputComponent

Selector: <material-input[multiline]>

material-input是一个多行文本字段，用户可以在其中键入输入，并且可以选择具有标签。

Inputs:

• characterCounter (String) → int 

  自定义字符计数器功能。

  键入输入文本; 返回文本应被视为多少个字符。
   

• checkValid (String) → String
  已禁用！请改用angular2 forms API
   

• disabled bool 
  是否禁用此输入（只读输入）
   

• displayBottomPanel bool 
  是否显示错误，提示文本和字符计数器面板。
   

• error String 

  显示错误。

  比此输入上可能存在的所有其他错误更高的先验。
   

• errorMsg String 
  如果输入的字符数超过maxCount，则输入错误信息。
   

• errorRenderer (Map<String, dynamic>) → Map<String, dynamic> 

  一个函数，它接收错误映射，并返回另一个映射，用人类可读文本替换错误。

  警告：此机制的API仍在不断变化，并且会有重大变化。小心依靠它。
   

• floatingLabel bool 

  标签是否“浮动”。

  如果为false，则在文本输入框中时标签会消失。如果为真，则它会“漂浮”在输入之上。
   

• hintText String 
  要在输入上显示的提示。
  如果输入上有错误消息，则不会显示此文本。
   

• inputAriaLabel String 

  用于辅助技术的标签。

  当需要可见标签时，请使用标签代替此标签。
   

• label String 

  此输入的标签。

  如果没有在文本框中输入任何内容，则显示默认文本。当用户输入文本时，它会消失。
   

• maxCount int 

  字符计数输入框允许的最大字符数。

  当值为非null时，始终显示字符计数。
   

• maxRows int 
  要显示的最大行数。超过maxRows的任何内容都会导致输入滚动。
   

• required bool 

  是否需要输入。

  如果没有输入文本，则必需的输入将在第一次失去焦点时显示验证错误。
   

• requiredErrorMsg String 
  自定义错误消息，以显示何时需要该字段并显示空白。
   

• rows int 

  多行输入应该有多少行。

  可以是整数，也可以是字符串。
   

• showCharacterCount bool 
  即使maxCount为null，也显示字符数。
   

• showHintOnlyOnFocus bool 

  输入未聚焦时是否显示提示文本。

  默认为false。

Outputs:

• blur Stream<FocusEvent> 
  触发失去焦点事件时发布事件。
   
• change Stream<String> 
  触发更改事件时发布事件。 （在输入或失去焦点时。）
   
• focus Stream<FocusEvent> 
  元素聚焦时的事件。
   
• inputKeyPress Stream<String> 
  每当输入文本更改（每个按键）时发布事件。

MaterialAutoSuggestInputComponent

Selector: <material-auto-suggest-input>

material-auto-suggest-input是一个输入字段，提供在用户输入时自动完成输入的建议。此组件的调用者必须提供initial/unfiltered建议的列表，这些建议按组件过滤为用户类型。 过滤器不区分大小写。

通过SelectionOptions实现的ObserveAware接口支持异步建议。

弹出建议列表具有最大高度和自动溢出。 一旦有用例，我们可以为自定义最大高度添加属性。
Inputs:

• ariaLabel String 

  用于辅助技术的标签。

  如果未提供，请改用label。
   

• characterCounter Function 

  自定义字符计数器功能。

  输入输入文本; 返回文本应被视为多少个字符。
   

• checkValid Function
  已禁用！请改用表单API
   

• clearIconTooltip String 
  显示在清除图标上的工具提示。
   

• closeOnActivate bool 
  是否在激活时关闭下拉列表。
   

• closeOnEnter bool 
  是否关闭甚至输入字符串非匹配选项。
   

• componentRenderer (dynamic) → Type
  已禁用！使用factoryRenderer，因为它可以树摇动。
   

• constrainToViewport bool 
  是否限制弹出位置，使其永远不会脱离屏幕。
   

• disabled bool 
  是否禁用此输入。
   

• displayBottomPanel bool 
  是否显示错误，提示文本和字符计数器面板。
   

• emptyPlaceholder String 
  如果选项列表为空且未加载，则显示文本。
   

• enforceSpaceConstraints bool 
  弹出窗口是否应根据相对于视口的可用空间自动重新定位自身。
   

• error String 
  显示错误。
  比此输入上可能存在的所有其他错误更高的先验。
   

• factoryRenderer (dynamic) → ComponentFactory<dynamic> 
  FactoryRenderer用于显示项目。
   

• filterSuggestions bool 

  允许在用户输入时过滤建议。

  如果为false，则始终显示完整的建议列表。
   

• floatingLabel bool 

  标签是否“浮动”。

  如果为false，则在文本输入框中时标签会消失。如果为真，则它会“漂浮”在输入之上。
   

• hideCheckbox bool 
  是否隐藏选择项之前的复选框以进行多选。
   

• highlightMatchFromStartOfWord bool 
  匹配是否应仅在单词的开头突出显示。
   

• highlightOptions bool 
  是否突出显示选项。
  默认值为true。
   

• hintText String 

  要在输入上显示的提示。

  如果输入上有错误消息，则不会显示此文本。
   

• initialActivateSelection bool 
  弹出窗口中的第一个建议是活动的，默认情况下会突出显示。 将此设置为true会更改行为，以便在更改选项或选项时：
        1.选择中的第一个选定值在选项中有效
        2.如果选择没有选定值，则选项中没有任何活动
   
• inputText String 

  输入应该有的文本。

  请考虑使用angular_forms NgModel。
   

• itemRenderer (dynamic) → String 
  一个简单的函数，用于将项呈现为字符串。
   

• label String 
  要在输入上使用的标签。
   

• labelFactory (dynamic) → ComponentFactory<dynamic> 
  自定义工厂用于渲染建议标签。
   

• labelRenderer (dynamic) → Type 
  请改用labelFactory。
   

• leadingGlyph String 
  在输入框之前显示的任何持久字形。
   

• leadingText String 
  要在输入的前沿显示的任何文本 - 例如货币符号或类似物。
   

• limit dynamic 
  要显示多少建议。
  如果限制小于1，则假定为无限制。请参阅Filterable中的过滤方法。默认为10。
   

• loading bool 
  打开时没有可用的建议，请在建议下拉列表中显示加载指示符。
   

• maxCount int 

  字符计数输入框允许的最大字符数。

  当值为非null时，始终显示字符计数。
   

• optionHighlighter (String, dynamic) → List<HighlightedTextSegment> 

  返回给定查询和值的HighlightedTextSegment列表的函数。

  如果未提供optionHighlighter，则TextHighlighter与itemRenderer一起使用以生成文本段列表。
   

• selectionOptions SelectionOptions<dynamic> 
  此容器的可用选项。
   

• popupMatchInputWidth bool 
  建议弹出宽度是否至少与输入宽度一样宽。
   

• popupPositions List<RelativePosition> 

  尝试绘制建议弹出窗口的位置列表。

  有关更多信息，请参见MaterialPopupComponent。
   

• popupShadowCssClass String 
  建议弹出内容的自定义CSS类。
   

• required bool 

  是否需要输入。

  如果没有输入文本，则必需的输入将在第一次失去焦点时显示验证错误。
   

• requiredErrorMsg String 
  自定义错误消息，以显示何时需要该字段并显示空白。
   

• rightAlign bool 

  输入内容是否应始终右对齐。

  默认值为false。
   

• selection SelectionModel<dynamic> 

  如果设置，自动建议将使用提供的可观察SelectionModel对象。

  默认情况下使用单个选择模型。
   

• shouldClearOnSelection bool 
  从菜单中选择项目后是否清除文本。
   

• showClearIcon bool 
  显示或隐藏尾随关闭图标。单击该图标将清除输入文本并隐藏弹出窗口。
   

• showHintOnlyOnFocus bool 

  输入未聚焦时是否显示提示文本。

  默认为false。
   

• showPopup bool 
  用于控制建议弹出窗口的可见性。
   

• slide String 

  弹出缩放的方向。

  有效值为x，y或null。
   

• sorted bool
  已禁用！调用者应该在选项上调用.sort（）。
   

• suggestions List<dynamic> 
  已禁用！请改用[options]
   

• trailingGlyph String 
  要在输入框末尾显示的任何持久字形。
   

• trailingText String 
  要在输入的后缘显示的任何文本 - 例如 货币符号或类似物。

Outputs:

• blur Stream<void> 
  当输入增加失去焦点或自动建议项目被选中时触发。
   
• clear Stream<void> 
  单击关闭图标时触发。
   
• focus Stream<FocusEvent> 
  当输入获得焦点时触发
   
• showPopupChange Stream<bool> 
  showPopup更改时发布事件。
   
• inputTextChange Stream<String> 
  输入文本更改时发布事件（在按键上）。

MaterialNumberValueAccessor

Selector: <material-input[type=number],material-input[type=percent]>

ControlValueAccessor，它将输入强制转换为num。

使用materialNumberInputDirectives获取一组与输入一起使用以提供验证的指令。 比如默认确保它是一个数字，checkInteger，checkPositive，checkNonNegative（允许0，）lowerBound和upperBound。

Accessor始终设置从输入设置的原始String值，但仅在可以解析输入时设置Control的值。

keypressUpdate属性在每个按键上都有值更新，而默认值是仅在模糊事件上更新的值。 blurFormat属性导致输入在blur事件上格式化。

查看源码。

MaterialPercentInputDirective

Selector: <material-input[type=percent]>

控制材料输入以接受百分比值的指令。

Inputs:

• percentErrorRenderer Function 
  允许客户端使用自己的错误消息而不是默认消息的函数。

查看源码。

MaterialInputDemoComponent

MaterialAutoSuggestInputDemoComponent

MaterialPercentInputDemoComponent

MaterialInputMixinDemoComponent

MaterialInputNumberValueAccessorDemoComponent

查看示例，查看源码。

来源：oschina

链接：https://my.oschina.net/u/3647851/blog/2049644