wiki-Empty
Empty
El componente Empty se utiliza para representar estados vacíos en tu aplicación, mostrando un ícono, un mensaje descriptivo, y contenido adicional opcional. Es altamente personalizable mediante diversas propiedades.
Referencia de la API
| Propiedad | Tipo | Descripción | Valor Predeterminado |
|---|---|---|---|
children | ReactNode | Contenido adicional que se mostrará debajo de la descripción, como un botón o enlace de acción. | undefined |
style | CSSProperties | Estilo en línea que se aplica al contenedor principal del componente. | undefined |
svgStyle | CSSProperties | Estilo en línea aplicado al ícono SVG, si se utiliza. | { width: '64px' } |
className | string | Clase CSS adicional que se aplica al contenedor principal del componente. | '' |
image | string | false | Ícono o imagen a mostrar. Puede ser uno de los valores predefinidos o un elemento personalizado. Usa false para ocultar la imagen. | EMPTY_IMAGES.warning |
description | ReactNode | false | Texto o elemento que describe el estado vacío. Usa false para ocultar la descripción. | 'No data' |
Valores Predefinidos para image
El componente incluye dos íconos predefinidos disponibles en la enumeración EMPTY_IMAGES:
| Valor | Descripción |
|---|---|
EMPTY_IMAGES.warning | Muestra un ícono de advertencia circular. |
EMPTY_IMAGES.archive | Muestra un ícono de archivo, útil para indicar elementos archivados. |
Ejemplo de Uso
import { Empty, EMPTY_IMAGES } from '@auravant/ui-kit';
export const EmptyExample = () => {
return (
<Empty
style={{ margin: '20px', textAlign: 'center' }}
svgStyle={{ width: '80px', color: '#ff9900' }}
className="custom-empty-container"
image={EMPTY_IMAGES.archive}
description="No hay elementos disponibles en este momento."
>
{/* Contenido */}
</Empty>
);
};
Notas
- Si no se proporciona la propiedad image, el componente mostrará el ícono predefinido EMPTY_IMAGES.warning.
- Si no se especifica una descripción, el texto predeterminado será 'No data'.