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

安装与调用

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

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

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

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

普通文本域

给 <textarea> 元素设置 is="ui-textarea"。

<textarea is="ui-textarea"></textarea>

也支持 class 类名设置样式，不过只有静态效果，非不必要不要使用。

<textarea class="ui-textarea"></textarea>

无框文本域

底框文本域

设置 border="bottom"。

<textarea is="ui-textarea" border="bottom"></textarea>

<textarea is="ui-textarea" border="bottom" placeholder="发表你的高见"></textarea>

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

<textarea is="ui-textarea" border="bottom" label="评论"></textarea>

<textarea is="ui-textarea" border="bottom" label="评论"></textarea>

无框文本域

设置 border="none"。

<textarea is="ui-textarea" border="none"></textarea>

<textarea is="ui-textarea" border="none" placeholder="发表你的高见"></textarea>

<ui-list>
    <ui-list-item active="textarea">
        <label for="comment">备注</label>
        <textarea id="comment" is="ui-textarea" border="none" flex="1" placeholder="输入备注内容"></textarea>
    </ui-list-item>
</ui-list>

label[for="comment"] {
    padding-block: calc(.75rem + 1px);
    align-self: flex-start;
    line-height: 1.25;
}

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

尺寸设置

尺寸设置可以通过 HTML 属性（需要引用 组件 JS），或者直接设置对应的 CSS 变量实现。

高度设置

可以通过原生的 rows 属性指定输入域的高度，表示文本域可以显示几行文字内容。

<textarea is="ui-textarea" rows="3" placeholder="三行内容"></textarea>

也可以直接通过 height 属性指定最终具体的高度，例如 height="100vh"等。

<textarea is="ui-textarea" height="99" placeholder="高度99px"></textarea>

高度自适应

如果希望输入框的高度随着输入内容多少变化，通过设置 height="auto" 实现。

<textarea is="ui-textarea" height="auto" placeholder="高度自动"></textarea>

                        <textarea is="ui-textarea" height="auto" placeholder="高度自动"></textarea>

<textarea is="ui-textarea" height="auto" rows="1" label="默认单行" border="bottom"></textarea>
                    

如果希望默认高度超过 2 行内容，使用 min-height 属性进行设置。

<textarea is="ui-textarea" height="auto" style="min-height:80px;" placeholder="最小高度80px"></textarea>

宽度设置

文本域默认宽度 100% 呈现，如果希望指定宽度大小，可以使用 width 属性进行设置，例如：

<textarea is="ui-textarea" width="50%"></textarea>

<textarea is="ui-textarea" width="min(100%, 480px)"></textarea>

底层实现

宽度和高度的底层均是通过对应的 CSS 变量实现的。

拉伸设置

两个方向拉伸设置 resize="both"。

<textarea is="ui-textarea" resize="both"></textarea>

仅垂直方向拉伸设置 resize="vertical"。

<textarea is="ui-textarea" resize="vertical"></textarea>

仅水平方向拉伸设置 resize="horizontal"。

<textarea is="ui-textarea" resize="horizontal"></textarea>

带计数的文本域

文本域如果有 minlength 或者 maxlength 属性，则会自带计数效果。

<textarea is="ui-textarea" minlength="5" maxlength="250" rows="5" placeholder="发布点评（5-250字）"></textarea>

<textarea is="ui-textarea" minlength="5" maxlength="250" rows="5" placeholder="发布点评（5-250字）"></textarea>
<hr>
<textarea is="ui-textarea" maxlength="140" border="none" placeholder="分享新鲜事"></textarea>
<hr>
<textarea is="ui-textarea" maxlength="140" border="bottom" label="点评"></textarea>

只读、禁用和出错

只读效果设置 readonly 属性，禁用效果设置 disabled 属性。

<textarea is="ui-textarea" readonly></textarea>
<textarea is="ui-textarea" disabled></textarea>

文本域出错

通过 is-error 属性触发。

<textarea is="ui-textarea" is-error></textarea>