jcb-drawer
1.3.1 • Public • Published
Install
npm install jcb-drawer
Usage example
index.html
<!DOCTYPE html>
<body>
<jcb-drawer id="drawer">
<jcb-drawer-item value="about">About</jcb-drawer-item>
<jcb-drawer-item value="contact">Contact</jcb-drawer-item>
<jcb-drawer-item value="logout">Logout</jcb-drawer-item>
</jcb-drawer>
</body>
<script>
import "@fontsource/roboto/300.css"
document.getElementById('drawer').addEventListener('click', event => {
console.log('click', event.target.value)
})
document.getElementById('open').addEventListener('click', event => {
document.getElementById('drawer').value = true
})
</script>
<style>
:root {
font-family: "Roboto";
font-weight: 300;
}
</style>
API references
jcb-drawer
Properties
| Name |
Type |
Default |
Description |
value |
Boolean |
false |
Indicates that drawer is open |
Events
| Name |
Description |
Value |
click |
Emitted whenever an item is clicked |
Clicked item value |
input |
Emitted whenever drawer is opened or closed |
is opened: true/false |
CSS variables
| Name |
Default |
Description |
--jcb-drawer-width |
250px |
drawer width |
jcb-drawer-item
Properties
| Name |
Type |
Default |
Description |
value |
String |
undefined |
Value returned when item is selected |
CSS variables
| Name |
Default |
Description |
--jcb-drawer-font-size |
22px |
items font size |
Package Sidebar
Install
Weekly Downloads