GZipped: 1.6Kb
ES Module module.js 5.99KB
CommonJS index.js 6.63KB
npm i -D shadow-overlay
pnpm i -D shadow-overlay
yarn add -D shadow-overlay
// index.ts
import 'shadow-overlay'| attribute | type |
|---|---|
| opacity | number |
| color | Any css valid color unit |
| margin | Any css size unit |
| gutters | Any css size unit |
| width | Any css size unit |
| disabled | https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled |
| controller | Similar to disabled, controller='true' or just controller will work |
You can use the custom element by using import the main.js file in your <head>
The attribute type should be module
<!DOCTYPE html>
<html>
<head>
<script
type="module"
src="./node_modules/shadow-overlay/dist/module.js"
></script>
</head>
<body>
<grid-overlay /> --> custom element 🎉
</body>
</html>The custom attribute list above contains all attributes that can be passed to the overlay
<grid-overlay color="red" /> --> I'm a red grid now! ⭕⭕⭕⭕| attribute | type |
|---|---|
| start | undefined |
| setOpacity |
number between 0 and 1 |
| setColor | any css color
|
| setMargin | Any css size unit |
| setGutters | Any css size unit |
| setWidth | Any css size unit |
| setController | boolean |
Import the overlay and start the instance
import { overlay } from 'shadow-overlay'
overlay.start()overlay.start()overlay.setOpacity(0.4)overlay.setColor('red')
overlay.setColor('ff0000')
overlay.setColor('hsl(0, 100%, 50%)')
overlay.setColor('rgb(255, 0, 0)')overlay.setMargin('16px')
overlay.setMargin('1em')
overlay.setMargin('1rem')
overlay.setMargin('5ch')
overlay.setMargin('5%')be careful not to use values that are too small or you risk not being able to see the grid
overlay.setWidth('920px')
overlay.setWidth('50rem')
overlay.setWidth('90ch')
overlay.setWidth('90%')overlay.setController(true)