ResizableRtl() — ui Function Reference

Architecture documentation for the ResizableRtl() function in resizable-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ ResizableRtl() — ui Function Reference

Dependency Diagram

graph TD
  aca68c9c_f845_bb5a_cbab_93c0211eab2a["ResizableRtl()"]
  cf6b4240_6509_cfd3_5802_2d1e9f67e0d8["resizable-rtl.tsx"]
  aca68c9c_f845_bb5a_cbab_93c0211eab2a -->|defined in| cf6b4240_6509_cfd3_5802_2d1e9f67e0d8
  style aca68c9c_f845_bb5a_cbab_93c0211eab2a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/resizable-rtl.tsx lines 42–74

export function ResizableRtl() {
  const { dir, t } = useTranslation(translations, "ar")

  return (
    <ResizablePanelGroup
      orientation="horizontal"
      className="max-w-sm rounded-lg border"
      dir={dir}
    >
      <ResizablePanel defaultSize="50%">
        <div className="flex h-[200px] items-center justify-center p-6">
          <span className="font-semibold">{t.one}</span>
        </div>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize="50%">
        <ResizablePanelGroup orientation="vertical" dir={dir}>
          <ResizablePanel defaultSize="25%">
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">{t.two}</span>
            </div>
          </ResizablePanel>
          <ResizableHandle withHandle />
          <ResizablePanel defaultSize="75%">
            <div className="flex h-full items-center justify-center p-6">
              <span className="font-semibold">{t.three}</span>
            </div>
          </ResizablePanel>
        </ResizablePanelGroup>
      </ResizablePanel>
    </ResizablePanelGroup>
  )
}