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.

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 { BrnSheetImports } from '@spartan-ng/brain/sheet';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmInputImports } from '@spartan-ng/helm/input';
import { HlmLabelImports } from '@spartan-ng/helm/label';
import { HlmSheetImports } from '@spartan-ng/helm/sheet';

@Component({
	selector: 'spartan-sheet-preview',
	imports: [BrnSheetImports, HlmSheetImports, HlmButtonImports, HlmInputImports, HlmLabelImports],
	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

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>

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 readonly viewchildSheetRef = viewChild(BrnSheet);

	closeSheet() {
		this.viewchildSheetRef()?.close({});
	}
}

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

Sidebar

Separator