ionic侧边栏

移动开发 waitig 748℃ 百度已收录 0评论

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>侧边栏</title>
    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp", ["ionic"]);

        app.controller("myCtrl", function ($scope, $ionicSideMenuDelegate) {
            $scope.toggleLeft = function () {
                $ionicSideMenuDelegate.toggleLeft();
            };
        });
    </script>

</head>

<body ng-controller="myCtrl">
<ion-side-menus>
    <!– 中间内容 –>
    <ion-side-menu-content>

        <ion-header-bar class="bar-positive" align-title="center">
            <button class="button button-icon ion-ios-more" ng-click="toggleLeft()"></button>
            <h1 class="title">中间</h1>
        </ion-header-bar>

        <ion-content class="has-header">
            这是“中间”页面HTML内容
        </ion-content>

    </ion-side-menu-content>

    <!– 左侧菜单 –>
    <ion-side-menu side="left">

        <ion-header-bar class="bar-positive">
            <h1 class="title">左侧</h1>
            <button class="button button-icon ion-ios-arrow-left" ng-click="toggleLeft()"></button>
        </ion-header-bar>

        <ion-content class="has-header">
            这是“侧边栏”页面HTML内容
        </ion-content>
    </ion-side-menu>
</ion-side-menus>
</body>
</html>


本文由【waitig】发表在等英博客
本文固定链接:ionic侧边栏
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)