Backdrop

Backdrop displays a container that is used to limit the user's actions and make them focus on it's content.

Import

import { Backdrop } from "@prismane/core";

Usage

By default, Backdrop has a position of fixed and takes up the whole screen, but that can be overwritten.

function Demo() {
  const [shown, setShown] = useState(false);

  return (
    <>
      <Button onClick={() => setShown(true)}>Show Backdrop</Button>
      {shown && (
        <Backdrop onClick={() => setShown(false)}>
          <Text>This is the backdrop! Click on the backdrop to close it!</Text>
        </Backdrop>
      )}
    </>
  );
}

Remove blur effect

To remove the blur of the Backdrop component, you can use the bft property, which will overwrite the filter.

function Demo() {
  const [shown, setShown] = useState(false);

  return (
    <>
      <Button onClick={() => setShown(true)}>Show Backdrop</Button>
      {shown && (
        <Backdrop onClick={() => setShown(false)} bft="blur(0px)">
          <Text>
            This backdrop does not have blur! Click on the backdrop to close it!
          </Text>
        </Backdrop>
      )}
    </>
  );
}

Change the color

To change the color of the Backdrop component, you can just overwrite the existing one, using the bg property.

function Demo() {
  const [shown, setShown] = useState(false);

  return (
    <>
      <Button onClick={() => setShown(true)}>Show Backdrop</Button>
      {shown && (
        <Backdrop onClick={() => setShown(false)} bg={["diamond", 500, 0.1]}>
          <Text>
            This backdrop has a different color! Click on the backdrop to close
            it!
          </Text>
        </Backdrop>
      )}
    </>
  );
}

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- Backdrop

Go BackAvatar

Up NextBadge