Sheet
Extends the Dialog component to display content that complements the main content of the screen.
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideCross } from '@ng-icons/lucide';
import { BrnSheetClose, BrnSheetContent, BrnSheetTrigger } from '@spartan-ng/brain/sheet';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmInput } from '@spartan-ng/helm/input';
import { HlmLabel } from '@spartan-ng/helm/label';
import {
HlmSheet,
HlmSheetContent,
HlmSheetDescription,
HlmSheetFooter,
HlmSheetHeader,
HlmSheetTitle,
} from '@spartan-ng/helm/sheet';
@Component({
selector: 'spartan-sheet-preview',
imports: [
BrnSheetTrigger,
BrnSheetContent,
BrnSheetClose,
HlmSheet,
HlmSheetContent,
HlmSheetHeader,
HlmSheetFooter,
HlmSheetTitle,
HlmSheetDescription,
HlmButton,
HlmInput,
HlmLabel,
],
providers: [provideIcons({ lucideCross })],
template: `
<hlm-sheet side="right">
<button id="edit-profile" variant="outline" brnSheetTrigger hlmBtn>Open</button>
<hlm-sheet-content *brnSheetContent="let ctx">
<hlm-sheet-header>
<h3 hlmSheetTitle>Edit Profile</h3>
<p hlmSheetDescription>Make changes to your profile here. Click save when you're done.</p>
</hlm-sheet-header>
<div class="grid flex-1 auto-rows-min gap-6 px-4">
<div class="grid gap-3">
<label hlmLabel for="name" class="text-right">Name</label>
<input hlmInput id="name" value="Pedro Duarte" class="col-span-3" />
</div>
<div class="grid gap-3">
<label hlmLabel for="username" class="text-right">Username</label>
<input hlmInput id="username" value="@peduarte" class="col-span-3" />
</div>
</div>
<hlm-sheet-footer>
<button hlmBtn type="submit">Save Changes</button>
<button brnSheetClose hlmBtn variant="outline">Close</button>
</hlm-sheet-footer>
</hlm-sheet-content>
</hlm-sheet>
`,
})
export class SheetPreview {}Installation
npx nx g @spartan-ng/cli:ui sheet
ng g @spartan-ng/cli:ui sheet
Usage
import { BrnSheetContent, BrnSheetTrigger } from '@spartan-ng/brain/sheet';
import {
HlmSheet
HlmSheetContent
HlmSheetDescription
HlmSheetFooter
HlmSheetHeader
HlmSheetTitle
} from '@spartan-ng/helm/sheet';<hlm-sheet>
<button brnSheetTrigger>Open</button>
<hlm-sheet-content *brnSheetContent="let ctx">
<hlm-sheet-header>
<h3 hlmSheetTitle>Are you absolutely sure?</h3>
<p hlmSheetDescription>
This action cannot be undone. This will permanently delete your account and remove your data from our servers.
</p>
</hlm-sheet-header>
</hlm-sheet-content>
</hlm-sheet>Brain API
BrnSheetClose
Selector: button[brnSheetClose]
BrnSheetContent
Selector: [brnSheetContent]
BrnSheetDescription
Selector: [brnSheetDescription]
BrnSheetOverlay
Selector: brn-sheet-overlay
BrnSheetTitle
Selector: [brnSheetTitle]
BrnSheetTrigger
Selector: button[brnSheetTrigger]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| side | 'top' | 'bottom' | 'left' | 'right' | undefined | undefined | Override the side from where the sheet appears for this trigger. |
BrnSheet
Selector: brn-sheet
ExportAs: brnSheet
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| side | 'top' | 'bottom' | 'left' | 'right' | top | Specifies the side of the screen where the sheet will appear. |
Helm API
HlmSheetClose
Selector: [hlmSheetClose],[brnSheetClose][hlm]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmSheetContent
Selector: hlm-sheet-content
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmSheetDescription
Selector: [hlmSheetDescription]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmSheetFooter
Selector: hlm-sheet-footer
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmSheetHeader
Selector: hlm-sheet-header
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmSheetOverlay
Selector: [hlmSheetOverlay],brn-sheet-overlay[hlm]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmSheetTitle
Selector: [hlmSheetTitle]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmSheet
Selector: hlm-sheet
ExportAs: hlmSheet
Examples
Sides
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideCross } from '@ng-icons/lucide';
import { BrnSheetContent, BrnSheetTrigger } from '@spartan-ng/brain/sheet';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmInput } from '@spartan-ng/helm/input';
import { HlmLabel } from '@spartan-ng/helm/label';
import {
HlmSheet,
HlmSheetContent,
HlmSheetDescription,
HlmSheetFooter,
HlmSheetHeader,
HlmSheetTitle,
} from '@spartan-ng/helm/sheet';
@Component({
selector: 'spartan-sheet-side-preview',
imports: [
BrnSheetTrigger,
BrnSheetContent,
HlmSheet,
HlmSheetContent,
HlmSheetHeader,
HlmSheetFooter,
HlmSheetTitle,
HlmSheetDescription,
HlmButton,
HlmInput,
HlmLabel,
],
providers: [provideIcons({ lucideCross })],
template: `
<hlm-sheet>
<div class="grid grid-cols-2 gap-2">
<button id="left" variant="outline" brnSheetTrigger side="left" hlmBtn>left</button>
<button id="right" variant="outline" brnSheetTrigger side="right" hlmBtn>right</button>
<button id="top" variant="outline" brnSheetTrigger side="top" hlmBtn>top</button>
<button id="bottom" variant="outline" brnSheetTrigger side="bottom" hlmBtn>bottom</button>
</div>
<hlm-sheet-content *brnSheetContent="let ctx">
<hlm-sheet-header>
<h3 hlmSheetTitle>Edit Profile</h3>
<p hlmSheetDescription>Make changes to your profile here. Click save when you're done.</p>
</hlm-sheet-header>
<div class="grid flex-1 auto-rows-min gap-6 px-4">
<div class="grid gap-3">
<label hlmLabel for="name" class="text-right">Name</label>
<input hlmInput id="name" value="Pedro Duarte" class="col-span-3" />
</div>
<div class="grid gap-3">
<label hlmLabel for="username" class="text-right">Username</label>
<input hlmInput id="username" value="@peduarte" class="col-span-3" />
</div>
</div>
<hlm-sheet-footer>
<button hlmBtn type="submit">Save Changes</button>
</hlm-sheet-footer>
</hlm-sheet-content>
</hlm-sheet>
`,
})
export class SheetSidePreview {}Size
You can adjust the size of the sheet by adding CSS classes to hlm-sheet-content .
import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideCross } from '@ng-icons/lucide';
import { BrnSheetContent, BrnSheetTrigger } from '@spartan-ng/brain/sheet';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmInput } from '@spartan-ng/helm/input';
import { HlmLabel } from '@spartan-ng/helm/label';
import {
HlmSheet,
HlmSheetContent,
HlmSheetDescription,
HlmSheetFooter,
HlmSheetHeader,
HlmSheetTitle,
} from '@spartan-ng/helm/sheet';
@Component({
selector: 'spartan-sheet-size-preview',
imports: [
BrnSheetTrigger,
BrnSheetContent,
HlmSheet,
HlmSheetContent,
HlmSheetHeader,
HlmSheetFooter,
HlmSheetTitle,
HlmSheetDescription,
HlmButton,
HlmInput,
HlmLabel,
],
providers: [provideIcons({ lucideCross })],
template: `
<hlm-sheet side="right">
<button id="edit-profile" variant="outline" brnSheetTrigger hlmBtn>Open</button>
<hlm-sheet-content *brnSheetContent="let ctx" class="w-[400px] sm:w-[540px] sm:max-w-none">
<hlm-sheet-header>
<h3 hlmSheetTitle>Edit Profile</h3>
<p hlmSheetDescription>Make changes to your profile here. Click save when you're done.</p>
</hlm-sheet-header>
<div class="grid flex-1 auto-rows-min gap-6 px-4">
<div class="grid gap-3">
<label hlmLabel for="name" class="text-right">Name</label>
<input hlmInput id="name" value="Pedro Duarte" class="col-span-3" />
</div>
<div class="grid gap-3">
<label hlmLabel for="username" class="text-right">Username</label>
<input hlmInput id="username" value="@peduarte" class="col-span-3" />
</div>
</div>
<hlm-sheet-footer>
<button hlmBtn type="submit">Save Changes</button>
</hlm-sheet-footer>
</hlm-sheet-content>
</hlm-sheet>
`,
})
export class SheetSizePreview {}Close Sheet
import { Component, viewChild } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideCross } from '@ng-icons/lucide';
import { BrnSheet, BrnSheetClose, BrnSheetContent, BrnSheetTrigger } from '@spartan-ng/brain/sheet';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmLabel } from '@spartan-ng/helm/label';
import { HlmSheet, HlmSheetContent, HlmSheetHeader, HlmSheetTitle } from '@spartan-ng/helm/sheet';
@Component({
selector: 'spartan-sheet-close-preview',
imports: [
BrnSheetTrigger,
BrnSheetContent,
BrnSheetClose,
HlmSheet,
HlmSheetContent,
HlmSheetHeader,
HlmSheetTitle,
HlmButton,
HlmLabel,
],
providers: [provideIcons({ lucideCross })],
template: `
<hlm-sheet #sheetRef side="right">
<button id="edit-profile" variant="outline" brnSheetTrigger hlmBtn>Open</button>
<hlm-sheet-content *brnSheetContent="let ctx">
<hlm-sheet-header>
<h3 hlmSheetTitle>Sheet</h3>
</hlm-sheet-header>
<div class="grid flex-1 auto-rows-min gap-6 px-4">
<div class="grid gap-3">
<label hlmLabel>Close sheet by directive</label>
<button hlmBtn brnSheetClose>Close</button>
</div>
<div class="grid gap-3">
<label hlmLabel>Close sheet by reference</label>
<button hlmBtn (click)="sheetRef.close({})">Close</button>
</div>
<div class="grid gap-3">
<label hlmLabel>Close sheet by viewchild reference</label>
<button hlmBtn (click)="closeSheet()">Close</button>
</div>
</div>
</hlm-sheet-content>
</hlm-sheet>
`,
})
export class SheetClosePreview {
public viewchildSheetRef = viewChild(BrnSheet);
closeSheet() {
this.viewchildSheetRef()?.close({});
}
}