Skip to main content

Popover

Popover View​

img

A Popover can be used to display some content on top of another.

Usage​

import React from 'react'
import { Popover, Button } from 'qdm-component-library'

function App() {
  const [papover, setpapover] = React.useState(null)

  const handlepapover = (e) => {
    if (papover) {
      handlepapoverclose()
    } else {
      setpapover(e.currentTarget)
    }
  }
  const handlepapoverclose = () => {
    setpapover(null)
  }
  return (
    <div>
      <Button onClick={(e) => handlepapover(e)} color="primary">
        Open Popover
      </Button>
      <Popover
        open={papover}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        onClose={() => handlepapoverclose()}
      >
        Popover
      </Popover>
    </div>
  )
}
export default App

Reference​

open​

props for adding the popover and if the boolean true the popover appears.

anchorOrigin​

The anchor of the popover

vertical​

In Qdm Component we provide 2 types of vertical.

  • bottom
  • top

horizontal​

In Qdm Component we provide 3 types of horizontal.

  • left
  • right
  • center

onClose​

props give addition props to close the Snackbar, its elements type is function

inLineStyles​

props give addition props to the inLineStyles element type Object.