AngularDart Material Design 输入
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 APIdisabled 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 APIdisabled 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
已禁用!请改用表单APIclearIconTooltip 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 输入相关推荐
- AngularDart Material Design 卡片
2019独角兽企业重金招聘Python工程师标准>>> 自述 Material Card 材料卡是由Google材料团队(也称为mdc-web)提供的卡片样式. 这是一个允许在Ang ...
- AngularDart Material Design 选项树
2019独角兽企业重金招聘Python工程师标准>>> MaterialTreeComponent Selector: <material-tree> 支持选项树的材质选 ...
- AngularDart Material Design 日期选择器
2019独角兽企业重金招聘Python工程师标准>>> MaterialDateRangePickerComponent Selector: <material-date-ra ...
- AngularDart Material Design 步进器
2019独角兽企业重金招聘Python工程师标准>>> MaterialStepperComponent Selector: <material-stepper> 材料设 ...
- Material Design 设计规范总结(2)
本文是Material Design设计规范总结的第二部分,是进行UI设计与前端开发的必备参考资料. 八.布局 (1)所有可操作元素最小点击区域尺寸:48dp X 48dp. (2)栅格系统的最小单位 ...
- mint ui tabbar选中后怎么改变icon图标_UI全书(下)读后梳理:iPhone设计规范和Material Design规范...
本文转载自简书,作者:Bystander7原文链接: https://www.jianshu.com/p/507f0fcb0457 - UI全书(下)<UI设计师进阶完全指南>读后梳理:i ...
- Material Design学习之 Snackbars(详细分析,Toast的加强版)
转载请注明出处:王亟亟的大牛之路 昨天把Material Design Button部分的内容分析完了,不知道大家理解了他的实现没有.如果没看的话,可以看下,传送门:http://blog.csdn. ...
- Material Design风格登录注册
本文实现了以下功能 完整的代码和样例托管在Github 当接口锁定时,防止后退按钮显示在登录Activity 上. 自定义 ProgressDialog来显示加载的状态. 符合材料设计规范. 悬浮标签 ...
- Toolbar详解 · Material Design Part 2
文章转载地址:https://zhuanlan.zhihu.com/p/22842375 Toolbar详解 · Material Design Part 2 1 年前 这是一个系列文章,在这个系列里 ...
最新文章
- 在腾讯待了 9 年,还是离了职
- CTF-i春秋网鼎杯第一场misc部分writeup
- github托管代码
- 防火墙(9)——禁止某个时间段内访问我们的web
- matlab simulink笔记02——延迟模块delay与单位延迟模块unit delay
- 课堂练习 组合数据练习
- linux访问有域名的ftp,Linux安装了ftp服务怎么用域名访?
- 微信小程序 多图上传解决方案
- Java时间类之间的转换案例——计算自己活了多少天
- Android项目中JNI技术生成并调用.so动态库实现详解
- 【Nginx系列】- Nginx源码复杂安装
- 【HEVC学习与研究】46、HEVC参考代码中SAO的实现
- exosip鉴权及使用
- 2-《电子入门趣谈》第一章_一切从单片机开始-1.1单片机概述
- 不可多得的干货!双非渣本Android四年磨一剑,终局之战
- 如何快速制作证件照并压缩到100K?
- Oracle数据库初学者入门教程
- 嵌入式开发学习之--RCC(上)
- 【源代码】Python制作的赛车小游戏,逆行飙车
- 如何让android的屏幕保持常亮
热门文章
- Unity3D是怎么提升游戏运行效率的?
- 对《软件工程》第四章的理解
- 陶哲轩实分析 习题 7.5.2
- 《.NET应用架构设计:原则、模式与实践》新书博客--试读-2.1.2 设计原则实战
- 动态改变Android控件大小
- python盘点订单_django解决订单并发问题【推荐】
- mysql数据库oem_Oracle 11gR2学习之二(创建数据库及OEM管理篇)
- 2018计算机职称考试题,2018年职称计算机Powerpoint考试试题及答案
- java 重启系统_java 程序,实现重启功能。求大神帮忙,急
- 如何系统地入门学习stm32?