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; /* 调整间距 */
}