Làm thế nào để ghim mở một sideNav trong góc-Vật liệu Thiết kế

Question

Tôi đã ben sử dụng

<md-sidenav md-component-id="leftNav" md-is-open="vm.isOpen" 
      md-is-locked-open="vm.isPinned" ... > 
    <i class="fa fa-bars float-right" ng-click="vm.toggleNav()"></i> 
    ... 
</md-sidenav> 

với phương pháp toggleNave trong bộ điều khiển thiết lập các giá trị

class MyController { 
    constructor($mdSideNav) { 
     this.mdSideNav = mdSideNav; 
     this.isPinned = false; 
     this.isOpen = false; 
    } 

    toggleNav = (navId) => { 
     this.$mdSideNav(navId).toggle().then(() => { 
      this.isPinned = this.isOpen; 
     } 
    } 
} 

Nhưng điều này gây ra màn hình để flash trên mở và đóng, và nó không có vẻ là cách tốt nhất để pin mở một sideNav.

Mong muốn là có nút bật/tắt được mở, nhưng vẫn giữ được nếp mở cho đến khi tôi đóng nó lại.

Nếu tôi sử dụng md-is-locked = "$ media ('')" thì nút sideNav khóa mở và không bao giờ đóng cho đến khi cửa sổ co lại bên dưới kích thước phương tiện. Đây không phải là điều tôi muốn.

Nếu tôi không sử dụng md bị khóa, thì bên hông sẽ sụp đổ khi bạn nhấp vào nó, nhưng tôi muốn nó vẫn mở! cho đến khi tôi muốn đóng nó lại.

Bất kỳ ai biết cách thực hiện việc này?

Cảm ơn

BTW: Tôi đang sử dụng ES6, do đó chức năng lớp và mũi tên. :-)

Answer 1

Từ khi xem tài liệu, tôi không nghĩ bạn cần sử dụng biến isPinned và isOpen vì có vẻ như hàm chuyển đổi xử lý nó.

Do đó, đây

toggleNav = (navId) => { 
    this.$mdSideNav(navId).toggle().then(() => { 
     this.isPinned = this.isOpen; 
    } 
} 

sẽ được đi

toggleNav = (navId) => { 
    this.$mdSideNav(navId).toggle(); 
} 

Để thực hiện việc này, bạn sẽ cần phải đi qua id của sideNav

Vì vậy, đây

<i class="fa fa-bars float-right" ng-click="vm.toggleNav()"></i> 

Sẽ trở thành

<i class="fa fa-bars float-right" ng-click="vm.toggleNav('leftNav')"></i> 

Cuối cùng, đáng để kiểm tra phiên bản Thiết kế Material Design bạn đang sử dụng, có vẻ như có một vài vấn đề khi không sử dụng phiên bản> 0.8.

Xem ví dụ cho nav ngay trong các tài liệu Side Nav Material Design