DialogRtl() — ui Function Reference

Architecture documentation for the DialogRtl() function in dialog-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ DialogRtl() — ui Function Reference

Dependency Diagram

graph TD
  51843ff1_f70d_84ff_ff09_1293cffe9b63["DialogRtl()"]
  5090bdf0_415c_709b_043f_c15807bda580["dialog-rtl.tsx"]
  51843ff1_f70d_84ff_ff09_1293cffe9b63 -->|defined in| 5090bdf0_415c_709b_043f_c15807bda580
  style 51843ff1_f70d_84ff_ff09_1293cffe9b63 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/dialog-rtl.tsx lines 64–102

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

  return (
    <Dialog>
      <form>
        <DialogTrigger asChild>
          <Button variant="outline">{t.openDialog}</Button>
        </DialogTrigger>
        <DialogContent
          className="sm:max-w-sm"
          dir={dir}
          data-lang={dir === "rtl" ? language : undefined}
        >
          <DialogHeader>
            <DialogTitle>{t.editProfile}</DialogTitle>
            <DialogDescription>{t.description}</DialogDescription>
          </DialogHeader>
          <FieldGroup>
            <Field>
              <Label htmlFor="name-1">{t.name}</Label>
              <Input id="name-1" name="name" defaultValue="Pedro Duarte" />
            </Field>
            <Field>
              <Label htmlFor="username-1">{t.username}</Label>
              <Input id="username-1" name="username" defaultValue="@peduarte" />
            </Field>
          </FieldGroup>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline">{t.cancel}</Button>
            </DialogClose>
            <Button type="submit">{t.saveChanges}</Button>
          </DialogFooter>
        </DialogContent>
      </form>
    </Dialog>
  )
}