Ivorie

Separator

A thin divider for horizontal or vertical layouts.

import { … } from '@inlaylab/ivorie/separator'

Ivorie

An Angular UI library.

Copy in what you need.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvSeparator } from '@inlaylab/ivorie/separator';

@Component({
  selector: 'demo-separator',
  imports: [IvSeparator],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="w-full max-w-sm space-y-3">
      <div>
        <h4 class="text-sm font-medium">Ivorie</h4>
        <p class="text-sm text-muted-foreground">An Angular UI library.</p>
      </div>
      <iv-separator />
      <p class="text-sm">Copy in what you need.</p>
    </div>
  `,
})
export default class SeparatorDemo {}

Installation

CLInpm
npx ivorie add separator

Usage

import { IvSeparator } from '@inlaylab/ivorie/separator';
<iv-separator></iv-separator>

Examples

Vertical

DocsSourceBlog
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IvSeparator } from '@inlaylab/ivorie/separator';

@Component({
  selector: 'demo-separator-vertical',
  imports: [IvSeparator],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="flex h-5 items-center gap-3 text-sm">
      <span>Docs</span>
      <iv-separator orientation="vertical" />
      <span>Source</span>
      <iv-separator orientation="vertical" />
      <span>Blog</span>
    </div>
  `,
})
export default class SeparatorVerticalDemo {}

API

Every part also accepts class.

iv-separator

Name Type Default Description
orientation 'horizontal' | 'vertical' 'horizontal' Layout direction. Sets data-orientation.
decorative boolean true When true, the role is none. Set false for a semantic separator.

Accessibility

Decorative (default): role="none". Not decorative: role="separator" plus aria-orientation set to the orientation.

Notes

A vertical separator needs a parent with a height, for example flex h-5 items-center.