快速开始 主题配置
容器
布局 Layout 容器 Docker 定位 Position 外边距 Margin 内边距 Padding 溢出 Overflow
元素
颜色 Color 文字 Font 图标 Icon 图片 Image 按钮 Button 提示 Tip 标签 Tag 徽标 Badge 表格 Table 菜单 Menu 面包屑 Breadcrumb 选项卡 Tab 分页 Pagination 阴影 Shadow
组件
表单 Form 输入框 Input 文本域 Textarea 单选框 Radio 多选框 Checkbox 选择器 Select 计数器 Counter 折叠面板 Collapse 模态框 Modal 动画 Animation
作者
问题反馈

输入框 Input

概述

基础组件,触发业务逻辑时使用。

基础输入框

用法:设置类j-input-inner,默认宽为100%,你可以在外部容器上添加类来定义宽度。如:

<div class="j-input">
    <input type="text" placeholder="请输入内容" class="j-input-inner">
</div>
禁用状态

用法:设置属性disabled如:

<div class="j-inputj-is-disabled">
    <input type="text" placeholder="请输入内容" class="j-input-inner" disabled>
</div>
不同尺寸

用法:设置类j-is-*来设定尺寸,*为尺寸值。如:

<div class="j-input j-is-small">
    <input type="text" placeholder="请输入内容" class="j-input-inner">
</div>

4个不同尺寸:默认和j-is-mediumj-is-smallj-is-mini

内置图标 - 图标在后

用法:设置类j-input-suffix,input后写入图标项目和交互绑定。如:

<div class="j-input j-input-suffix">
    <input type="text" placeholder="请输入内容" class="j-input-inner">
    <span class="j-input-inner-suffix">
        <i class="iconfont icon_close"></i>//自定义图标项目
    </span>
</div>
内置图标 - 图标在前

用法:设置类j-input-prefix,input后写入图标项目和交互绑定。如:

<div class="j-input j-input-prefix">
    <input type="text" placeholder="请输入内容" class="j-input-inner">
    <span class="j-input-inner-prefix">
        <i class="iconfont icon_search"></i>//自定义图标项目
    </span>
</div>
不同主题

用法:设置类j-type-*来设定主题,*为主题值。如:

<div class="j-input j-type-primary">
    <input type="text" placeholder="请输入内容" class="j-input-inner">
</div>

6个不同主题:默认和j-type-primaryj-type-successj-type-warningj-type-dangerj-type-light

幽灵输入框

用法:设置类j-type-ghost-**为幽灵主题值。如:

<div class="j-input j-type-ghost-primary">
    <input type="text" placeholder="请输入内容" class="j-input-inner">
</div>

6个不同幽灵主题:j-type-ghostj-type-ghost-primaryj-type-ghost-successj-type-ghost-warningj-type-ghost-dangerj-type-ghost-light

隐形输入框

用法:设置类j-is-stealth。如:

<div class="j-input j-is-stealth">
    <input type="text" placeholder="请输入内容" class="j-input-inner">
</div>

注:隐形输入框仅支持基础输入框和幽灵输入框。

输入长度提醒

设置属性maxlength以实现Input长度限定,设置类j-input-count定义长度提醒位置。如:

<div class="j-input j-input-suffix">
    <input type="text" class="j-input-inner j-input-inner" maxlength="10">
    <span class="j-input-inner-suffix">
        <span class="j-input-count">
            <span class="j-input-count-inner">0/10</span>
        </span>
    </span>
</div>
0/10
日期选择器

设置属性type="date"来定义日期选择器。如:

<div class="j-input">
    <input type="date" class="j-input-inner" value="">
</div>

Value赋值格式:年-月-日,如:value="2020-02-02"

兼容型:不支持IE。

上一章:表单 Form
下一章:文本域 Textarea