1.1.1 • Published 4 years ago
@fureinzz/fureinzz-backdrop v1.1.1
<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>