Toolbar

설치

pnpm dlx ply-ui add toolbar

공통 설치 설정을 먼저 적용합니다.

사용법

Toolbar.Button의 onClick에 작업을 연결합니다.

aria-label로 도구 모음을 설명하고 Separator로 작업 범위를 구분합니다.

구성

구성 요소	역할
`Root`	관련 작업의 키보드 이동 범위를 구성합니다.
`Button`	도구를 실행합니다.
`Link`	페이지나 문서로 이동합니다.
`Separator`	작업 그룹을 구분합니다.

구현 코드

components/ui/toolbar.tsx

toolbar.tsx

"use client";

import type { ComponentProps } from "react";
import { Toolbar as Primitive } from "@base-ui/react/toolbar";
import { withClassName } from "../../lib/cx";
import "./toolbar.css";

// 동작과 접근성은 Base UI가 담당합니다. 이 파일은 스타일 연결만 담당합니다.
function ToolbarRoot({
  className,
  ...props
}: ComponentProps<typeof Primitive.Root>) {
  return (
    <Primitive.Root
      {...props}
      className={withClassName("rbx-toolbar", className)}
    />
  );
}

function ToolbarButton({
  className,
  ...props
}: ComponentProps<typeof Primitive.Button>) {
  return (
    <Primitive.Button
      {...props}
      className={withClassName("rbx-button", className)}
    />
  );
}

function ToolbarLink({
  className,
  ...props
}: ComponentProps<typeof Primitive.Link>) {
  return (
    <Primitive.Link
      {...props}
      className={withClassName("rbx-nav-link", className)}
    />
  );
}

function ToolbarSeparator({
  className,
  ...props
}: ComponentProps<typeof Primitive.Separator>) {
  return (
    <Primitive.Separator
      {...props}
      className={withClassName("rbx-separator", className)}
    />
  );
}

// Root/Portal 등 스타일 없는 파트와 제네릭 API는 원본을 그대로 보존합니다.
export const Toolbar = {
  ...Primitive,
  Root: ToolbarRoot,
  Button: ToolbarButton,
  Link: ToolbarLink,
  Separator: ToolbarSeparator,
};

components/ui/toolbar.css

toolbar.css

@layer theme, base, components, utilities;
@layer components.ply-base, components.ply;
@import "./button.css";
@layer components.ply {
  /* Toolbar: 공통 구조는 theme.css, 컴포넌트 전용 조정은 아래에 작성합니다. */
  .rbx-toolbar {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--rbx-color-stroke-default);
    border-radius: 8px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  .rbx-toolbar > * {
    flex-shrink: 0;
  }
  .rbx-toolbar[data-orientation="vertical"] {
    flex-direction: column;
  }
  .rbx-toolbar :focus-visible {
    outline-offset: -3px;
  }
}

설치

사용법

구성

구현 코드

목차