@for (platform of platforms; track $index) {
<h2>{{ platform === 'web' ? 'Desktop' : 'Mobile' }}</h2>
<section [tuiPlatform]="platform">
<button
tuiToast
type="button"
>
Plain text interactive
</button>
<div tuiToast>
With action
<button
tuiButton
type="button"
>
Action
</button>
</div>
</section>
<section [tuiPlatform]="platform">
<div
iconStart="@tui.info"
tuiToast
>
With icon
</div>
<div tuiToast>
<tui-icon
appearance="accent"
iconStart="@tui.box"
tuiBadge
/>
With badge
<button tuiButtonX>Close</button>
</div>
</section>
<section [tuiPlatform]="platform">
<div tuiToast>
<div tuiAvatar="@tui.user">
<img
alt=""
src="https://github.com/waterplea.png"
/>
</div>
Avatar
</div>
<div tuiToast>
<div tuiAvatar="@tui.user">
<img
alt=""
src="https://github.com/marsibarsi.png"
/>
</div>
Everything
<button
tuiButton
type="button"
>
Action
</button>
@if (platform === 'web') {
<button tuiButtonX>Close</button>
}
</div>
</section>
<section [tuiPlatform]="platform">
<div
iconStart="@tui.alarm-clock"
tuiShrinkWrap="min(25rem, 100%)"
tuiToast
>
<tui-shrink-wrap>
The text of the notification telling what happened is in three lines because there is a lot of
information
</tui-shrink-wrap>
<button
tuiButton
type="button"
>
Action
</button>
</div>
</section>
}
Copy
:host {
display: flex;
flex-direction: column;
gap: 1rem;
background: var(--tui-background-base-alt);
box-shadow: 0 0 0 100rem var(--tui-background-base-alt);
}
section {
display: flex;
gap: 1rem;
align-items: flex-start;
}
[tuiToast]::before {
color: var(--tui-background-accent-1);
}
Copy
