Badge
Un badge es una decoración visual para elementos de la interfaz que se usa para mostrar notificaciones, indicadores de estado o cantidades. Admite distintos colores y estilos para adaptarse a diversas necesidades de la interfaz.
Uso
<script>
import { Badge } from 'fluentui-svelte';
</script>
<Badge>36</Badge>Apariencia
Usa la prop appearance para cambiar entre los estilos filled, outline, tint y ghost.
Tamaños
Usa la prop size para controlar las dimensiones del badge.
Formas
Usa la prop shape para renderizar badges circulares, redondeados o cuadrados.
Color
Usa la prop color para comunicar diferentes estados y prioridades.
Ícono
Usa la prop icon para renderizar un ícono dentro del badge. Puedes pasar el ícono como snippet o como componente.
Props de Badge
| Name | Type | Default | Description |
|---|---|---|---|
size | number | 20 | El tamaño del badge en píxeles. |
shape | 'circular' | 'rounded' | 'square' | 'circular' | El badge puede tener forma circular, redondeada o cuadrada. |
appearance | 'filled' | 'outline' | 'ghost' | 'tint' | 'filled' | El badge puede tener su fondo y su borde estilizados para dar mayor énfasis o para verse más sutil. |
iconPosition | 'before' | 'after' | 'before' | La posición del icono respecto al contenido del badge. |
color | Colors | 'information' | El color del badge. Por ahora solo admite los colores del sistema. |
icon | Snippet | Component | Icono que se renderiza dentro del badge. | |
ref bindable | HTMLSpanElement | La referencia del DOM del elemento badge. | |
| HTML Attributes |
API de BadgeIcon
Este componente es útil cuando quieres mostrar un ícono con forma de Badge en alguna parte de tu aplicación.
Uso
<script>
import { BadgeIcon } from 'fluentui-svelte';
import { AccessibilityRegular } from 'fluentui-icons-svelte';
</script>
<BadgeIcon size={96} icon={AccessibilityRegular} />Un ejemplo es usar este componente dentro de Avatar:
De forma predeterminada, Avatar usa una instancia de BadgeIcon. Como puedes ver, el primer ejemplo a la izquierda usa el componente Badge, lo que agrega un relleno no deseado en su interior. En Avatar puedes usar una de las opciones predefinidas de BadgeIcon o establecer un ícono personalizado pasándolo como propiedad. Cuando usas la opción component, los estilos se aplican automáticamente, pero con #snippet debes asegurarte de pasar los argumentos al ícono de esta manera:
<script>
import { Avatar, Badge } from 'fluentui-svelte';
import { AccessibilityRegular } from 'fluentui-icons-svelte';
</script>
<!-- args: [size: number, shape: string] -->
{#snippet customBadge(args)}
<Badge color="attention" size={args.width} aria-hidden={args['aria-hidden']} icon={AccessibilityRegular} />
{/snippet}
<Avatar active="active" size={96} name="FluentUI Svelte" badge={{ icon: customBadge }} />Props de BadgeIcon
| Name | Type | Default | Description |
|---|---|---|---|
status | Statuses | 'available' | El estado de presencia que se muestra. Determina tanto el icono como el color del badge. |
outOfOffice | boolean | false | Decora el icono de presencia para indicar que la persona está fuera de la oficina. |
size | number | 20 | El tamaño del badge en píxeles. |
color | Colors | Reemplaza el color que el estado elegiría por su cuenta. | |
icon | Snippet | Component | Icono personalizado, que se renderiza en lugar del que el estado elegiría por su cuenta. | |
ref bindable | HTMLSpanElement | La referencia del DOM del elemento badge. | |
| HTML Attributes |