首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

AngularDart Material Design 输入

警告:此机制API仍在不断变化,并且会有重大变化。小心依靠它。 floatingLabel bool  标签是否“浮动”。 如果为false,则在文本输入标签会消失。...需要可见标签,请使用label代替此标签。 inputAriaOwns String  应分配给内部输入元素aria-owns属性元素ID。...警告:此机制API仍在不断变化,并且会有重大变化。小心依靠它。 floatingLabel bool 标签是否“浮动”。 如果为false,则在文本输入标签会消失。...如果为false,则在文本输入标签会消失。如果为真,则它会“漂浮”在输入之上。 hideCheckbox bool  是否隐藏选择项之前复选框以进行多选。...将此设置为true会更改行为,以便在更改选项选项:       1.选择第一个选定值在选项中有效       2.如果选择没有选定值,则选项没有任何活动 inputText String

5.2K40
您找到你想要的搜索结果了吗?
是的
没有找到

vue封装带提示框单选多选文本框组件

由于项目中使用element-ui,首选考虑使用UI框架input和select组件,然而实际使用参考文档发现框架提供组件不能很好满足此需求。...提示框显示隐藏交互实现 细化上述需求,需要在用户点击输入框(获取焦点),显示提示框,在用户点击空白区域隐藏提示框,点击组件自身不做任何操作。...但是操作较快,会偶尔出现提示框不能关闭或提前关闭情况,分析原因在于,延时器期间任何对开关操作可能导致组件开关状态变化,致使状态紊乱。...{ this.show = true }) 问题1:事件委托,使用固定class,同时渲染多个组件无法实现单独管理提示框开关,因此无法同时渲染多个组件,因此class使用动态绑定,即每个组件使用不同...**问题2:**上述操作只考虑了点击事件关闭,忽略了其他可能需要关闭情况,如使用tab按键切换输入也需要能正常显示与隐藏提示框。

7.7K30

AngularDart Material Design 选择 顶

deselectOnActivate bool  如果为true且selectOnActivate为true,则触发此项目组件将取消选择当前选定值;如果为false,则在选择值触发此组件将不执行任何操作...hideCheckbox bool 是否隐藏复选框。 默认为False。 isHidden bool 是否应隐藏该项目。 默认为False。...material-dropdown-select组件结合了material-select和material-button-downAPI。 与单个选择模型一起使用时,下拉选择关闭。...使用多选模型,用户必须通过单击其外部来关闭下拉列表。 可以通过传递material-select-item元素手动声明选择选项。...弹出窗口中另一个元素专注于打开,应设置为false,例如一个搜索框。 options SelectionOptions  用于此选择模型选项

6K20

使用VUE组件创建SpreadJS自定义单元格(一)

除了以表格形式展示数据,电子表格还有一个非常重要功能,即支持自定义功能拓展和各种定制化数据展示效果,比如checkbox,Radio button等;还需要实现单元格进入编辑状态,使用下拉菜单...(或其他输入控件)输入效果。...我们称之为"自定义单元格",一种嵌入组件内组件。SpreadJS目前拥有8种下拉列表,在打开列表之前,我们只需要在单元格样式设置选项数据。...对于ElementUI autocomplete,默认下拉选项内容是注入到body,需要给组件模板设置:popper-append-to-body="false",让弹出下拉选项在gcUIElement...如果使用其他组件没有类似选项,也可以跟进实际情况在弹出在添加gcUIElement属性。 2、使用动态挂载组件 this.vm 设置和获取单元格值。

1.3K20

vue封装带提示框单选多选文本框组件

[pw9wsrd3kv.jpeg] 由于项目中使用element-ui,首选考虑使用UI框架input和select组件,然而实际使用参考文档发现框架提供组件不能很好满足此需求。...提示框显示隐藏交互实现 细化上述需求,需要在用户点击输入框(获取焦点),显示提示框,在用户点击空白区域隐藏提示框,点击组件自身不做任何操作。...但是操作较快,会偶尔出现提示框不能关闭或提前关闭情况,分析原因在于,延时器期间任何对开关操作可能导致组件开关状态变化,致使状态紊乱。...{ this.show = true }) 问题1:事件委托,使用固定class,同时渲染多个组件无法实现单独管理提示框开关,因此无法同时渲染多个组件,因此class使用动态绑定,即每个组件使用不同...事件无法直接获取到当前对象dom元素this.

5.3K403

jQuery基础(五)一Ajax应用与常用插件-imooc

cookie用户名 搜索插件——autocomplete 搜索插件功能是通过插件autocomplete()方法与文本框相绑定,文本框输入字符,绑定后插件将返回与字符相近字符串提示选择,...为调用插件方法配置对象 jQuery Autocomplete 使用详细说明 例如,当用户在文本框输入内容,调用搜索插件autocomplete()方法返回与输入内容相匹配字符串数据,显示在文本框下...例如,点击“提交”按钮,如果文本框内容为空,则通过dialog插件弹出提示框,提示输入内容不能为空,如下图所示: 在浏览器显示效果: 3-7菜单工具插件——menu 菜单工具插件可以通过...}); 其中selector为需要显示提示信息元素,可选项参数options为tooltip()方法配置对象,在该对象,可以设置提示信息弹出、隐藏效果和所在位置。...例如,将三个元素与工具提示插件相绑定,把鼠标移动在元素内容,以动画效果弹出对应提示图片,移出,图片自动隐藏,如下图所示: <!

16.5K20

HTML 表单和约束验证完整指南

你可以: 停止验证,直到用户与字段交互或提交表单 使用自定义样式显示错误消息 提供仅在 HTML 无法实现自定义验证。...您需要比较两个输入时,这通常是必要——例如,输入电子邮件地址或电话号码,检查“新”和“确认”密码字段是否具有相同值,或确保一个日期接一个日期。...如果是false,则以下一项或多项属性将是true: 有效性状态描述.badInput浏览器无法理解输入.customError已设置自定义有效性消息.patternMismatch该值与指定pattern...该字段有效必须传递一个空字符串,否则该字段将永远无效。 checkValidity():true输入有效返回。...所有 HTML5 输入字段都可以在 IE 中使用,但可能需要更多用户努力。(例如,输入无效电子邮件地址,IE 不会检测到。)

8.2K40

关于 devbridge-autocomplete 插件多选操作实现方法

目前据我所知最好用 autocomplete 插件就是 jquery-ui autocomplete 以及 devbridge autocomplete 插件。...我最终选择了 devbridge autocomplete 插件,主要是不想引用 jquery-ui css 文件。...参数传递请求,可选 formatResult:function (suggestion, currentValue) {} delimiter:字符串或正则表达式,分割输入值并将最后一个作为查询词,一般逗号分割...,默认值:false appendTo:查询列表容器被添加到那个元素,默认值:document.body dataType:服务器返回数据格式 showNoSuggestionNotice:如果查询结果为空是否有提示语...实现多选关键参数是 delimiter, onInvalidateSelection , triggerSelectOnValidInput 实际项目中autocomplete难点在于需要查询结果索引值并保存到隐藏域中

1.5K80

form表单提交几种方式

size 属性规定输入字段尺寸 maxlength 属性规定输入字段允许最大长度 H5之后添加属性 autocomplete 属性规定表单或输入字段是否应该自动完成。...自动完成开启,浏览器会基于用户之前输入值自动填写值。 提示:您可以把表单 autocomplete 设置为 on,同时把特定输入字段设置为 off,反之亦然。...提示:如需引用一个以上表单,请使用空格分隔表单 id 列表。 formaction 属性规定当提交表单处理该输入控件文件 URL。...multiple 属性是布尔属性。 如果设置,则规定允许用户在 元素输入一个以上值。 multiple 属性适用于以下输入类型:email 和 file。...placeholder 属性规定用以描述输入字段预期值提示(样本值或有关格式简短描述)。 该提示会在用户输入值之前显示在输入字段

6.4K20

HTMLHTML5 Input类型&&表单

1.HTML "不常用"input类型属性值: disabled:输入字段禁用; maxlength:输入字段最大字符长度; readonly:输入字符只读,无法修改; size:输入字段可见字符数...,这里所谓“可见字符”也不是真正意义上“可见”,鼠标光标能够左右移动查看所有字符 2.HTML5容易“忽视”input类型属性值: max:输入最大值 min:输入最小值 required:...在HTML5表单,都有自动完成功能: 比如: 在第一次输入,第二次输入时下拉框有“记忆功能”。...我们可以设置:autocomplete="off"来关闭记忆功能! 还有一个autofocus会在运行文件聚焦到此输入! :表单密钥对生成,验证用户可靠方法!...除了autocomplete可以用在form和input,novalidate用在form属性!其它均用在input属性

1.3K70

Flutter | 常用组件

Switch 或者 CheckBox 被点击,会触发 onChanged 回调,我们可以回调改变逻辑 class SwitchAndCheckboxTest extends StatefulWidget...,设置激活状态颜色 宽高:Checkbox 无法自定义,Switch 只能定义宽度 Checkbox 有一个属性 tristate,表示是否为三态,默认值为false,如果为true ,valude...obscureText :是否隐藏正在编辑文本,如输入密码等。...不同是后者回调是 ValueChanged ,前者不接受参数 inputFormatters:用于指定输入格式,输入内容改变,会根据指定格式来校验 enable:若为..., }) 复制代码 autovalidate:是否自动校验输入内容, 为 true ,每一个自 FormField 都会自动校验合法性,并直接显示错误信息。

11.4K30

Vue 基于vue-codemirror实现代码编辑器

4.0.6 element-ui 2.13.1 (使用到element-ui message组件,提示错误消息,如果不想安装该组件,替换编辑器this...., python等 10、 支持静态代码语法检查 目前仅支持支持 json,javascript 11、 支持批量替换 操作方法: 按Ctrl + Shift + r键,弹出框输入要被替换内容,回车...,然后再次输入用于替换内容,回车即可。...12、 支持快速搜索 操作方法: 按Ctrl + F,弹出框输入要查找内容,回车 13、 支持跳转到指定行 操作方法: 按Alt + G 快捷键, 弹出快对话框输入行号,回车即可 14、 支持鼠标点击高亮匹配单词...支持输入完开放xml、html元素标签,自动补齐右侧闭合标签、或者输入完 </ ,自动补齐闭合标签 使用场景举例:输入自动补齐右侧 18、 支持自动匹配xml标签 xml

9.8K50

jquery autoComplete 自定义回写样式

$("#itemName").autocomplete(url,{               minChars: 0, //在触发autoComplete前用户至少需要输入字符数.            ...max: 20,//autoComplete下拉显示项目的个数             autoFill: false, //要不要在用户选择自动将用户当前鼠标所在值填入到input框            ...//mustMatch: true, //autoComplete只会允许匹配结果出现在输入框,所有当用户输入是非法字符将会得不到下拉框             matchContains: true..., //决定比较是否要在字符串内部查看匹配,如ba是否与foo barba匹配.使用缓存比较重要.不要和             multipleSeparator: '',//如果是多选,...multiple: false, //是否允许输入多个值即多次使用autoComplete输入多个值             cacheLength: 20,             delay:

2.3K20

Web内容无障碍性(3):ARIA角色Roles值示与aria-*属性值列表说明

结构性角色定义文档结构并帮助组织内容。小组件角色由独立 UI 小组件和复合小组件构成,其中复合小组件是两个或多个独立小组件容器。...tooltip表示提示文本tree表示树形效果见下面treeitem图。treeitem表示树结构选项ARIA 属性值示意及说明表属性名属性值说明aria-activedescendant字符串。...在此HTML示例,工具栏第一个控件(拥有id “button1″)是能获取焦点子控件。aria-atomic字符串。表示区域内容是否完整播报。值可以为true和false。...为true,表示辅助设备需要把整个区域内容都通报给使用者;如果为false则表示只需要通报修改部分。还是这个时间选择器年月标题例子。...可选值有:inline, list, both, none.目前,该属性对于inline和list两个值含义暂不清楚。不过可以确定是该属性对应HTML5autocomplete属性。

1.8K20

HTML5 学习总结(二)——HTML5新增属性与表单元素

: true -----可以编辑元素内容 false -----无法编辑元素内容 inherit -----继承父元素contenteditable属性 为空字符串,效果和true一致。...一个元素contenteditable状态为true(contenteditable属性为空字符串,或为true,或为inherit且其父元素状态为true),意味着该元素是可编辑。...1.3、hidden hidden属性用于隐藏该元素。一旦使用了此属性,则该元素就不会在浏览器中被显示 2个布尔值 true 规定元素是可见。 false 规定元素是不可见。...1.10、autocomplete自动补全属性 表单元素设置了自动完成功能后,会记录用户输入内容,双击表单元素会显示历史输入。...2.7、搜索输入类型 此类型表示输入将是一个搜索关键字,可显示一个搜索小图标。 ? 在Chrome右边会出现有一个清除符号。

3.5K70
领券