Package Exports

@fureinzz/fureinzz-backdrop

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@fureinzz/fureinzz-backdrop) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

<fureinzz-backdrop>

fureinz-backdrop creates a fixed background that obscures the content of your app. Used to focus the user's attention on specific interface elements. Use open () ,close () or opened to add or remove an element

Example:

   <button> Create </button>
   
   <script type="module">
      import '@fureinzz/fureinzz-backdrop.js'
           
      const button = document.querySelector('button')
      button.addEventListener('click', () => {
        const backdrop = document.createElement('fureinzz-backdrop')
        backdrop.open()

        document.body.appendChild(backdrop)
      })
   </script>

Properties

Property	type	Description	Default
`opened`	Boolean	Set true to show the component	`false`

Methods

Method	Description
`open`	Changes `opened` = true
`close`	Changes `opened` = false

Styling

The following custom properties are available for styling

Property	Description	Default
`--backdrop-transition-duration`	The duration of the animation	`200ms`
`--backdrop-background-color`	The background color	`#000`

Usage

Installation

npm install --save @fureinzz/fureinzz-backdrop

In an HTML file

<html>
  <head>
  
  </head>
  <body>
    <button> Create </button>
    <script type="module">
      import '@fureinzz/fureinzz-backdrop.js'
              
      const button = document.querySelector('button')
      button.addEventListener('click', () => {
        const backdrop = document.createElement('fureinzz-backdrop')
        backdrop.open()
        document.body.appendChild(backdrop)
      })
    </script>
  </body>
</html>