TStatus / 状态标签

Status displays labels for indicating states or statuses. Supports colored backgrounds, dots with animation, and lite variants. / 状态标签用于展示状态指示与标记，支持彩色背景、圆点动画和浅色变体。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
color	BaseColor	'blue'	Color
dot	boolean	false	Show dot indicator
animated	boolean	false	Animated dot (requires dot)
lite	boolean	false	Lite background variant

Basic Usage / 基础用法

<script setup lang="ts">
import { TStatus, TStatusDot } from '@gulcc/tabler-vue'
</script>

<template>
  <TStatus color="success">Online / 在线</TStatus>
  <TStatus color="danger" dot>Offline / 离线</TStatus>
  <TStatus color="warning" dot animated>Pending / 待处理</TStatus>
  <TStatus color="blue" lite>Info / 信息</TStatus>
</template>

Tips / 避坑指南

• animated requires dot=true to work — the animation applies to the dot indicator
• lite adds status-lite class for a softer background color variant
• Use TStatusDot when you only need the dot without text