Programming Steps
Step-By-Step Programming For Beginners
Auto-Codes
C Language
Cobol 85 Language
ColdFusion Language
Cordova
HTML5
Java Language
Mobile
Objective-C Language
PhoneGap
PHP
Python Language
Ruby Language
Learn the powerful enterprise adaptable database:
Getting Started With ADABAS & Natural
Friday, June 2, 2017
224 Ionic-v1 Side Menu Exposed On Large Viewport: Nightly
Side Menu Exposed On Large Viewport: Nightly
code example:
<html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Side Menu Exposed On Large Viewport</title> <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> <style> body { cursor: url('https://ionicframework.com/img/finger.png'), auto; } </style> </head> <body ng-controller="MainCtrl"> <ion-side-menus> <ion-side-menu-content> <ion-header-bar class="bar-positive"> <button class="button button-icon ion-navicon" ng-click="toggleLeft()" ng-hide="$exposeAside.active"></button> <h1 class="title">Content</h1> </ion-header-bar> <ion-content class="padding"> <p> On a small viewport (less than 768px window width), the left menu will be hidden, but can be shown by swiping left to right, or toggling the button in the top left of the header. On a large viewport (greater than or equal to 768px), the left menu will stay open. </p> <p> Using <code>large</code> as the attribute's value is an alias to <code>(min-width:768px)</code> since it is the most common use-case. However, for added flexibility, any valid media query could be added as the value, such as <code>(min-width:600px)</code> or even multiple queries such as <code>(min-width:750px) and (max-width:1200px)</code>. </p> </ion-content> </ion-side-menu-content> <ion-side-menu expose-aside-when="large"> <ion-header-bar class="bar-royal"> <h1 class="title">Left Menu</h1> </ion-header-bar> <ion-content> <div class="list"> <div class="item"> A few </div> <div class="item"> of my </div> <div class="item"> favorite </div> <div class="item"> things </div> </div> </ion-content> </ion-side-menu> </ion-side-menus> <script> angular.module('ionicApp', ['ionic']) .controller('MainCtrl', function($scope, $ionicSideMenuDelegate) { $scope.toggleLeft = function() { $ionicSideMenuDelegate.toggleLeft(); }; }); </script> </body> </html>
See the Pen <a href="https://codepen.io/ionic/pen/cDbFg/">Side Menu Exposed On Large Viewport: Nightly</a> by Ionic (<a href="https://codepen.io/ionic">@ionic</a>) on <a href="https://codepen.io">CodePen</a>.
https://codepen.io/ionic/pens/public
201706,20170602
Related Posts:
313 ionic-v1 Custom Loading Bar
312 ionic-v1 Ionic Simple Progress ...
Ionic V1 Project My Club
315 ionic-v1 Ionic Tinder Cards 2
314 ionic-v1 Ionic Slide Tab
Related Posts Widget
No comments:
Post a Comment
Newer Post
Older Post
Home
View mobile version
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment