LuLu UI hope主题中文文档

安装与调用

如果只想以插件形式单独使用文本框的样式，而不是所有 UI 组件集合ui.css，可以直接引入：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/Input/index.css">

部分快捷语法和交互能力要想生效，还需要引入对应的组件 JS，如下所示：

<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/Input/index.js"></script>

或者：

<script type="module">
    import 'https://qidian.gtimg.com/lulu/hope/ui/Input/index.js';
</script>

传统文本框

给 <input> 元素设置 is="ui-input" 即可。

<input is="ui-input">
<input is="ui-input" placeholder="输入内容">

虽然 <input> 元素也支持类名 .ui-input，但是只有静态的样式效果，非必要不要使用。

无框文本框

可以使用自定义的 border 属性进行无框文本框的设置。

底边输入框

输入框只有底部有一条线，设置 border="bottom"。

<input type="tel" is="ui-input" border="bottom" placeholder="手机号">

如果引入了对应的组件 JS，则可以通过设置 label 属性实现占位符切换为标题的交互效果。

<input type="tel" is="ui-input" border="bottom" label="手机号">

可以使用 height 属性设置成更适合这种交互的高度。

<input is="ui-input" height="4rem" border="bottom" label="邮箱">

无边输入框

通过设置 border="none" 可以设置无边输入框，代码示意：

<input is="ui-input" border="none">

无边输入框需要和列表布局组件一起使用。

手机号

验证码

<ui-list>
    <ui-list-item active="input">
        <label for="tel">手机号</label>
        <input type="tel" id="tel" is="ui-input" border="none" placeholder="请输入手机号" flex="1">
    </ui-list-item>
    <ui-list-item active="input">
        <label for="code">验证码</label>
        <input id="code" is="ui-input" inputmode="numeric" border="none" placeholder="请输入验证码" flex="1">
        <button is="ui-button" size="small">获取验证码</button>
    </ui-list-item>
</ui-list>

如果不希望点击输入框的时候列表有反馈态，可以移除 <ui-list-item> 列表元素上的 active="input" 设置。

只读和禁用

输入框只读使用原生的 readonly 属性，禁用使用原生的 disabled 属性。

<input is="ui-input" value="只读" readonly>
<input is="ui-input" value="禁用" disabled>
<input is="ui-input" value="只读" border="bottom" readonly>
<input is="ui-input" value="禁用" border="bottom" disabled>
<input is="ui-input" value="只读" border="none" readonly>
<input is="ui-input" value="禁用" border="none" disabled>

文本框只读：

文本框禁用：

出错效果

添加 is-error 属性输入框会显示为出错样式。

<input is="ui-input" is-error required>
<input is="ui-input" border="bottom" is-error>
<input is="ui-input" border="none" is-error>

实际开发 [is-error] 属性会由验证提示组件自动添加，无需手动添加。

计数效果

如果输入框设置了 minlenght 或者 maxlength 属性，输入框会自动显示计数提示效果。

<input is="ui-input" maxlength="20" placeholder="占位符">

带计数的文本框

昵称

禁用状态

<input maxlength="20" value="禁用中..." disabled>

搜索框

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

清除按钮

搜索框可能会和清除按钮一起使用，可以使用下面的布局结构，无需 JS 代码参与。

<form class="ui-flex">
    <input type="search" is="ui-input" required>
    <button type="reset" flex="none">清除</button>
</form>

禁用

样式自定义

如果引入了对应的组件 JS，则可以使用 width、height 和 radius 等属性对输入框样式进行自定义。

小尺寸文本框

默认的文本框高度是 3rem，如果希望文本框小一点，可以使用 height 属性设置一个较小的高度值。

<input is="ui-input" height="2rem" placeholder="小尺寸">
<input type="search" is="ui-input" height="36" placeholder="搜索">

注意，输入框的字号大小和输入框的高度是联动变化的，高度越小，字号也越小。

宽度的设置

可以使用 width 属性指定输入框的宽度，支持高级 CSS 数学函数，例如。

<input is="ui-input" width="min(400px, 100%)">

最小宽度 400px，但是不超过容器宽度。

圆角的设置

圆角使用 radius 属性进行设置。

<input type="search" is="ui-input" radius="100" placeholder="搜索">

图标的自定义

使用下表所示的 CSS 变量进行图标的替换。

CSS 自定义属性	默认效果	释义
--ui-input-image-search		搜索图标
--ui-input-image-clear		清除图标

下面这个例子演示了如何将搜索输入框的搜索图标替换为爱心。

.love-search {
    --ui-input-image-search: url(heart.svg);
}

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

作为普通元素使用

类似日期选择等组件，is 属性被占用，又想使用输入框的样式，可以使用类名 .ui-input，例如：

<input class="ui-input">
<input class="ui-input" border="bottom">
<input class="ui-input" border="none" placeholder="输入内容">

本页贡献者：

zhangxinxu

LuLu UI Edge版中文文档 » Input 文本框

Input 文本框