Separator

Visually or semantically separates content.

main.ts

styles.css

import { Component } from '@angular/core';

import { RdxSeparatorRootDirective } from '@radix-ng/primitives/separator';

@Component({
    standalone: true,
    imports: [RdxSeparatorRootDirective],
    template: `
        <div style="width: 100%; max-width: 300px; margin: 0 15px;">
            <div class="Text">Radix Primitives</div>
            <div class="Text" style="font-weight: 500;">An open-source UI component library.</div>
            <div class="SeparatorRoot" rdxSeparatorRoot style="margin: 15px 0;"></div>
            <div style="display: flex; height: 1.25rem; align-items: center;">
                <div class="Text">Blog</div>
                <div
                    class="SeparatorRoot"
                    rdxSeparatorRoot
                    decorative="decorative"
                    orientation="vertical"
                    style="margin: 0 15px;"
                ></div>
                <div class="Text">Docs</div>
                <div
                    class="SeparatorRoot"
                    rdxSeparatorRoot
                    decorative="decorative"
                    orientation="vertical"
                    style="margin: 0 15px;"
                ></div>
                <div class="Text">Source</div>
            </div>
        </div>
    `,
    styleUrl: 'separator-demo.css'
})
export class SeparatorDemoComponent {}

.SeparatorRoot {
    background-color: var(--violet-6);
}

.SeparatorRoot[data-orientation='horizontal'] {
    height: 1px;
    width: 100%;
}

.SeparatorRoot[data-orientation='vertical'] {
    height: 100%;
    width: 1px;
}

.Text {
    color: white;
    font-size: 15px;
    line-height: 20px;
}

Features

Supports horizontal and vertical orientations.

Anatomy

<div rdxSeparatorRoot></div>

API Reference

Root

The separator. RdxSeparatorRootDirective

Prop	Type	Default
`orientation`	-	`DEFAULT_ORIENTATION`
`decorative`	-	`input<boolean, BooleanInput>(false, { transform: booleanAttribute })`
`orientation`	-	`DEFAULT_ORIENTATION`