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

Readme

Keywords

Package Sidebar

Install

npm i jcb-drawer

Weekly Downloads

0

Version

1.3.1

License

MIT

Unpacked Size

8.22 kB

Total Files

4

Last publish

Collaborators

  • jcbuisson