AngularLynx

    Separator

    A one-pixel line in the border color that divides content, horizontally or vertically.

    ui-separatorsrc/app/app.ts

    Installation

    npx @blotch/dolan add separator
    import { UiSeparator } from '../components/ui/separator';

    Usage

    src/app/app.ts
    import { Component } from '@angular/core';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
import { UiSeparator } from '../components/ui/separator';

@Component({
  selector: 'app-root',
  imports: [LYNX_ELEMENTS, UiSeparator],
  template: `
    <view class="flex flex-col gap-4">
      <text class="text-sm text-foreground">Account</text>
      <ui-separator />
      <text class="text-sm text-foreground">Billing</text>
    </view>
  `,
})
export class App {}

    A horizontal separator spans the full width of its parent.

    Vertical

    <view class="flex h-5 flex-row items-center gap-4">
  <text class="text-sm text-foreground">Blog</text>
  <ui-separator orientation="vertical" />
  <text class="text-sm text-foreground">Docs</text>
</view>

    A vertical separator stretches to the full height of its row, even when the row sets items-center. Set the row's height to set the line's length.

    Spacing

    <ui-separator class="my-4" />

    The separator is one element, so margin classes on it work like on a <view>.

    API

    UiSeparator

    InputTypeDefaultDescription
    orientation'horizontal' | 'vertical''horizontal'A full-width or a full-height line.
    classstring''Extra Tailwind classes for the line.

    No outputs.