Getting started

Getting started

Radix Primitives를 빠르게 시작할 수 있는 튜토리얼이에요.

출처: 문서

본문

이 짧은 튜토리얼에서는 Popover 컴포넌트를 설치하고 스타일링해 봐요. 설치 → 파트 임포트 → 스타일 추가의 세 단계로 완전히 접근 가능한 Popover를 구현할 수 있어요.

Popover 구현하기

이 빠른 튜토리얼에서는 Popover 컴포넌트를 설치하고 스타일링할 거예요.

1. primitive 설치

커맨드 라인에서 Radix Primitives를 설치해요.

npm install radix-ui@latest

2. 파트 임포트

파트를 임포트하고 구조를 잡아요.

// index.jsx

import * as React from "react";

import { Popover } from "radix-ui";

const PopoverDemo = () => (
  <Popover.Root>
    <Popover.Trigger>More info</Popover.Trigger>

    <Popover.Portal>
      <Popover.Content>
        Some more info…
        <Popover.Arrow />
      </Popover.Content>
    </Popover.Portal>
  </Popover.Root>
);

export default PopoverDemo;

각 primitive는 자신만의 엔트리포인트에서도 사용할 수 있어요. 서브경로에서 임포트하면 일부 번들러가 트리 셰이킹을 더 효과적으로 할 수 있어요:

import * as Popover from "radix-ui/popover";

3. 스타일 추가

원하는 곳에 스타일을 추가해요.

// index.jsx

import * as React from "react";

import { Popover } from "radix-ui";

import "./styles.css";

const PopoverDemo = () => (
  <Popover.Root>
    <Popover.Trigger className="PopoverTrigger">Show info</Popover.Trigger>

    <Popover.Portal>
      <Popover.Content className="PopoverContent">
        Some content
        <Popover.Arrow className="PopoverArrow" />
      </Popover.Content>
    </Popover.Portal>
  </Popover.Root>
);

export default PopoverDemo;

/* styles.css */

.PopoverTrigger {
  background-color: white;
  border-radius: 4px;
}

.PopoverContent {
  border-radius: 4px;
  padding: 20px;
  width: 260px;
  background-color: white;
}

.PopoverArrow {
  fill: white;
}

데모

완전한 데모는 여기 있어요.

요약

위 단계들은 앱에서 Radix Primitive를 사용하는 데 관련된 내용을 간단히 설명해요.

이 컴포넌트들은 래핑 방식을 제어할 수 있을 만큼 저수준이에요. 팀과 제품의 요구에 더 잘 맞도록 나만의 고수준 API를 자유롭게 도입할 수 있어요.

몇 가지 간단한 단계로, 많은 복잡성을 걱정하지 않고 완전히 접근 가능한 Popover 컴포넌트를 구현했어요.

• WAI-ARIA 디자인 패턴 준수.
• 제어/비제어 방식 모두 지원.
• side, alignment, offset, collision 처리 커스터마이즈.
• 선택적으로 가리키는 화살표 렌더링.
• 포커스 완전 관리 및 커스터마이즈.
• 닫기/Dismiss 및 레이어링 동작의 높은 커스터마이즈 가능.

더 알아보기 (Learn more)

• 설치 후 각 primitive는 루트(radix-ui) 또는 개별 서브경로(radix-ui/popover)에서 임포트할 수 있어요.
• low-level 컴포넌트라 나만의 고수준 래퍼 API로 감싸 팀·제품에 맞게 확장하기 좋아요.