The side panel slides in from the left or from the right. On tablets, you you can expose it.
We used/forked a tiny library called snap.js to support gestures.
Link to the CSS file if you loaded phonon-base.css only:
<link rel="stylesheet" href="side-panels.css">Link to the JS file if you loaded phonon-core.js only:
<script src="side-panels.js"></script>Include the HTML code below in your index.html file outside page declarations. If the side panel should be visible from the left, add the class .side-panel-left or from the right .side-panel-right.
Side panels are now supporting a single page or many pages with the data-page attribute.
Data attributes options
| Data-attribute | Type | Description |
|---|---|---|
| data-expose-aside | string | The side panel is visible on tablets only if the value is left or right |
| data-disable | string | Disable drag and drop gestures from a side (left or right) |
| data-page | string | The page (or couple of pages separated by a comma) that can enable the side panel |
| data-nodrag | string | Disable drag and drop gestures on a specific page (or many pages separated by a comma) |
<div class="side-panel side-panel-left" data-expose-aside="none" data-disable="right" data-page="home, pagetwo" id="side-home">
<header class="header-bar">
<button class="btn pull-right icon icon-close" data-side-panel-close="true"></button>
<div class="pull-left">
<h1 class="title">Panel</h1>
</div>
</header>
<div class="content">
<ul class="list">
<li><a class="padded-list">Profile</a></li>
<li><a class="padded-list">About</a></li>
<li><a class="padded-list">Settings</a></li>
<li><a class="padded-list">Login</a></li>
</ul>
</div>
</div>
Open a side panel with its id.
phonon.sidePanel('#side-panel-id').open()
Close a side panel with its id.
phonon.sidePanel('#side-panel-id').close()
Returns the state of the side panel. Since v1.5.0.
phonon.sidePanel('#side-panel-id').isShown()