Alert
Displays a callout for user attention.
Introducing spartan/ui!
spartan/ui is made up of unstyled UI providers, the spartan/ui/brain.
On top we add spartan/ui/helm(et) with shadcn-like styles.
import { Component } from '@angular/core';
import {
HlmAlertDescriptionDirective,
HlmAlertDirective,
HlmAlertIconDirective,
HlmAlertTitleDirective,
} from '@spartan-ng/ui-alert-helm';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
import { provideIcons } from '@ng-icons/core';
import { lucideBox } from '@ng-icons/lucide';
@Component({
selector: 'spartan-alert-preview',
standalone: true,
imports: [
HlmAlertDirective,
HlmAlertDescriptionDirective,
HlmAlertIconDirective,
HlmAlertTitleDirective,
HlmIconComponent,
],
providers: [provideIcons({ lucideBox })],
template: `
<div hlmAlert>
<hlm-icon hlmAlertIcon name="lucideBox" />
<h4 hlmAlertTitle>Introducing spartan/ui!</h4>
<p hlmAlertDesc>
spartan/ui is made up of unstyled UI providers, the spartan/ui/brain.<br />
On top we add spartan/ui/helm(et) with shadcn-like styles.
</p>
</div>
`,
})
export class AlertPreviewComponent {}Installation
npx nx g @spartan-ng/cli:ui alert
ng g @spartan-ng/cli:ui alert
Usage
import {
HlmAlertDescriptionDirective,
HlmAlertDirective,
HlmAlertIconDirective,
HlmAlertTitleDirective,
} from '@spartan-ng/ui-alert-helm';<div hlmAlert>
<hlm-icon hlmAlertIcon name="lucideBox" />
<h4 hlmAlertTitle>Introducing spartan/ui!</h4>
<p hlmAlertDesc>
spartan/ui is made up of unstyled UI providers, the spartan/ui/brain.<br />
On top we add spartan/ui/helm(et) with shadcn-like styles.
</p>
</div>Examples
Default
Introducing spartan/ui!
spartan/ui is made up of unstyled UI providers, the spartan/ui/brain.
On top we add spartan/ui/helm(et) with shadcn-like styles.
import { Component } from '@angular/core';
import {
HlmAlertDescriptionDirective,
HlmAlertDirective,
HlmAlertIconDirective,
HlmAlertTitleDirective,
} from '@spartan-ng/ui-alert-helm';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
import { provideIcons } from '@ng-icons/core';
import { lucideBox } from '@ng-icons/lucide';
@Component({
selector: 'spartan-alert-preview',
standalone: true,
imports: [
HlmAlertDirective,
HlmAlertDescriptionDirective,
HlmAlertIconDirective,
HlmAlertTitleDirective,
HlmIconComponent,
],
providers: [provideIcons({ lucideBox })],
template: `
<div hlmAlert>
<hlm-icon hlmAlertIcon name="lucideBox" />
<h4 hlmAlertTitle>Introducing spartan/ui!</h4>
<p hlmAlertDesc>
spartan/ui is made up of unstyled UI providers, the spartan/ui/brain.<br />
On top we add spartan/ui/helm(et) with shadcn-like styles.
</p>
</div>
`,
})
export class AlertPreviewComponent {}Destructive
Unexpected Error
Your session has expired. Please log in again.
import { Component } from '@angular/core';
import {
HlmAlertDescriptionDirective,
HlmAlertDirective,
HlmAlertIconDirective,
HlmAlertTitleDirective,
} from '@spartan-ng/ui-alert-helm';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
import { provideIcons } from '@ng-icons/core';
import { lucideAlertTriangle } from '@ng-icons/lucide';
@Component({
selector: 'spartan-alert-destructive',
standalone: true,
imports: [
HlmAlertDirective,
HlmAlertDescriptionDirective,
HlmAlertIconDirective,
HlmAlertTitleDirective,
HlmIconComponent,
],
providers: [provideIcons({ lucideAlertTriangle })],
template: `
<div hlmAlert variant="destructive">
<hlm-icon hlmAlertIcon name="lucideAlertTriangle" />
<h4 hlmAlertTitle>Unexpected Error</h4>
<p hlmAlertDesc>Your session has expired. Please log in again.</p>
</div>
`,
})
export class AlertDestructiveComponent {}