eckiges Material Material Design horizontale nav tabs konvertieren zu mobilen Menü, wenn Browser Fenstergröße ändert

Ich habe AMD Seite mit horizontalen Tabs erstellt mit <md-tab> und ich möchte es zu mobilen Menü, wenn ich Browsergröße auf kleine Größe dann Größe auf normal und ändern umgekehrt wie bootstrap mobiles menü.ist das möglich ??? Vielen Dank im Voraus.eckiges Material Material Design horizontale nav tabs konvertieren zu mobilen Menü, wenn Browser Fenstergröße ändert

Ich habe Hauptseite wie folgt erstellt: Index.HTML

<!DOCTYPE html> 
<html> 
<head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <meta name="apple-mobile-web-app-capable" content="yes"> 
     <meta name="apple-mobile-web-app-status-bar-style" content="black"> 

    <link rel="stylesheet" href="angular-material/angular-material.css"> 
    <style > 
.mainApp md-content .ext-content { 
    padding: 50px; 
    margin: 20px; 
    background-color: #FFF2E0; } 
    </style> 
</head> 
<div id="logo" > <a href="favicon.ico"></div> 
<body ng-app="mainApp"> 
    <div ng-controller="AppCtrl" layout="column" ng-cloak> 

    <script type="text/ng-template" id="views/home.html" ></script> 
    <script type="text/ng-template" id="views/aboutus.html"></script> 
    <script type="text/ng-template" id="views/services.html"></script> 
    <script type="text/ng-template" id="views/contactus.html"></script> 

    <md-tabs md-stretch-tabs="always" class="md-primary" md-selected="selectedIndex"> 

    <md-tab data-ui-sref="home" md-active="state.is('home') "> 
    <md-tab-label>HOME</md-tab-label> 
    </md-tab> 

    <md-tab data-ui-sref="aboutus" md-active="state.is('aboutus')"> 
    <md-tab-label>ABOUT US</md-tab-label> 
    </md-tab> 

    <md-tab data-ui-sref="services" md-active="state.is('services')"> 
    <md-tab-label>SERVICES</md-tab-label> 
    </md-tab> 

    <md-tab data-ui-sref="contactus" md-active="state.is('contactus')"> 
    <md-tab-label>CONTACT US</md-tab-label> 
    </md-tab> 
<!--  <md-tab id="tab1" label="HOME" aria-controls="tab1-content" md-nav-click="goto('home')"></md-tab> 
    <md-tab id="tab2" label="ABOUT US" aria-controls="tab2-content" md-nav-click="goto('aboutus)"></md-tab> 
    <md-tab id="tab3" label="SERVICES" aria-controls="tab3-content" md-nav-click="goto('services')"></md-tab> 
    <md-tab id="tab4" label="CONTACT US" aria-controls="tab4-content" md-nav-click="goto('contactus')"></md-tab> 
--> </md-tabs> 

    <div id="content" ui-view flex> </div> 

    </div> 

    <script src="angular/angular.js"></script> 
    <script src="angular-material/angular-material.js"></script> 
    <script src="angular-aria/angular-aria.js"></script> 
    <script src="angular-animate/angular-animate.js"></script> 
    <script src="angular/angular-ui-router.min.js"></script> 
    <script src="controller/controller.js"></script> 

</body> 
</html>

controller.js

(function(angular, undefined) { 
    "use strict"; 
    angular.module('mainApp', ['ngMaterial', 'ui.router']) 
    .config(function($stateProvider, $urlRouterProvider) { 

     $urlRouterProvider.otherwise('/home'); 
     $stateProvider 
     .state('home', { 
      url: "/home", 
      templateUrl: "views/home.html" 
     }) 
     .state('aboutus', { 
      url: "/aboutus", 
      templateUrl: "views/aboutus.html" 
     }) 
     .state('services', { 
      url: "/services", 
      templateUrl: "views/services.html" 
     }) 
     .state('contactus', { 
      url: "/contactus", 
      templateUrl: "views/contactus.html" 
     }) 
     ; 
    }) 
    .controller('AppCtrl', function($scope,$state, $location, $log) { 
     $scope.selectedIndex = 0; 
     $scope.$watch('selectedIndex', function(current, old) { 
      switch (current) { 
       case 0: 
        $location.url("/home"); 
        break; 
       case 1: 
        $location.url("/aboutus"); 
        break; 
       case 2: 
        $location.url("/services"); 
        break; 
       case 3: 
        $location.url("/contactus"); 
        break; 
      } 
     }); 
    }); 

})(angular);

Quelle

2016-09-12 amar ghodke

Hier ist ein Beispiel dafür, wie man zeigen kann, und Elemente verstecken basierend auf Bildschirmgröße - CodePen

In Ihrem Dorsch Sie würden md-tabs mit md-menu oder md-menu-bar austauschen.

Überprüfen Sie die docs für weitere Informationen auf $ mdMedia.

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column" layout-align="center center"> 
    <div style="width:200px; height:100px; background:red" ng-if="!mobile"></div> 
    <div style="width:100px; height:200px; background:blue" ng-if="mobile"></div> 
</div>

angular.module('MyApp',['ngMaterial', 'ngMessages']) 

.controller('AppCtrl', function($scope, $window, $mdMedia) { 
    resizeProgress(); 

    angular.element($window).bind("resize", function() { 
    resizeProgress(); 
    $scope.$apply(); 
    }); 

    function resizeProgress() { 
    if ($mdMedia("gt-xs")) { 
     $scope.mobile = false; 
    } 
    else if ($mdMedia("xs")) { 
     $scope.mobile = true; 
    } 
    } 
});

Für das Menü arbeiten Sie etwas Einfaches wie dies tun könnte:

Markup

<md-menu-item><md-button ng-click="showPage(0)">Home</md-button></md-menu-item> 
<md-menu-item><md-button ng-click="showPage(1)">About Us</md-button></md-menu-item> 
....

$scope.showPage = function (page) { 
    $scope.selectedIndex = page; 
};

Allerdings, wenn Sie tun würden, dass ich den Namen ändern würde vorschlagen selectedIndex zu so etwas wie selectedLocation.

Quelle

2016-09-12 11:49:35

i für es wirklich zu schätzen, aber es wird meine md-Tabs auf mobiles Menü d.h alle Seiten nach Hause aboutus Service und Kontaktseiten im einzelnen mobilen Menü machen ???? –

@amarghodke Bearbeiten. :-) –

Sir, ich die normale Ansicht als Reiter will, dass ls wie SPA und wenn i Browsergröße zu reduzieren, sollten alle Register auf mobile Menüs wie Bootstrap ansprechendes Handy-Menü konvertiert werden. es ist nicht möglich mit ?? Bitte kooperieren Ich bin neu bei AMD, ich hoffe, es ist nicht störend für Sie. –

eckiges Material Material Design horizontale nav tabs konvertieren zu mobilen Menü, wenn Browser Fenstergröße ändert

Antwort

Verwandte Themen