@fureinzz/fureinzz-backdrop
v1.1.1
Published
Web component that adds a darkening backdrop
Maintainers
fureinzzReadme
<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-backdropIn 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>