24 lines
865 B
Plaintext
24 lines
865 B
Plaintext
component Alert {
|
||
props {
|
||
class = ""
|
||
title = "Notice"
|
||
description = ""
|
||
variant = "info"
|
||
dismissible = false
|
||
}
|
||
|
||
state visible = true
|
||
|
||
view {
|
||
<aside data-show="visible" role="alert" class="wire-alert wire-alert--{variant} wire-alert--rich {class}">
|
||
<span class="wire-alert__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3 4.5 6v5.4c0 4.6 3.2 8.8 7.5 9.6 4.3-.8 7.5-5 7.5-9.6V6L12 3Z" /><path d="m9 12 2 2 4-4" /></svg></span>
|
||
<div class="wire-alert__content">
|
||
{#if title}<h3 class="wire-alert__title">{title}</h3>{/if}
|
||
{#if description}<p class="wire-alert__body">{description}</p>{/if}
|
||
<slot />
|
||
</div>
|
||
{#if dismissible}<button type="button" aria-label="Dismiss" @click="visible = false" class="wire-alert__dismiss">×</button>{/if}
|
||
</aside>
|
||
}
|
||
}
|