Panels

Panels are designed to fire from buttons and links, but you can open/close panels programatically too.

---

Live Example

---

Usage

Installation

Link to the CSS file if you loaded phonon-base.css only:

<link rel="stylesheet" href="panels.css">

Link to the JS file if you loaded phonon-core.js only:

<script src="panels.js"></script>

RequireJS Compatible

require(['panels'], function(panel)) {
    panel('#id').open();
});

Triggers

Triggers are placed inside page content. Set the panel's id with the attribute data-panel-id.

<a href="#" class="btn primary" data-panel-id="myPanelexample">Open Panel</a>

Panel [Action Sheet]

Place the code at the top of the body.

<div id="myPanelexample" class="panel">
        <header class="header-bar">
            <a class="btn icon icon-close pull-right" href="#" data-panel-close="true"></a>
            <h1 class="title">Panel</h1>
        </header>

        <div class="content">
            <p class="padded-full">The contents of my panel go here.</p>
        </div>
</div>

Full Panel

Full height panels.

<div id="myPanelexample" class="panel-full">
        <header class="header-bar">
            <a class="btn icon icon-close pull-right" href="#" data-panel-close="true"></a>
            <h1 class="title">Panel</h1>
        </header>

        <div class="content">
            <p class="padded-full">The contents of my panel go here.</p>
        </div>
</div>

Open or Close Panels Programatically

You can also call these methods to open, close and toggle panels.

phonon.panel('#my-panel-id').open();
phonon.panel('#my-panel-id').close();