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

安装与调用

直联：

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

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

或者：

import 'lu2/theme/edge/css/common/ui/Textarea.css';
import 'lu2/theme/edge/css/common/ui/Placeholder.css';

普通文本域

普通文本域

最基本HTML：

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

也可以使用is属性进行设置：

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

textarea内置-块状-100%父级宽度：

<div class="ui-textarea"><textarea rows="5"></textarea></div>

也可以通过设置width="100%"实现100%父级宽度：

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

resize拉伸-内联-独立

两个方向拉伸：

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

仅垂直方向拉伸：

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

仅水平方向拉伸：

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

resize拉伸-内联-嵌套

<div class="ui-textarea"><textarea rows="4" resize="both"></textarea></div>

resize拉伸-块级-嵌套

<div class="ui-textarea"><textarea rows="4" resize="vertical" style="display:block;"></textarea></div>

只读和禁用

文本域只读： 我是内容

文本域禁用： 我是内容

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

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

文本域出错

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

嵌套结构出错：

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

带计数的文本域

演示效果：

<form is-validate>
    <div class="ui-textarea-x" style="max-width:500px;">
        <textarea class="ui-textarea" placeholder="带计数的文本域" maxlength="140" rows="5"></textarea>
    </div>
</form>