raoul2000 / yii2-slideout-widget
The SlideOut widget is a wrapper around the slideout.js plugin, a touch slideout navigation menu for your mobile web apps
Installs: 243
Dependents: 0
Suggesters: 0
Security: 0
Stars: 2
Watchers: 4
Forks: 1
Open Issues: 0
Language:JavaScript
Type:yii2-extension
Requires
- yiisoft/yii2: *
This package is not auto-updated.
Last update: 2024-10-30 09:39:35 UTC
README
The Slideout widget is a wrapper around the slideout.js plugin,
...A touch slideout navigation menu for your mobile web apps.
Installation
The preferred way to install this extension is through composer.
Either run
php composer.phar require --prefer-dist raoul2000/yii2-slideout-widget "*"
or add
"raoul2000/yii2-slideout-widget": "*"
to the require section of your composer.json
file.
Usage
Using Slideout widget is easy : you need some markup and some CSS (snippets below are retrieved from the sideout.js demo site) :
The markup
<nav id="menu"> <header> <h2>Menu</h2> </header> </nav> <main id="panel"> <header> <h2>Panel</h2> </header> </main>
The CSS
html, body { width: 100%; height: 100%; } .slideout-menu { position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 0; width: 256px; overflow-y: scroll; -webkit-overflow-scrolling: touch; display: none; } .slideout-panel { position:relative; z-index: 1; } .slideout-open, .slideout-open body { overflow: hidden; } .slideout-open .slideout-menu { display: block; }
And then eventually, the Slideout widget, and somewhere in the page a button to open/close the menu :
<?php echo raoul2000\widget\slideout\Slideout::widget([ 'pluginOptions' => [ 'panel' => new yii\web\JsExpression("document.getElementById('panel')"), 'menu' => new yii\web\JsExpression("document.getElementById('menu')"), 'padding' => 256, 'tolerance' => 70 ] ]); ?> <!-- This button will open/close the side menu --> <button onclick="yii2_raoul2000_slideout.toggle();">toggle menu</button>
The javascript variable yii2_raoul2000_slideout
has been created by the widget so you can access the slideout menu instance
from anywhere in the page. In the example above, the onclick handler invokes toggle() which is part of the slideout API.
You may also note that both option panel
and menu
are expected to be JS objects (and not selectors).
For more information on the plugin options, please refer to slideout github page.
Alternative
License
yii2-slideout-widget is released under the BSD 3-Clause License. See the bundled LICENSE.md
for details.