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

文档 Github➹

静态控件之文本域

安装与调用

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

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

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

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/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>

带计数的文本域

这里演示静态效果,输入文本内容,输入框右下角的数值并不会变化。

本主题计数效果的DOM结构有别于其他主题,因为无需兼容IE浏览器,可以使用更加简洁的HTML结构进行实现。

<div class="ui-textarea-x" style="max-width:500px;">
    <textarea id="someId" class="ui-textarea" maxlength="250" rows="5"></textarea>
    <-- 点击任意区域文本域都能focus,可缺省 -->
    <label for="someId" class="ui-textarea-count">
        <span>0</span>/<span>250</span>
    </label>
</div>
如果是在使用Validate验证的form元素内,此label元素可缺省,直接下面代码结构:
<div class="ui-textarea-x">
    <textarea maxlength="250"></textarea>
</div>

禁用

<div class="ui-textarea-x">
    <textarea class="ui-textarea" disabled rows="3"></textarea>
    <label class="ui-textarea-count">0/140</label>
</div>

出错

<span class="ui-textarea-x">
    <textarea is="ui-textarea" is-error></textarea>
    <label class="ui-textarea-count">
        <span is-error>260</span>/<span>250</span>
    </label>
</span>
本页贡献者:

zhangxinxu,lennonover