오른쪽에서 왼쪽 방향

오른쪽에서 왼쪽 방향 (RTL)

Mantine의 모든 컴포넌트는 박스 밖에서(추가 설정 없이) 오른쪽에서 왼쪽(right-to-left) 방향을 지원해요. 컴포넌트가 RTL 방향에서 어떻게 동작하는지는 오른쪽 위 모서리의 방향 컨트롤을 클릭하거나 Ctrl + Shift + L을 눌러 미리 볼 수 있어요.

출처: 문서

본문

DirectionProvider

DirectionProvider 컴포넌트는 그 내부의 모든 컴포넌트의 방향을 설정하는 데 사용해요. RTL 방향을 사용하거나 방향을 동적으로 바꿀 계획이라면 애플리케이션을 DirectionProvider로 감싸야 해요.

DirectionProvider는 다음 props를 지원해요:

export interface DirectionProviderProps {
  /** Your application */
  children: React.ReactNode;

  /** Direction set as a default value, `ltr` by default */
  initialDirection?: 'rtl' | 'ltr';

  /** Determines whether direction should be updated on mount based on the `dir` attribute set on the root element (usually the html element), `true` by default  */
  detectDirection?: boolean;
}

애플리케이션에서 DirectionProvider를 설정해요:

import { DirectionProvider, MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <DirectionProvider>
      <MantineProvider>
        {/* Your app here */}
      </MantineProvider>
    </DirectionProvider>
  );
}

dir 속성

애플리케이션의 루트 요소, 보통 html 요소에 dir 속성을 설정해야 해요. detectDirection prop이 true로 설정되어 있으면 DirectionProvider는 마운트 시 그 값을 사용해 방향을 설정해요. 이 가이드는 프레임워크별 dir 속성 설정 방법을 다루지 않으니, 각 프레임워크의 문서를 참고해서 설정하면 돼요.

<html dir="rtl">
  ...
</html>

useDirection 훅

useDirection은 다음 속성을 가진 객체를 반환해요:

dir – 현재 방향
setDirection – 방향을 설정하는 함수
toggleDirection – 방향을 반대 값으로 바꾸는 함수

이것을 사용해 애플리케이션에 방향 컨트롤을 만들 수 있어요:

import { ActionIcon, useDirection } from '@mantine/core';
import { TextAlignLeftIcon, TextAlignRightIcon } from '@phosphor-icons/react';

function Demo() {
  const { toggleDirection, dir } = useDirection();
  return (
    <ActionIcon onClick={() => toggleDirection()} variant="default" size="lg">
      {dir === 'rtl' ? <TextAlignLeftIcon /> : <TextAlignRightIcon />}
    </ActionIcon>
  );
}

rtl 믹스인

postcss-preset-mantine이 설치되어 있다면 .css 파일에서 rtl 믹스인을 사용할 수 있어요:

.demo {
  text-align: center;
  color: var(--mantine-color-white);
  padding: var(--mantine-spacing-md);

  /* LTR styles */
  background-color: var(--mantine-color-blue-filled);

  @mixin rtl {
    /* RTL styles override LTR styles */
    background-color: var(--mantine-color-red-filled);
  }
}

오른쪽에서 왼쪽 방향