jcb-drawer
v1.3.1
Published
off-canvas menu
Downloads
3
Readme
Install
npm install jcb-drawerUsage 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 |