首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >AngularDart Material Design 输入 顶

AngularDart Material Design 输入 顶

作者头像
南郭先生
发布2018-09-30 10:59:53
5.2K0
发布2018-09-30 10:59:53
举报
文章被收录于专栏:Google DartGoogle Dart

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

查看示例,查看源码

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • MaterialInputComponent
  • MaterialMultilineInputComponent
  • MaterialAutoSuggestInputComponent
  • MaterialNumberValueAccessor
  • MaterialPercentInputDirective
  • MaterialInputDemoComponent
  • MaterialAutoSuggestInputDemoComponent
  • MaterialPercentInputDemoComponent
  • MaterialInputMixinDemoComponent
  • MaterialInputNumberValueAccessorDemoComponent
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档