Twitter0

Sonner

An opinionated toast component for Angular.

About

Sonner is built on top of ngx-sonner by @tutkli .

Installation

npx nx g @spartan-ng/cli:ui sonner

Usage

import { toast } from 'ngx-sonner';
import { HlmToasterImports } from '@spartan-ng/helm/sonner';
<hlm-toaster />
<button hlmBtn (click)="showToast()">Show Toast</button>

Helm API

HlmToaster

Selector: hlm-toaster

Inputs

PropTypeDefaultDescription
invert ToasterProps['invert'] false -
theme ToasterProps['theme'] light -
position ToasterProps['position'] bottom-right -
hotKey ToasterProps['hotkey'] [altKey, KeyT] -
richColors ToasterProps['richColors'] false -
expand ToasterProps['expand'] false -
duration ToasterProps['duration'] 4000 -
visibleToasts ToasterProps['visibleToasts'] 3 -
closeButton ToasterProps['closeButton'] false -
toastOptions ToasterProps['toastOptions'] {} -
offset ToasterProps['offset'] null -
dir ToasterProps['dir'] auto -
class ClassValue --
style Record<string, string> { --normal-bg: var(--popover), --normal-text: var(--popover-foreground), --normal-border: var(--border), --border-radius: var(--radius), } -
Table Slider