Toolbar

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

한 화면의 관련 액션과 표시 설정을 하나의 툴바로 그룹화하세요. 테두리가 아닌 표면이 컨테이너를 컨트롤과 구분합니다. 안쪽 모서리는 바깥 반지름에서 안쪽 패딩을 뺀 값을 사용합니다. 버튼이 중첩되지 않도록 Button, Toggle, Menu 트리거를 render로 합성하세요.

모든 단순 버튼 그룹에 Toolbar를 추가하지 마세요. 대신 Inline을 사용하세요. 텍스트 입력은 편집 키를 유지하게 하세요. 네비게이션은 명령으로 위장하지 말고 Toolbar.Link를 사용하세요.

크기: SizeProvider size="small" 포털까지 포함해 구성 전체의 크기를 바꿉니다. 기본 크기는 Default입니다. 크기 안내 및 비교

구성

Root(role=toolbar) → Group(Button/Toggle) + Separator + Input + composed popup trigger + Link

키보드와 접근성

툴바는 단일 Tab 정지점입니다. 방향을 따른 화살표 키, Home, End가 포커스를 이동합니다. 입력 내부의 편집 키는 동작을 유지합니다. focusableWhenDisabled가 기본적으로 true라서 비활성 Button도 포커스는 가능하지만 실행되지는 않습니다. Link는 네이티브 네비게이션을 유지하며 Root.disabled가 비활성화하지 않습니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { Toolbar, Toggle, Menu } from '@surflane/ui'

<Toolbar.Root aria-label='Run tools'>
  <Toolbar.Button onClick={refresh}>Refresh</Toolbar.Button>
  <Toolbar.Button
    render={<Toggle pressed={pinned} onPressedChange={setPinned} />}
  >
    Pin results
  </Toolbar.Button>
  <Toolbar.Input aria-label='Filter services' />
  <Menu.Root>
    <Toolbar.Button render={<Menu.Trigger />}>More actions</Toolbar.Button>
    <Menu.Portal>
      <Menu.Content>
        <Menu.Item onClick={exportLogs}>Export logs</Menu.Item>
      </Menu.Content>
    </Menu.Portal>
  </Menu.Root>
</Toolbar.Root>

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰