Docs
Separator
Separator
Visually or semantically separates content.
Loading...
Loading...
import { Component } from '@angular/core'
import { UbSeparatorDirective } from '~/components/ui/separator'
@Component({
standalone: true,
selector: 'separator-demo-new-york',
imports: [UbSeparatorDirective],
template: `
<div>
<div class="space-y-1">
<h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
<p class="text-sm text-muted-foreground">
An open-source UI component library.
</p>
</div>
<div ubSeperator class="my-4"></div>
<div class="flex h-5 items-center space-x-4 text-sm">
<div>Blog</div>
<div ubSeperator orientation="vertical"></div>
<div>Docs</div>
<div ubSeperator orientation="vertical"></div>
<div>Source</div>
</div>
</div>
`,
})
export class SeparatorNewYork { }import { Component } from '@angular/core'
import { UbSeparatorDirective } from '~/components/ui/separator'
@Component({
standalone: true,
selector: 'separator-demo-default',
imports: [UbSeparatorDirective],
template: `
<div>
<div class="space-y-1">
<h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
<p class="text-sm text-muted-foreground">
An open-source UI component library.
</p>
</div>
<div ubSeperator class="my-4"></div>
<div class="flex h-5 items-center space-x-4 text-sm">
<div>Blog</div>
<div ubSeperator orientation="vertical"></div>
<div>Docs</div>
<div ubSeperator orientation="vertical"></div>
<div>Source</div>
</div>
</div>
`,
})
export class SeparatorDemoDefault { }Installation
pnpm dlx shadcn-ng@latest add separator
npx shadcn-ng@latest add separator
npx shadcn-ng@latest add separator
bunx --bun shadcn-ng@latest add separator
Copy and paste the following code into your project.
import { computed, Directive, input } from '@angular/core'
import { cn } from '~/lib/utils'
@Directive({
standalone: true,
selector: 'ubSeperator',
host: {
'[class]': 'computedClass()',
},
})
export class UbSeparatorDirective {
readonly class = input<string>()
readonly orientation = input<'horizontal' | 'vertical'>('horizontal')
protected computedClass = computed(() =>
cn(
'shrink-0 bg-border',
this.orientation() === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
this.class(),
),
)
}import { computed, Directive, input } from '@angular/core'
import { cn } from '~/lib/utils'
@Directive({
standalone: true,
selector: 'ubSeperator',
host: {
'[class]': 'computedClass()',
},
})
export class UbSeparatorDirective {
readonly class = input<string>()
readonly orientation = input<'horizontal' | 'vertical'>('horizontal')
protected computedClass = computed(() =>
cn(
'shrink-0 bg-border',
this.orientation() === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
this.class(),
),
)
}Update the import paths to match your project setup.
Usage
import { UbSeparatorDirective } from "~/components/ui/separator.directive";<div ubSeparator></div>