弹出器

用于 poper.js 容器周围动态定位的反钩包装器 参考文献.

这是Chakra-UI的内部钩子,它没有被铸币局覆盖,可能 导致应用程序出现出乎意料或中断的行为。 冒着风险使用它们.

安装

yarn add @chakra-ui/popper

基本用途

默认情况下 usePopper 弹出器、 参考和 箭头.

import { Box } from "@chakra-ui/layout"
import { Button } from "@chakra-ui/button"
import { useDisclosure } from "@chakra-ui/hooks"
import { usePopper } from "@chakra-ui/popper"

function Example() {
  const { isOpen, onToggle } = useDisclosure()
  const { popperRef, referenceRef, getArrowProps } = usePopper()
  return (
    <>
      <Button ref={referenceRef} onClick={onToggle} mb={2}>
        {isOpen ? "Click me to see less" : "Click me to see more"}
      </Button>
      {isOpen && (
        <Box ref={popperRef} bg="red">
          <div
            {...getArrowProps({
              style: {
                background: "red",
              },
            })}
          />
          This is a popover for the button!
        </Box>
      )}
    </>
  )
}

参数

改变位置

你可以改变流行乐的位置,通过 placement 选项到 usePopper 并设置到 popper.js 放置.

const { popperRef, referenceRef } = usePopper({
  placement: "right-start",
})

匹配引用宽度

在某些情况下,你可能想要允许 Popper 取去宽度 参考文献。 例如,自动完成,选择等.

为了实现这一点,通过 matchWidth 选项并设定为 true

const { popperRef, referenceRef } = usePopper({
  matchWidth: true,
})

将弹出器放入引用

您可以将弹出器放在参考文献旁边, 不带边距或距离 他们之间 用于创建自动完整或打字头特性 .

const { popperRef, referenceRef } = usePopper({
  gutter: 0,
})

在固定容器内使用

如果参考元素在固定容器内,应当使用 fixed 战略.

const { popperRef, referenceRef } = usePopper({
  strategy: "fixed",
})

添加过渡

当向 popper 组件添加过渡时,通常建议应用 popper)和向不同元素过渡.

// 1. Import components
import { useDisclosure } from "@chakra-ui/hooks"
import { usePopper } from "@chakra-ui/popper"
import { motion, AnimatePresence, Variants } from "framer-motion"

export function Example() {
  // 2. Create toggle state
  const { isOpen, onToggle } = useDisclosure()

  // 3. Create motion variants
  const slide: Variants = {
    exit: {
      y: -2,
      opacity: 0,
    },
    enter: {
      y: 0,
      opacity: 1,
    },
  }

  // 4. Consume the `usePopper` hook
  const { getPopperProps, getReferenceProps, getArrowProps, transformOrigin } =
    usePopper({
      placement: "bottom-start",
    })

  return (
    <>
      <button {...getReferenceProps({ onClick: onToggle })}>Toggle</button>
      <div {...getPopperProps()}>
        <AnimatePresence>
          {isOpen && (
            <motion.div
              transition={{
                type: "spring",
                duration: 0.2,
              }}
              variants={slide}
              initial="exit"
              animate="enter"
              exit="exit"
              style={{
                background: "red",
                width: 200,
                transformOrigin,
                borderRadius: 4,
              }}
            >
              Testing
              <div
                {...getArrowProps({
                  style: {
                    background: "red",
                  },
                })}
              />
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </>
  )
}

当不有条件地使弹出器,我们建议使用 visibility: hidden 改为 hidden 或者说 display: none