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

标签 Tag

概述

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

基础标签

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

<span class="j-tag">标签</span>
标签
不同尺寸

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

<span class="j-tag j-is-small">小标签</span>
小标签

4种尺寸:默认尺寸和j-is-mediumj-is-smallj-is-mini

Default Medium Small Mini
不同主题

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

<span class="j-tag j-type-primary">Primary</span>
Primary

7种主题:默认主题和j-type-primaryj-type-successj-type-warningj-type-dangerj-type-lightj-type-dark

Default Primary Success Warning Danger Light Dark
幽灵标签

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

<span class="j-tag j-type-ghost">标签</span>
标签

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

<span class="j-tag j-type-ghost-primary">标签</span>
Default Primary Success Warning Danger Light Dark
删除交互

用法:标签文本后引入交互元素,如:

<span>标签文本<i class="iconfont icon_close j-tag-close"></i></span>
Default Medium Small Mini Danger Light Dark
Default Medium Small Mini Danger Light Dark
标签组

使用建议:当需要输出多个标签时使用。

用法:设置类j-tag-group,如:

<div class="j-tag-group">
    <div class="j-tag j-is-mini j-type-success">标签1</div>
    <div class="j-tag j-is-mini j-type-success">标签2</div>
    <div class="j-tag j-is-mini j-type-success">标签3</div>
    <div class="j-tag j-is-mini j-type-success">标签4</div>
</div>
标签1
标签2
标签3
标签4
上一章:提示 Tip
下一章:徽标 Badge