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.

Separator

Visually or semantically separates content.

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

import { Component } from '@angular/core';
import { HlmSeparatorImports } from '@spartan-ng/helm/separator';

@Component({
	selector: 'spartan-separator-preview',
	imports: [HlmSeparatorImports],
	template: `
		<div>
			<div class="space-y-1">
				<h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
				<p class="text-muted-foreground text-sm">An open-source UI component library.</p>
			</div>
			<hlm-separator class="my-4" />
			<div class="flex h-5 items-center space-x-4 text-sm">
				<div>Blog</div>
				<hlm-separator orientation="vertical" />
				<div>Docs</div>
				<hlm-separator orientation="vertical" />
				<div>Source</div>
			</div>
		</div>
	`,
})
export class SeparatorPreview {}

Installation

npx nx g @spartan-ng/cli:ui separator

Usage

import { HlmSeparatorImports } from '@spartan-ng/helm/separator';

<hlm-separator />

Brain API

BrnSeparator

Selector: [brnSeparator],brn-separator

Inputs

Prop	Type	Default	Description
orientation	SeparatorOrientation	this._config.orientation	Orientation of the separator.
decorative	boolean	true	Whether the separator is decorative.

Helm API

HlmSeparator

Selector: [hlmSeparator],hlm-separator

Inputs

Prop	Type	Default	Description
class	ClassValue	-	-

Sheet

Select