Direction

Usage

Wrap any subtree in a ZitsDirectionProvider and set Dir. Descendant components (menus, popovers, sliders, scroll areas) pick up the direction and lay themselves out accordingly. There is no need to repeat dir on every component.

<ZitsDirectionProvider Dir="rtl">
    <ZitsPopover>
        <ZitsPopoverTrigger>افتح</ZitsPopoverTrigger>
        <ZitsPopoverContent>المحتوى يتدفق من اليمين إلى اليسار.</ZitsPopoverContent>
    </ZitsPopover>
</ZitsDirectionProvider>

How it works

The provider renders no element of its own. It emits a cascading value named NaviusDirection that flows down the render tree. Every primitive that cares about direction reads it via a cascading parameter and applies its own dir attribute or directional offset.

• Cascading, not global. Direction is scoped to the subtree you wrap, so you can host an rtl panel inside an otherwise ltr page.
• Nestable. An inner provider overrides an outer one for its own descendants; the nearest ancestor wins.
• DOM-transparent. No wrapper element means no layout side effects; it never adds a div to your markup.
• Affects positioning. Anchored components (popover, dropdown, select) read direction to mirror their start/end alignment.

Example

An rtl subtree alongside the page default. The text and separator flow right-to-left.

<ZitsDirectionProvider Dir="rtl">
    <div dir="rtl" class="w-full max-w-sm space-y-3 text-right">
        <p class="text-sm font-medium">مرحبا بالعالم</p>
        <ZitsSeparator />
        <p class="text-sm text-muted-foreground">Content wrapped in an rtl provider lays out right-to-left.</p>
    </div>
</ZitsDirectionProvider>

Installation

Copy the component source into your project with the CLI.

navius add direction --to ./src/MyApp --namespace MyApp.Ui

API reference