Direction

발신 방향(내가 보냄/상대가 보냄)에 따라 정렬을 바꿉니다.

데모

아랍어 사용자와의 대화 — RTL 방향으로 렌더링됩니다.

مرحبًا، هل يمكنني المساعدة؟

نعم من فضلك، أحتاج فاتورة الشهر الماضي.

코드

<DirectionProvider dir="rtl">
  <BubbleGroup dir="rtl">
    <Bubble variant="muted" align="start">
      <BubbleContent>مرحبًا، هل يمكنني المساعدة؟</BubbleContent>
    </Bubble>
    <Bubble variant="default" align="end">
      <BubbleContent>نعم من فضلك، أحتاج فاتورة الشهر الماضي.</BubbleContent>
    </Bubble>
  </BubbleGroup>
</DirectionProvider>

사용 규칙

아랍어·히브리어 등 RTL 로케일을 지원할 때 앱 루트 근처에서 한 번만 DirectionProvider로 감싼다.
실제 텍스트 정렬은 dir 속성이 있는 컨테이너와 논리 속성(ms-/me-, text-start 등)에 맡긴다.

Don't

컴포넌트마다 개별적으로 DirectionProvider를 중첩해 방향이 예측 불가능해지게 하지 않는다.
left/right 같은 물리적 방향 유틸리티만으로 RTL 레이아웃을 흉내 내지 않는다 — 실제로 뒤집히지 않는다.