Sideside NPM | npm.io

sideside.js

:ghost: Sidebar inspired by Yalantis/Side-Menu.Android

Broswer Use

<head>
  <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/sideside/dist/sideside.min.css">
</head>
<body>
  <script src="https://unpkg.com/sideside"></script>
  <script>
  const sideside = SideSide.default
  const Sidebar = sideside.Sidebar
  const Item = sideside.Item
  const sidebar = new Sidebar({
    items: [
      new Item({ icon: 'fas fa-tint' }),
      new Item({ icon: 'fas fa-cube' }),
      new Item({ icon: 'fas fa-leaf' }),
      new Item({ icon: 'fas fa-paper-plane' }),
      new Item({ icon: 'fas fa-rocket' })
    ]
  })
  </script>
</body>

API

Example: docs/index.js

Sidebar.position

Sidebar position (String): 'top' | 'right' | 'bottom' | 'left'

function setPosition(position) {
  sidebar.position = position
  console.log('Now position: ' + sidebar.position)
}

Sidebar.visible

Sidebar visible (Boolean): true | false, default false

function setVisible(visible) {
  sidebar.visible = visible
  console.log('Now visivle: ' + sidebar.visible)
}

Sidebar.enableClickOutClose

If set true, sidebar will be close when click out of self, default true

Sidebar.enableClickItemClose

If set true, sidebar will be close when click Item, default false

Sidebar.className

Custom a sidebar className

Item.icon

A item's font icon, now can use icons in https://fontawesome.com/
From now, not support img on item

Item.onClick

Define a item click function

Item.selfElement

A true item dom element hook

License

MIT © g1eny0ung

sidebar typescript flip

@infinitebrahmanuniverse/nolb-sid @everything-registry/sub-chunk-2757

6 years ago

6 years ago

6 years ago

6 years ago

7 years ago

7 years ago

7 years ago

7 years ago