输入框

所有设置了.vus-input类的<input><textarea>或者<select>元素都将被默认设置宽度属性为width: 100%;。(注:<select>元素请参阅选择菜单API文档)

基础用法

<input type="text" class="vus-input" placeholder="请输入内容">

文本域

支持多行文本的表单控件。可根据需要改变rows属性。

<textarea rows="2" class="vus-input" placeholder="请输入内容"></textarea>

尺寸

  • 添加下列类来改变<input>输入框的尺寸。
  • .small:小型输入框。
  • .large:大型输入框。
<input type="text" class="vus-input small" placeholder="小型输入框">
<input type="text" class="vus-input large" placeholder="大型输入框">

颜色

  • 添加下列类来改变输入框的边框颜色。
  • .primary:首选、主要。
  • .success:成功。
  • .warning:警告。
  • .danger:危险、错误。
  • .info:信息。
  • .dark:暗黑。
  • .light:亮灰。
  • .white:白色。
  • .default:默认边框。
<!-- 首选 -->
<input type="text" class="vus-input primary" placeholder="首选">
<input type="text" class="vus-input primary default" placeholder="首选(默认边框)">

<!-- 成功 -->
<input type="text" class="vus-input success" placeholder="成功">
<input type="text" class="vus-input success default" placeholder="成功(默认边框)">

<!-- 警告 -->
<input type="text" class="vus-input warning" placeholder="警告">
<input type="text" class="vus-input warning default" placeholder="警告(默认边框)">

<!-- 危险 -->
<input type="text" class="vus-input danger" placeholder="危险">
<input type="text" class="vus-input danger default" placeholder="危险(默认边框)">

<!-- 信息 -->
<input type="text" class="vus-input info" placeholder="信息">
<input type="text" class="vus-input info default" placeholder="信息(默认边框)">

<!-- 暗黑 -->
<input type="text" class="vus-input dark" placeholder="暗黑">
<input type="text" class="vus-input dark default" placeholder="暗黑(默认边框)">

<!-- 亮灰 -->
<input type="text" class="vus-input light" placeholder="亮灰">
<input type="text" class="vus-input light default" placeholder="亮灰(默认边框)">

<!-- 白色 -->
<input type="text" class="vus-input white" placeholder="白色">
<input type="text" class="vus-input white default" placeholder="白色(默认边框)">

Focus状态

    添加.focus类,设置为focus状态。
<input type="text" class="vus-input focus" placeholder="默认focus">

禁用与只读

    添加disabled或者readonly属性,可设置输入框为禁用状态和只读模式。
<input type="text" class="vus-input" disabled placeholder="禁用状态(disabled)">
<input type="text" class="vus-input" readonly placeholder="只读模式(readonly)">