Getting Started
Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Button Group
- Calendar
- Card
- Carousel
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Dropdown Menu
- Empty
- Field
- Form Field
- Hover Card
- Icon
- Input Group
- Input OTP
- Input
- Item
- Kbd
- Label
- Menubar
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner (Toast)
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toggle
- Toggle Group
- Tooltip
Stack
Sonner
An opinionated toast component for Angular.
import { Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmToasterImports } from '@spartan-ng/helm/sonner';
import { toast } from 'ngx-sonner';
@Component({
selector: 'spartan-sonner-preview',
imports: [HlmToasterImports, HlmButtonImports],
template: `
<hlm-toaster />
<button hlmBtn (click)="showToast()">Show Toast</button>
`,
})
export class SonnerPreview {
showToast() {
toast('Event has been created', {
description: 'Sunday, December 03, 2023 at 9:00 AM',
action: {
label: 'Undo',
onClick: () => console.log('Undo'),
},
});
}
}About
Sonner is built on top of ngx-sonner by @tutkli .
Installation
ng g @spartan-ng/cli:ui sonner
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
| Prop | Type | Default | Description |
|---|---|---|---|
| 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), } | - |
On This Page
Stop configuring. Start shipping.
Zerops powers spartan.ng and Angular teams worldwide.
One-command deployment. Zero infrastructure headaches.
Deploy with Zerops