Componente
Alert
Messaggi di stato con la barra sinistra .italia: daisyUI alert, con bordo sinistro da 8px nel colore della variante e icona colorata.
- Riferimento
<it-alert>- Classi
ita-alertita-alert-primaryita-alert-secondaryita-alert-successita-alert-warningita-alert-dangerita-alert-iconita-alert-close- Basato su (daisyUI)
alertbtn-ghostbtn-square- Solo CSS
- La chiusura usa un checkbox dentro la label ita-alert-close: quando è selezionato, ita-alert:has(… input:checked) nasconde l'alert. Niente JavaScript.
- Storybook
- Apri le storie di Alert
Esempi
Questo è un alert di tipo "primary".
Questo è un alert di tipo "secondary".
Questo è un alert di tipo "success".
Questo è un alert di tipo "warning".
Questo è un alert di tipo "danger".
Mostra il codice HTMLNascondi il codice HTML
<div class="flex flex-col gap-4">
<div role="alert" class="ita-alert ita-alert-primary">
<svg class="ita-alert-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21L12,21z M11.3,6h1.5v2h-1.5V6z M11.3,9h1.5v9h-1.5V9z" /></svg>
<div>Questo è un alert di tipo "<strong>primary</strong>".</div>
</div>
<div role="alert" class="ita-alert ita-alert-secondary">
<svg class="ita-alert-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21L12,21z M11.3,6h1.5v2h-1.5V6z M11.3,9h1.5v9h-1.5V9z" /></svg>
<div>Questo è un alert di tipo "<strong>secondary</strong>".</div>
</div>
<div role="alert" class="ita-alert ita-alert-success">
<svg class="ita-alert-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.1,7.9l0.7,0.7L10,16.2l-4.7-4.6L6,10.9l4,3.9L17.1,7.9z M22,12c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2S22,6.5,22,12z M21,12c0-5-4-9-9-9s-9,4-9,9s4,9,9,9S21,17,21,12z" /></svg>
<div>Questo è un alert di tipo "<strong>success</strong>".</div>
</div>
<div role="alert" class="ita-alert ita-alert-warning">
<svg class="ita-alert-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21L12,21z M11.5,14.2V5.7h1.2v8.5H11.5z M11.4,16.5h1.2v1.8h-1.2V16.5z" /></svg>
<div>Questo è un alert di tipo "<strong>warning</strong>".</div>
</div>
<div role="alert" class="ita-alert ita-alert-danger">
<svg class="ita-alert-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M16.3,8.3L12.6,12l3.7,3.6l-0.7,0.7l-3.7-3.6l-3.6,3.6l-0.7-0.7l3.6-3.6L7.6,8.3l0.7-0.7l3.6,3.7l3.7-3.7L16.3,8.3z M22,12 c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2S22,6.5,22,12z M21,12c0-5-4-9-9-9s-9,4-9,9s4,9,9,9S21,17,21,12z" /></svg>
<div>Questo è un alert di tipo "<strong>danger</strong>".</div>
</div>
</div>Link evidenziato
Questo è un alert con un esempio di link evidenziato.
Mostra il codice HTMLNascondi il codice HTML
<div role="alert" class="ita-alert ita-alert-danger">
<svg class="ita-alert-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M16.3,8.3L12.6,12l3.7,3.6l-0.7,0.7l-3.7-3.6l-3.6,3.6l-0.7-0.7l3.6-3.6L7.6,8.3l0.7-0.7l3.6,3.7l3.7-3.7L16.3,8.3z M22,12 c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2S22,6.5,22,12z M21,12c0-5-4-9-9-9s-9,4-9,9s4,9,9,9S21,17,21,12z" /></svg>
<div>Questo è un alert con un esempio di <a href="#" class="link font-semibold">link evidenziato</a>.</div>
</div>Contenuto aggiuntivo
Avviso di successo!
Stai leggendo questo importante messaggio di avviso di successo. Questo testo di esempio sarà più lungo in modo da poter vedere come funzioni la spaziatura all'interno di un avviso con questo tipo di contenuto.
Quando necessario, assicurati di inserire le utilità di margine per mantenere gli spazi equilibrati.
Mostra il codice HTMLNascondi il codice HTML
<div role="alert" class="ita-alert ita-alert-success">
<svg class="ita-alert-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M17.1,7.9l0.7,0.7L10,16.2l-4.7-4.6L6,10.9l4,3.9L17.1,7.9z M22,12c0,5.5-4.5,10-10,10S2,17.5,2,12S6.5,2,12,2S22,6.5,22,12z M21,12c0-5-4-9-9-9s-9,4-9,9s4,9,9,9S21,17,21,12z" /></svg>
<div><h4 class="mb-2 text-2xl font-bold">Avviso di successo!</h4>
<p>Stai leggendo questo importante messaggio di avviso di successo. Questo testo di esempio sarà più lungo in modo da poter vedere come funzioni la spaziatura all'interno di un avviso con questo tipo di contenuto.</p>
<hr class="my-4 border-base-content/20">
<p>Quando necessario, assicurati di inserire le utilità di margine per mantenere gli spazi equilibrati.</p></div>
</div>Chiusura
Premi la X (o Spazio sul pulsante a fuoco): l'alert si nasconde solo con CSS.
Attenzione Alcuni campi inseriti sono da controllare.
Mostra il codice HTMLNascondi il codice HTML
<div role="alert" class="ita-alert ita-alert-warning">
<svg class="ita-alert-icon shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z M12,21c-5,0-9-4-9-9s4-9,9-9s9,4,9,9S17,21,12,21L12,21z M11.5,14.2V5.7h1.2v8.5H11.5z M11.4,16.5h1.2v1.8h-1.2V16.5z" /></svg>
<div><strong>Attenzione</strong> Alcuni campi inseriti sono da controllare.</div>
<label class="ita-alert-close">
<input type="checkbox" class="sr-only"><span class="sr-only">Chiudi avviso</span><svg class="shrink-0 fill-current" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.7,12l3.7,3.6l-0.8,0.8L12,12.7l-3.6,3.7l-0.8-0.8l3.7-3.6L7.6,8.4l0.8-0.8l3.6,3.7l3.6-3.7l0.8,0.8L12.7,12z" /></svg>
</label>
</div>