操作栏

用于显示带有操作集合的底部操作栏

显示操作栏

"use client"

import { ActionBar, Button, Checkbox, Portal } from "@chakra-ui/react"
import { useState } from "react"
import { LuShare, LuTrash2 } from "react-icons/lu"

const Demo = () => {
  const [checked, setChecked] = useState(false)
  return (
    <>
      <Checkbox.Root onCheckedChange={(e) => setChecked(!!e.checked)}>
        <Checkbox.HiddenInput />
        <Checkbox.Control />
        <Checkbox.Label>Show Action bar</Checkbox.Label>
      </Checkbox.Root>
      <ActionBar.Root open={checked}>
        <Portal>
          <ActionBar.Positioner>
            <ActionBar.Content>
              <ActionBar.SelectionTrigger>
                2 selected
              </ActionBar.SelectionTrigger>
              <ActionBar.Separator />
              <Button variant="outline" size="sm">
                <LuTrash2 />
                Delete
              </Button>
              <Button variant="outline" size="sm">
                <LuShare />
                Share
              </Button>
            </ActionBar.Content>
          </ActionBar.Positioner>
        </Portal>
      </ActionBar.Root>
    </>
  )
}

用法

操作栏旨在通过表格或复选框选择进行控制。它提供了一组可对所选项目执行的操作。

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

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

示例

关闭触发器

渲染 ActionBar.CloseTrigger 以关闭操作栏，并传入 onOpenChange 处理器来控制操作栏的可见性。

open 和 onOpenChange 属性控制操作栏的可见性。

显示操作栏

"use client"

import {
  ActionBar,
  Button,
  Checkbox,
  CloseButton,
  Portal,
} from "@chakra-ui/react"
import { useState } from "react"
import { LuShare, LuTrash2 } from "react-icons/lu"

const Demo = () => {
  const [checked, setChecked] = useState(false)
  return (
    <>
      <Checkbox.Root
        checked={checked}
        onCheckedChange={(e) => setChecked(!!e.checked)}
      >
        <Checkbox.HiddenInput />
        <Checkbox.Control />
        <Checkbox.Label>Show Action bar</Checkbox.Label>
      </Checkbox.Root>

      <ActionBar.Root
        open={checked}
        onOpenChange={(e) => setChecked(e.open)}
        closeOnInteractOutside={false}
      >
        <Portal>
          <ActionBar.Positioner>
            <ActionBar.Content>
              <ActionBar.SelectionTrigger>
                2 selected
              </ActionBar.SelectionTrigger>
              <ActionBar.Separator />
              <Button variant="outline" size="sm">
                <LuTrash2 />
                Delete
              </Button>
              <Button variant="outline" size="sm">
                <LuShare />
                Share
              </Button>
              <ActionBar.CloseTrigger asChild>
                <CloseButton size="sm" />
              </ActionBar.CloseTrigger>
            </ActionBar.Content>
          </ActionBar.Positioner>
        </Portal>
      </ActionBar.Root>
    </>
  )
}

在对话框内

这是一个组合 ActionBar 和 Dialog 以对一组选定项目执行删除操作的示例。

按下 Delete projects 按钮打开对话框。

勾选以选择项目

"use client"

import { ActionBar, Button, Checkbox, Dialog, Portal } from "@chakra-ui/react"
import { useState } from "react"
import { LuSquarePlus, LuTrash2 } from "react-icons/lu"

const Demo = () => {
  const [checked, setChecked] = useState(false)
  return (
    <>
      <Checkbox.Root onCheckedChange={(e) => setChecked(!!e.checked)}>
        <Checkbox.HiddenInput />
        <Checkbox.Control />
        <Checkbox.Label>Check to select projects</Checkbox.Label>
      </Checkbox.Root>
      <ActionBar.Root open={checked}>
        <Portal>
          <ActionBar.Positioner>
            <ActionBar.Content>
              <ActionBar.SelectionTrigger>
                4 selected
              </ActionBar.SelectionTrigger>

              <ActionBar.Separator />

              <Button variant="outline" size="sm">
                <LuSquarePlus />
                Add to collection
              </Button>

              <Dialog.Root placement="center">
                <Dialog.Trigger asChild>
                  <Button variant="surface" colorPalette="red" size="sm">
                    <LuTrash2 />
                    Delete projects
                  </Button>
                </Dialog.Trigger>
                <Portal>
                  <Dialog.Backdrop />
                  <Dialog.Positioner>
                    <Dialog.Content>
                      <Dialog.Header>
                        <Dialog.Title>Delete projects</Dialog.Title>
                      </Dialog.Header>
                      <Dialog.Body>
                        <Dialog.Description>
                          Are you sure you want to delete 4 projects?
                        </Dialog.Description>
                      </Dialog.Body>
                      <Dialog.Footer>
                        <Button variant="outline">Cancel</Button>
                        <Button colorPalette="red">Delete</Button>
                      </Dialog.Footer>
                    </Dialog.Content>
                  </Dialog.Positioner>
                </Portal>
              </Dialog.Root>
            </ActionBar.Content>
          </ActionBar.Positioner>
        </Portal>
      </ActionBar.Root>
    </>
  )
}

属性

根

属性	默认值	类型
`autoFocus`	`true`	`boolean` 打开时是否自动将焦点设置在弹出框内的第一个可聚焦内容上。
`closeOnEscape`	`true`	`boolean` 按下 Esc 键时是否关闭弹出框。
`closeOnInteractOutside`	`true`	`boolean` 用户点击弹出框外部时是否关闭弹出框。
`lazyMount`	`false`	`boolean` 是否启用懒加载
`modal`	`false`	`boolean` 弹出框是否应为模态。当设置为 `true` 时： - 与外部元素的交互将被禁用 - 屏幕阅读器只能看到弹出框内容 - 滚动被阻止 - 焦点被限制在弹出框内
`portalled`	`true`	`boolean` 弹出框是否通过 Portal 渲染。这将代理 Tab 键行为，无论弹出框内容在 DOM 中的位置如何。
`unmountOnExit`	`false`	`boolean` 退出时是否卸载。
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` 组件的调色板
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'` 组件的尺寸
`defaultOpen`		`boolean` 弹出框首次渲染时的初始打开状态。在不需要控制其打开状态时使用。
`id`		`string` 机器的唯一标识符。
`ids`		`Partial<{ anchor: string trigger: string content: string title: string description: string closeTrigger: string positioner: string arrow: string }>` 弹出框中元素的 ID。对于组合很有用。
`immediate`		`boolean` 是否立即同步当前更改，或将其推迟到下一帧
`initialFocusEl`		`() => HTMLElement \| null` 弹出框打开时要聚焦的元素。
`onEscapeKeyDown`		`(event: KeyboardEvent) => void` 按下 Esc 键时调用的函数
`onExitComplete`		`() => void` 动画在关闭状态结束时调用的函数
`onFocusOutside`		`(event: FocusOutsideEvent) => void` 焦点移出组件时调用的函数
`onInteractOutside`		`(event: InteractOutsideEvent) => void` 组件外部发生交互时调用的函数
`onOpenChange`		`(details: OpenChangeDetails) => void` 弹出框打开或关闭时调用的函数
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` 指针在组件外部按下时调用的函数
`open`		`boolean` 弹出框是否打开
`persistentElements`		`(() => Element \| null)[]` 返回持久元素，这些元素： - 不应禁用指针事件 - 不应触发关闭事件
`positioning`		`PositioningOptions` 用户提供的用于定位弹出框内容的选项
`present`		`boolean` 节点是否存在（由用户控制）
`as`		`React.ElementType` 要渲染的底层元素。
`asChild`		`boolean` 使用提供的子元素作为默认渲染元素，结合它们的属性和行为。更多详情，请阅读我们的组合指南。
`unstyled`		`boolean` 是否移除组件样式。

上一个

Accordion

下一个

Alert

操作栏

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}用法

示例

关闭触发器

在对话框内

属性

根

用法