Spartans get ready! v1 is coming!
We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.
Getting Started
Stack
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
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
npx nx g @spartan-ng/cli:ui sonner
ng 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), } | - |