TaroifyReact UI

    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)} />
    </>
  )
}

    嵌入内容

    通过 children 可以在背景板上嵌入任意内容。

    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;
}

    API

    Props

    参数说明类型默认值
    className自定义类名string-
    children用于在遮罩层上方嵌入内容ReactNode-
    defaultOpen是否默认展示遮罩层booleanfalse
    open是否展示遮罩层booleanfalse
    duration动画时长，单位毫秒number300
    lock是否锁定背景滚动booleantrue
    closeable点击遮罩层时是否关闭booleanfalse

    Event

    事件说明回调参数
    onClick点击时触发-
    onClose关闭时触发-

    主题定制

    样式变量

    组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

    名称默认值描述
    --backdrop-z-index1000-
    --backdrop-background-colorrgba(0, 0, 0, 0.7)-