logoOutUI

⌘ K
  • 指南
  • 组件
  • 工具类
  • 其他
v5.3.x
  • 组件总览
  • 通用
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Text 文本
    • Link 链接
    • Typography 排版
  • 布局
    • Grid 栅格
    • Layout 布局
    • Stack 堆栈
  • 表单
    • Input 输入框
    • Select 选择器
    • Radio 单选框
    • Checkbox 复选框
    • Input group 输入组
    • Float label 浮动标签
    • ColorPicker 颜色选择器
    • Slider 滑块
    • Switch 开关
    • Upload 文件上传
    • Form 表单
  • 导航
    • Affix 固钉
    • Breadcrumb 面包屑
    • Dropdown 下拉菜单
    • NavBar 导航栏
    • NavMenu 导航菜单
    • Tabs 标签页
    • Pagination 分页
  • 数据
    • Table 表格
    • Tag 标签
    • Progress 进度条
    • Badge 徽章
    • Avatar 头像
最后更新时间:
Table 表格Progress 进度条
Copyright © 2021-present 粤ICP备2021136339号
‌
‌
‌
‌

Tag 标签

用于标记和选择。

基本用法

带图标的标签

可点击的标签

带有关闭按钮的标签

动态标签

样式

基本样式

.outui-tag {
display: inline-block;
padding: 0 8px;
font-size: 14px;
line-height: 22px;
background-color: #f6f6f6;
border: 1px solid #d9d9d9;
border-radius: 2px;
color: rgba(0, 0, 0, 0.65);
transition: all 0.3s;
}
.outui-tag-primary {
background-color: #1890ff;
color: #fff;
border-color: #1890ff;
}
.outui-tag-secondary {
background-color: #f5f5f5;
color: rgba(0, 0, 0, 0.65);
border-color: #d9d9d9;
}
.outui-tag-success {
background-color: #b7eb8f;
color: #000;
border-color: #b7eb8f;
}
.outui-tag-danger {
background-color: #ff4d4f;
color: #fff;
border-color: #ff4d4f;
}
.outui-tag-warning {
background-color: #ffc53d;
color: #000;
border-color: #ffc53d;
}
.outui-tag-info {
background-color: #1890ff;
color: #fff;
border-color: #1890ff;
}
.outui-tag-light {
background-color: #f5f5f5;
color: rgba(0, 0, 0, 0.65);
border-color: #d9d9d9;
}
.outui-tag-dark {
background-color: #000;
color: #fff;
border-color: #000;
}
/* 小尺寸标签 */
.outui-tag-small {
height: 20px;
font-size: 12px;
line-height: 18px;
padding: 0 6px;
}
/* 大尺寸标签 */
.outui-tag-large {
height: 32px;
font-size: 16px;
line-height: 30px;
padding: 0 12px;
}
/* 新增关闭按钮样式 */
.btn-close {
padding: 0;
margin-left: 4px;
font-size: 10px;
line-height: 1;
color: rgba(0, 0, 0, 0.5);
text-shadow: none;
opacity: 0.5;
}
.btn-close:hover {
opacity: 1;
}
.btn-close-white {
color: #fff;
text-shadow: none;
}

动态添加样式

#tagWrapper {
display: flex;
align-items: center;
gap: 8px; /* 调整间距 */
}
#addTagButton, #tagInput {
width: 110px; /* 设置相同的宽度 */
font-size: 14px;
}
#tagContainer {
display: flex;
flex-wrap: wrap;
gap: 8px; /* 调整间距 */
}