Backdrop 背景板

import { Backdrop } from "@taroify/core"

import { Backdrop, Button } from "@taroify/core"

function BackdropExample() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Button onClick={() => setOpen(true)}>显示背景板</Button>
      <Backdrop open={open} closeable onClose={() => setOpen(false)} />
    </>
  )
}

import { Backdrop, Button } from "@taroify/core"

function BackdropExample() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Button onClick={() => setOpen(true)}>嵌入内容</Button>
      <Backdrop open={open} closeable onClose={() => setOpen(false)}>
        <View className="content-wrapper">
          <View className="content-block" />
        </View>
      </Backdrop>
    </>
  )
}

.content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.content-block {
  width: 60px * 2;
  height: 60px * 2;
  background-color: #fff;
}