LuLu UI Edge版中文文档 » 静态控件之文本框

教程

静态控件之文本框

安装与调用

直联示意:

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui/Input.css">

或者(npm安装用法):

import 'lu2/theme/edge/css/common/ui/Input.css'

输入框如果有使用placeholder属性,可以引入 Placeholder.css 对占位符样式进行设置。

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui/Placeholder.css">
import 'lu2/theme/edge/css/common/ui/Placeholder.css';

普通文本框

基本态

最简单的input标签:
<input class="ui-input">

支持使用is属性进行设置,效果是一样的:

<input is="ui-input">

input内置-内联标签:

<span class="ui-input"><input></span>
input内置-块状标签(宽度100%自适应父容器):
<div class="ui-input"><input></div>

width属性设置宽度100%:

<input class="ui-input" width="100%">

只读和禁用

<input class="ui-input" value="只读" readonly>
<input class="ui-input" value="禁用" disabled>
<input is="ui-input" value="只读" readonly>
<input is="ui-input" value="禁用" disabled>

出错

文本框出错:

<input class="ui-input" is-error required>
<input is="ui-input" is-error>
<span class="ui-input"><input is-error required></span>

实际开发[is-error]属性会由ErrorTip.js自动添加,无需手动添加。

带计数的文本框

这里演示静态效果,输入文本内容,输入框右侧的数值并不会变化,如果想要变化,需要引入Form.js并设置表单元素的is属性为ui-form

本主题计数效果的DOM结构有别于其他主题,因为无需兼容IE浏览器,可以直接在<input>元素上使用padding撑开右侧间隙。

带计数的文本框

<div class="ui-input-x">
    <input class="ui-input" maxlength="200" placeholder="占位符">
    <label class="ui-input-count">
        <output>0</output>/<span>200</span>
    </label>
</div>
支持内联: 0/20
<span class="ui-input-x">
    <input is="ui-input" maxlength="20">
    <span class="ui-input-count"><span>0</span>/20</span>
</span>
如果使用了Validate验证,表示数量的元素可缺省:
<div class="ui-input-x">
    <input class="ui-input" maxlength="20">
</div>

其它状态

禁用状态:

<div class="ui-input-x">
    <input maxlength="20" disabled>
    <div class="ui-input"></div>
</div>

普通搜索框

搜索:

/* type='search'必须,类名'ui-input-search'可缺省 */
<input type="search" class="ui-input">

支持使用is属性:

<input type="search" is="ui-input">

除了type属性值不一样,其他使用和普通文本框一样。

带搜索图标的搜索框

内联: 搜索

<span class="ui-input ui-input-search">
    <input type="search">
    <a href="javascript:" class="ui-icon-search">搜索</a>
</span>

内联, 图标右侧:

<span class="ui-input ui-input-search" align="end">
    <input type="search" placeholder="测试">
    <button class="ui-icon-search">搜索</button>
</span>

块状定宽:

如果是直接表单提交跳转式的搜索,使用label标签可访问性和易用性最好,直接for属性值关联submit类型按钮的id即可!

<div class="ui-input ui-input-search" align="end" style="width:268px;">
    <input type="search" placeholder="测试">
    <a href="javascript:" class="ui-icon-search" role="button">搜索</a>
</div>
<div class="ui-input ui-input-search">
    <input type="search" disabled>
    <button class="ui-icon-search" disabled>搜索</button>
</div>
<div class="ui-input ui-input-search">
    <input type="search" is-error>
    <button class="ui-icon-search">搜索</button>
</div>
<span class="ui-input ui-input-search" align="end">
    <input type="search" placeholder="测试">
    <input type="submit" class="ui-icon-search" value="搜索">
</span>
<span class="ui-input ui-input-search" align="end">
    <input type="search" is-error>
    <input type="submit" class="ui-icon-search" value="搜索">
</span>
本页贡献者:

zhangxinxu,lennonover