Alert
Ejemplos de variantes de alert y asertividad.
Ejemplos
import * as Alert from "@solidiom/alert"
;<Alert.Root type="info">
<Alert.Title>Información</Alert.Title>
<Alert.Description>Una nueva característica está disponible en tu panel.</Alert.Description>
</Alert.Root>Variantes
Alert soporta cuatro variantes visuales controladas por el prop type.
;<Alert.Root type="success">
<Alert.Title>Éxito</Alert.Title>
<Alert.Description>Tus cambios han sido guardados.</Alert.Description>
</Alert.Root>
;<Alert.Root type="warning">
<Alert.Title>Advertencia</Alert.Title>
<Alert.Description>Estás acercándote a tu límite de almacenamiento.</Alert.Description>
</Alert.Root>
;<Alert.Root type="error">
<Alert.Title>Error</Alert.Title>
<Alert.Description>No se pudo conectar al servidor.</Alert.Description>
</Alert.Root>Asertividad
Controla cómo se anuncia el alert a los lector de pantalla con el prop assertiveness. Usa polite para actualizaciones no urgentes que no deberían interrumpir al usuario.
;<Alert.Root type="info" assertiveness="polite">
<Alert.Title>Actualización</Alert.Title>
<Alert.Description>Se han recibido nuevos mensajes.</Alert.Description>
</Alert.Root>Información
Una nueva función está disponible en su panel.
Éxito
Sus cambios se han guardado.
Advertencia
Se está aproximando al límite de almacenamiento.
Error
No se pudo conectar con el servidor.
Ver código fuente
export function Root(props: AlertRootProps) {
const titleId = createStableId("alert-title")
const descriptionId = createStableId("alert-desc")
const role = () => (props.assertiveness === "polite" ? "status" : "alert")
const alertType = () => props.type ?? "info"
return (
<AlertContext value={{ titleId, descriptionId }}>
<div
role={role()}
aria-labelledby={titleId}
aria-describedby={descriptionId}
class={props.class}
{...applySemanticAttrs({ scope: "alert", part: "root", state: alertType() })}
>
{props.children}
</div>
</AlertContext>
)
}