Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de estado

Última actualización:

Indicador de puntos de estado CSS Tailwind solo para CSS con variantes de color principal, de éxito, de advertencia y de error. Tallas xs-xl. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Los componentes de estado muestran el estado actual o la disponibilidad de usuarios, sistemas o procesos a través de indicadores visuales. Creadas con HTML semántico y estilos codificados por colores, las insignias de estado comunican información de estado importante. El sistema de estado de Frutjam admite múltiples colores y tamaños, ideal para la presencia del usuario, el estado del sistema y los estados del flujo de trabajo.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

Clase Tipo Descripción
statusBaseIndicador de punto pequeño para estado o presencia.
status-xsTamañoextrapequeño
status-smTamañoPequeño
status-mdTamañoMedio (predeterminado)
status-lgTamañoGrande
status-xlTamañoExtra grande
status-primaryColorColor del tema principal
status-secondaryColorColor del tema secundario
status-accentColorColor del tema de acento
status-neutralColorColor de tema neutro
status-infoColorColor semántico de información
status-successColorColor semántico del éxito
status-warningColorColor semántico de advertencia
status-errorColorColor semántico del error

Uso básico

<span class="status"></span>

<span className="status"></span>

Colores de estado

html 
1
2
3
4
5
6
7
8
<span class="status status-primary"></span>
<span class="status status-secondary"></span>
<span class="status status-accent"></span>
<span class="status status-neutral"></span>
<span class="status status-info"></span>
<span class="status status-success"></span>
<span class="status status-warning"></span>
<span class="status status-error"></span>

Tamaños de estado

html 
1
2
3
4
<span class="status status-xs status-success"></span>
<span class="status status-sm status-success"></span>
<span class="status status-md status-success"></span>
<span class="status status-lg status-success"></span>

Estado con etiqueta

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="flex items-center gap-2">
  <span class="status status-md status-success"></span>
  <span>Online</span>
</div>

<div class="flex items-center gap-2">
  <span class="status status-md status-neutral"></span>
  <span>Offline</span>
</div>

<div class="flex items-center gap-2">
  <span class="status status-md status-error"></span>
  <span>Busy</span>
</div>

<div class="flex items-center gap-2">
  <span class="status status-md status-warning"></span>
  <span>Away</span>
</div>

Estado con animación de ping

html 
<div class="status status-error animate-ping"></div>

Estado con animación de rebote

html 
1
2
3
4
<div class="flex items-center gap-2">
  <div class="status status-info animate-bounce"></div>
  <span>Unread emails</span>
</div>

Estado en la lista de usuarios

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div class="space-y-2">
  <div class="flex items-center gap-2">
    <div class="avatar avatar-online">
      U1
    </div>
    <span>John (Online)</span>
  </div>
  <div class="flex items-center gap-2">
    <div class="avatar avatar-offline">
      U2
    </div>
    <span>Jane (Offline)</span>
  </div>
  <div class="flex items-center gap-2">
    <div class="avatar avatar-busy">
      U3
    </div>
    <span>Bob (Busy)</span>
  </div>
</div>

¿Usando Claude Code, Cursor u otro editor de IA?

Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Estado según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP