Volver a Components

Info Field

<sg-info-field> v0.1.1

Muestra pares etiqueta-valor con formateo automático según el tipo. Soporta texto, fechas, estados, monedas, booleanos y arrays.

Ejemplos

Texto

example.html 
<sg-info-field label="Nombre" value="John Doe"></sg-info-field>
<sg-info-field label="Email" value="john@example.com"></sg-info-field>
<sg-info-field label="Descripción"></sg-info-field>

Fechas

example.html 
<sg-info-field label="Creado" value="2024-01-15" class="hl-keyword">type="date"></sg-info-field>
<sg-info-field label="Última actualización" value="2024-01-15T14:30:00" class="hl-keyword">type="datetime"></sg-info-field>

Estados

example.html 
<sg-info-field label="Estado" value="active" class="hl-keyword">type="status"></sg-info-field>
<sg-info-field label="Estado" value="pending" class="hl-keyword">type="status"></sg-info-field>
<sg-info-field label="Estado" value="inactive" class="hl-keyword">type="status"></sg-info-field>

Moneda

example.html 
<sg-info-field label="Precio" value="99.99" class="hl-keyword">type="currency"></sg-info-field>
<sg-info-field label="Total USD" value="149.50" class="hl-keyword">type="currency" currency-symbol="$"></sg-info-field>

Booleano

example.html 
<sg-info-field label="Verificado" value="true" class="hl-keyword">type="boolean"></sg-info-field>
<sg-info-field label="Activo" value="false" class="hl-keyword">type="boolean"></sg-info-field>

Ficha completa
example.html 
<sg-card card-title="Información del Usuario">
  <sg-info-field label="Nombre" value="John Doe"></sg-info-field>
  <sg-info-field label="Email" value="john@example.com"></sg-info-field>
  <sg-info-field label="Estado" value="active" class="hl-keyword">type="status"></sg-info-field>
  <sg-info-field label="Suscripción" value="49.99" class="hl-keyword">type="currency"></sg-info-field>
  <sg-info-field label="Verificado" value="true" class="hl-keyword">type="boolean"></sg-info-field>
  <sg-info-field label="Fecha registro" value="2024-01-15" class="hl-keyword">type="date"></sg-info-field>
</sg-card>

API Reference

Propiedades

9
Prop Tipo Default Descripción
label string '' Etiqueta del campo
value any undefined Valor a mostrar
type 'text' | 'date' | 'datetime' | 'status' | 'currency' | 'boolean' | 'html' | 'array' | 'custom' 'text' Tipo de formateo
status-map Record<string, StatusMapItem> {...} Mapa de estados personalizados
currency-symbol string '€' Símbolo de moneda
locale string 'es-ES' Locale para formateo de fechas
empty-text string 'No especificado' Texto cuando no hay valor
true-text string 'Sí' Texto para boolean true
false-text string 'No' Texto para boolean false

Cómo usar