Toggle-nur sidenav mit Eckig-Material?

Möchte ich eine Seite im Menü geschlossen ist, dass standardmäßig auf jedem Bildschirm-Größe, und wird immer offener auf andere Inhalte. Egal was ich versuche aber, es schaltet immer bei breiten über 960px.

Dies ist, was mein Menü jetzt so aussieht:

<md-sidenav is-locked-open="false" class="md-sidenav-right md-whiteframe-z2" component-id="right">
    <md-toolbar class="md-theme-dark">
        <div class="md-toolbar-tools">
            <md-button ng-click="toggleMenu()" class="md-button-colored"><core-icon icon="polymer"></core-icon></md-button>
            <span flex></span>
        </div>
    </md-toolbar>
    <md-content class="md-content-padding">
        <md-button ng-click="toggleMenu()" class="md-button-colored">Stuff</md-button>
    </md-content>
</md-sidenav>

Und mein controller:

.controller('HomeCtrl', function ($scope, $mdSidenav) {
    $scope.toggleMenu = function() { $mdSidenav('right').toggle(); };
})

Ich habe ist-gesperrt-öffnen aus der website aber ich kann nicht finden, die überall in Ihrem javascript.

InformationsquelleAutor Ryan Metin | 2014-10-21
  1. 9

    Können Sie die ist-gesperrt-öffnen Attribut in md-sidenav zur Steuerung der Verriegelung öffnen der sidenav. Hierdurch werden die sidenav, Wann der browser-Breite von 1000px.

    <md-sidenav is-locked-open="$media('min-width: 1000px')"></md-sidenav>

    Haben, ist für immer freigeschaltet, dieser arbeitete für mich:

    <md-sidenav is-locked-open="$media('')"></md-sidenav>
    • Eigentlich, seit ich gepostet diese Frage gibt es schon ein update. Jetzt können Sie einfach die Klasse "md-geschlossen" auf md-sidenav.
    • Genial, das ist auf jeden Fall nützlich und sauberer. Danke!
    InformationsquelleAutor ng-darren
  2. 0

    sidenav verborgen sein, alle Zeit durch das auskommentieren der folgenden style-in-eckig-material.css

    @media (min-width: 960px) {
    md-sidenav {
    /* position: static;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important; }
    .md-sidenav-backdrop {
    display: none !important;*/} }

    • Cool... Danke.
    InformationsquelleAutor Sumudu
Schreibe einen Kommentar