快速开始 主题配置
容器
布局 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
作者
问题反馈

按钮 Button

概述

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

基础按钮

用法:设置类j-button。如:

<button class="j-button">按钮</button>
禁用按钮

用法:设置属性disalbed。如:

<button class="j-button" disalbed>按钮</button>
不同尺寸

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

<button class="j-button j-is-small">小按钮</button>

5种尺寸:j-is-large和默认尺寸、j-is-mediumj-is-smallj-is-mini

不同主题

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

<button class="j-button j-type-primary">按钮</button>

10种主题:默认主题和j-type-primaryj-type-successj-type-warningj-type-dangerj-type-lightj-type-darkj-type-majorj-type-blackj-type-white

10种主题对应的禁用状态:

幽灵按钮(默认实线)

用法:设置类j-type-ghost。如:

<button class="j-button j-type-ghost">按钮</button>

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

<button class="j-button j-type-ghost-primary">按钮</button>

10种主题:默认主题、j-type-ghost-primaryj-type-ghost-successj-type-ghost-warningj-type-ghost-dangerj-type-ghost-lightj-type-ghost-darkj-type-ghost-majorj-type-ghost-blackj-type-ghost-white

10种主题对应的禁用状态:

幽灵按钮(虚线)

性质:幽灵按钮的衍生按钮。

用法:在幽灵按钮基础上,设置属性dashed。如:

<button class="j-button j-type-ghost"dashed>按钮</button>

主题用法:继承幽灵按钮主题用法。如:

<button class="j-button j-type-ghost-primary"dashed>按钮</button>
幽灵按钮(星图)

性质:幽灵按钮的衍生按钮。

用法:在幽灵按钮基础上,设置属性dotted。如:

<button class="j-button j-type-ghost"dotted>按钮</button>

主题用法:继承幽灵按钮主题用法。如:

<button class="j-button j-type-ghost-primary"dotted>按钮</button>
文字按钮

性质:幽灵按钮的衍生按钮。

用法:在幽灵按钮基础上,设置属性text。如:

<button class="j-button j-type-ghost"text>文字按钮</button>

主题用法:继承幽灵按钮主题用法。如:

<button class="j-button j-type-ghost-primary"text>文字按钮</button>
圆角按钮

用法:设置类j-is-round,如:

<button class="j-button j-is-round">按钮</button>
圆形图标按钮

用法:设置类j-is-circle,如:

<button class="j-button j-is-circle">图标元素</button>
全屏宽按钮

用法:设置类j-is-full,如:

<button class="j-button j-is-full">按钮</button>
删除交互

用法:按钮文本后引入交互元素,如:

<button class="j-button">
    <span>按钮文本</span>
    <i class="iconfont icon_close j-button-close"></i>
</button>
加载交互

用法:按钮文本前引入动画元素,如:

<button class="j-button">
    <i class="iconfont icon_loading j-animation-loading"></i>
    <span>按钮文本</span>
</button>
组合按钮

用法:若干button的外层包裹j-button-group类,如:

<div class="j-button-group">
    <button class="j-button">按钮</button>
    <button class="j-button">按钮</button>
    <button class="j-button">按钮</button>
</div>
上一章:图片 Image
下一章:提示 Tip