액션 바

액션 바 (Action Bar)

선택된 항목들에 대해 수행할 수 있는 일련의 동작들을 담은 하단 액션 바를 표시할 때 사용하는 컴포넌트예요. 주로 테이블이나 체크박스 선택과 함께 쓰여요.

출처: 문서

본문

사용법 (Usage)

액션 바는 테이블이나 체크박스 선택에 의해 제어되도록 설계되었어요. 선택된 항목들에 대해 수행할 수 있는 동작 집합을 제공해요.

import { ActionBar } from "@chakra-ui/react"

<ActionBar.Root>
  <ActionBar.Positioner>
    <ActionBar.Content>
      <ActionBar.CloseTrigger />
      <ActionBar.SelectionTrigger />
      <ActionBar.Separator />
    </ActionBar.Content>
  </ActionBar.Positioner>
</ActionBar.Root>

예제 (Examples)

닫기 트리거 (Close Trigger)

ActionBar.CloseTrigger를 렌더링해 액션 바를 닫을 수 있고, onOpenChange 핸들러를 전달해 액션 바의 표시 여부를 제어할 수 있어요.

open과 onOpenChange prop이 액션 바의 표시 여부를 제어해요.