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.
- 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
Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
import { Component } from '@angular/core';
import { BrnAlertDialogImports } from '@spartan-ng/brain/alert-dialog';
import { HlmAlertDialogImports } from '@spartan-ng/helm/alert-dialog';
import { HlmButton } from '@spartan-ng/helm/button';
@Component({
selector: 'spartan-alert-dialog-preview',
imports: [BrnAlertDialogImports, HlmAlertDialogImports, HlmButton],
template: `
<hlm-alert-dialog>
<button id="edit-profile" variant="outline" brnAlertDialogTrigger hlmBtn>Show Dialog</button>
<hlm-alert-dialog-content *brnAlertDialogContent="let ctx">
<hlm-alert-dialog-header>
<h2 hlmAlertDialogTitle>Are you absolutely sure?</h2>
<p hlmAlertDialogDescription>
This action cannot be undone. This will permanently delete your account and remove your data from our
servers.
</p>
</hlm-alert-dialog-header>
<hlm-alert-dialog-footer>
<button hlmAlertDialogCancel (click)="ctx.close()">Cancel</button>
<button hlmAlertDialogAction (click)="ctx.close()">Continue</button>
</hlm-alert-dialog-footer>
</hlm-alert-dialog-content>
</hlm-alert-dialog>
`,
})
export class AlertDialogPreview {}Installation
npx nx g @spartan-ng/cli:ui alert-dialog
ng g @spartan-ng/cli:ui alert-dialog
Usage
import { BrnAlertDialogImports } from '@spartan-ng/brain/alert-dialog';
import { HlmAlertDialogImports } from '@spartan-ng/helm/alert-dialog';<hlm-alert-dialog>
<button id="edit-profile" variant="outline" brnAlertDialogTrigger hlmBtn>Show Dialog</button>
<hlm-alert-dialog-content *brnAlertDialogContent="let ctx">
<hlm-alert-dialog-header>
<h2 hlmAlertDialogTitle>Are you absolutely sure?</h2>
<p hlmAlertDialogDescription>
This action cannot be undone. This will permanently delete your account and remove your data from our
servers.
</p>
</hlm-alert-dialog-header>
<hlm-alert-dialog-footer>
<button hlmAlertDialogCancel (click)="ctx.close()">Cancel</button>
<button hlmAlertDialogAction (click)="ctx.close()">Continue</button>
</hlm-alert-dialog-footer>
</hlm-alert-dialog-content>
</hlm-alert-dialog>Brain API
BrnAlertDialogContent
Selector: [brnAlertDialogContent]
BrnAlertDialogDescription
Selector: [brnAlertDialogDescription]
BrnAlertDialogOverlay
Selector: brn-alert-dialog-overlay
BrnAlertDialogTitle
Selector: [brnAlertDialogTitle]
BrnAlertDialogTrigger
Selector: button[brnAlertDialogTrigger],button[brnAlertDialogTriggerFor]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| brnAlertDialogTriggerFor | BrnAlertDialog | undefined | - | - |
| type | 'button' | 'submit' | 'reset' | button | - |
BrnAlertDialog
Selector: brn-alert-dialog
ExportAs: brnAlertDialog
Helm API
HlmAlertDialogActionButton
Selector: button[hlmAlertDialogAction]
HlmAlertDialogCancelButton
Selector: button[hlmAlertDialogCancel]
HlmAlertDialogContent
Selector: hlm-alert-dialog-content
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmAlertDialogDescription
Selector: [hlmAlertDialogDescription]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmAlertDialogFooter
Selector: hlm-alert-dialog-footer
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmAlertDialogHeader
Selector: hlm-alert-dialog-header
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmAlertDialogOverlay
Selector: [hlmAlertDialogOverlay],brn-alert-dialog-overlay[hlm]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmAlertDialogTitle
Selector: [hlmAlertDialogTitle]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmAlertDialog
Selector: hlm-alert-dialog
ExportAs: hlmAlertDialog
On this page