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>
需要引入 Validate.js 方有计数效果。
本页贡献者:

zhangxinxu,lennonover