open-index/open-npm huggingface dataset:
npm package: @fureinzz/fureinzz-backdrop
Description: Web component that adds a darkening backdrop
Author: @fureinzz
Latest version: 1.1.1

# &lt;fureinzz-backdrop&gt;

`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:**
```html
   <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
<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>
```