Develop ultra fast with Prismane 🎉
Logo
Quick Search...

Popover

Popover displays a dialog container that is shown around a control.
Category: Overlay Source

Import

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

Usage

 
<Popover>
  <Popover.Control>
    <Button>Toggle Popover</Button>
  </Popover.Control>
  <Popover.Panel>
    <Text
      cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
    >
      This is the content of the popover!
    </Text>
  </Popover.Panel>
</Popover>

Popover Positions

 
<Flex w="100%" gap={fr(5)} wrap="wrap">
  <Popover position="right-start">
    <Popover.Control>
      <Button>right-start</Button>
    </Popover.Control>
    <Popover.Panel>
      <Text
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        This is the content of the popover!
      </Text>
    </Popover.Panel>
  </Popover>
  <Popover position="right">
    <Popover.Control>
      <Button>right</Button>
    </Popover.Control>
    <Popover.Panel>
      <Text
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        This is the content of the popover!
      </Text>
    </Popover.Panel>
  </Popover>
  <Popover position="right-end">
    <Popover.Control>
      <Button>right-end</Button>
    </Popover.Control>
    <Popover.Panel>
      <Text
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        This is the content of the popover!
      </Text>
    </Popover.Panel>
  </Popover>
  <Popover position="left-start">
    <Popover.Control>
      <Button>left-start</Button>
    </Popover.Control>
    <Popover.Panel>
      <Text
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        This is the content of the popover!
      </Text>
    </Popover.Panel>
  </Popover>
  <Popover position="left">
    <Popover.Control>
      <Button>left</Button>
    </Popover.Control>
    <Popover.Panel>
      <Text
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        This is the content of the popover!
      </Text>
    </Popover.Panel>
  </Popover>
  <Popover position="left-end">
    <Popover.Control>
      <Button>left-end</Button>
    </Popover.Control>
    <Popover.Panel>
      <Text
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        This is the content of the popover!
      </Text>
    </Popover.Panel>
  </Popover>
  <Popover position="top-start">
    <Popover.Control>
      <Button>top-start</Button>
    </Popover.Control>
    <Popover.Panel>
      <Text
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        This is the content of the popover!
      </Text>
    </Popover.Panel>
  </Popover>
  <Popover position="top">
    <Popover.Control>
      <Button>top</Button>
    </Popover.Control>
    <Popover.Panel>
      <Text
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        This is the content of the popover!
      </Text>
    </Popover.Panel>
  </Popover>
  <Popover position="top-end">
    <Popover.Control>
      <Button>top-end</Button>
    </Popover.Control>
    <Popover.Panel>
      <Text
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        This is the content of the popover!
      </Text>
    </Popover.Panel>
  </Popover>
  <Popover position="bottom-start">
    <Popover.Control>
      <Button>bottom-start</Button>
    </Popover.Control>
    <Popover.Panel>
      <Text
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        This is the content of the popover!
      </Text>
    </Popover.Panel>
  </Popover>
  <Popover position="bottom">
    <Popover.Control>
      <Button>bottom</Button>
    </Popover.Control>
    <Popover.Panel>
      <Text
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        This is the content of the popover!
      </Text>
    </Popover.Panel>
  </Popover>
  <Popover position="bottom-end">
    <Popover.Control>
      <Button>bottom-end</Button>
    </Popover.Control>
    <Popover.Panel>
      <Text
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        This is the content of the popover!
      </Text>
    </Popover.Panel>
  </Popover>
</Flex>

API

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

Go BackPinField
Up NextPortal