2019独角兽企业重金招聘Python工程师标准>>>

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

查看示例,查看源码。

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

AngularDart Material Design 输入相关推荐

  1. AngularDart Material Design 卡片

    2019独角兽企业重金招聘Python工程师标准>>> 自述 Material Card 材料卡是由Google材料团队(也称为mdc-web)提供的卡片样式. 这是一个允许在Ang ...

  2. AngularDart Material Design 选项树

    2019独角兽企业重金招聘Python工程师标准>>> MaterialTreeComponent Selector: <material-tree> 支持选项树的材质选 ...

  3. AngularDart Material Design 日期选择器

    2019独角兽企业重金招聘Python工程师标准>>> MaterialDateRangePickerComponent Selector: <material-date-ra ...

  4. AngularDart Material Design 步进器

    2019独角兽企业重金招聘Python工程师标准>>> MaterialStepperComponent Selector: <material-stepper> 材料设 ...

  5. Material Design 设计规范总结(2)

    本文是Material Design设计规范总结的第二部分,是进行UI设计与前端开发的必备参考资料. 八.布局 (1)所有可操作元素最小点击区域尺寸:48dp X 48dp. (2)栅格系统的最小单位 ...

  6. mint ui tabbar选中后怎么改变icon图标_UI全书(下)读后梳理:iPhone设计规范和Material Design规范...

    本文转载自简书,作者:Bystander7原文链接: https://www.jianshu.com/p/507f0fcb0457 - UI全书(下)<UI设计师进阶完全指南>读后梳理:i ...

  7. Material Design学习之 Snackbars(详细分析,Toast的加强版)

    转载请注明出处:王亟亟的大牛之路 昨天把Material Design Button部分的内容分析完了,不知道大家理解了他的实现没有.如果没看的话,可以看下,传送门:http://blog.csdn. ...

  8. Material Design风格登录注册

    本文实现了以下功能 完整的代码和样例托管在Github 当接口锁定时,防止后退按钮显示在登录Activity 上. 自定义 ProgressDialog来显示加载的状态. 符合材料设计规范. 悬浮标签 ...

  9. Toolbar详解 · Material Design Part 2

    文章转载地址:https://zhuanlan.zhihu.com/p/22842375 Toolbar详解 · Material Design Part 2 1 年前 这是一个系列文章,在这个系列里 ...

最新文章

  1. 在腾讯待了 9 年,还是离了职
  2. CTF-i春秋网鼎杯第一场misc部分writeup
  3. github托管代码
  4. 防火墙(9)——禁止某个时间段内访问我们的web
  5. matlab simulink笔记02——延迟模块delay与单位延迟模块unit delay
  6. 课堂练习 组合数据练习
  7. linux访问有域名的ftp,Linux安装了ftp服务怎么用域名访?
  8. 微信小程序 多图上传解决方案
  9. Java时间类之间的转换案例——计算自己活了多少天
  10. Android项目中JNI技术生成并调用.so动态库实现详解
  11. 【Nginx系列】- Nginx源码复杂安装
  12. 【HEVC学习与研究】46、HEVC参考代码中SAO的实现
  13. exosip鉴权及使用
  14. 2-《电子入门趣谈》第一章_一切从单片机开始-1.1单片机概述
  15. 不可多得的干货!双非渣本Android四年磨一剑,终局之战
  16. 如何快速制作证件照并压缩到100K?
  17. Oracle数据库初学者入门教程
  18. 嵌入式开发学习之--RCC(上)
  19. 【源代码】Python制作的赛车小游戏,逆行飙车
  20. 如何让android的屏幕保持常亮

热门文章

  1. Unity3D是怎么提升游戏运行效率的?
  2. 对《软件工程》第四章的理解
  3. 陶哲轩实分析 习题 7.5.2
  4. 《.NET应用架构设计:原则、模式与实践》新书博客--试读-2.1.2 设计原则实战
  5. 动态改变Android控件大小
  6. python盘点订单_django解决订单并发问题【推荐】
  7. mysql数据库oem_Oracle 11gR2学习之二(创建数据库及OEM管理篇)
  8. 2018计算机职称考试题,2018年职称计算机Powerpoint考试试题及答案
  9. java 重启系统_java 程序,实现重启功能。求大神帮忙,急
  10. 如何系统地入门学习stm32?