Skip to main content

Overlay

Overlay View​

img

Double-confirm overlay: Using the Modal to double confirm should be avoided, while affording an opportunity to undo is preferred.

Usage​

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

function App() {
  const [overlay, setoverlay] = React.useState(false)

  const handleoverlay = () => {
    setoverlay(!overlay)
  }
  return (
    <div>
      <Button onClick={(e) => handleoverlay(e)}>Open Overlay</Button>
      <Overlay
        open={overlay}
        anchorOrigin={{
          vertical: 'center',
          horizontal: 'center',
        }}
        onClose={() => handleoverlay()}
      >
        <Button>Overlay</Button>
      </Overlay>
    </div>
  )
}
export default App

Reference​

open​

props for adding the overlay appears.

anchorOrigin​

The anchor of the overlay

vertical​

In Qdm Component we provide 2 types of vertical.

  • bottom
  • top
  • center

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.