1.3.1 • Published 3 years ago
jcb-drawer v1.3.1
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 |
1.3.1
3 years ago
1.3.0
4 years ago
1.1.8
4 years ago
1.1.7
4 years ago
1.1.6
4 years ago
1.1.0
4 years ago
1.1.3
4 years ago
1.1.2
4 years ago
1.0.11
4 years ago
1.0.12
4 years ago
1.0.10
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago