2017-10-24 10 views
1

私の角度4プロジェクトでng-sidebarを使用してイムが、私は「NG-サイドバー - 右の」置く場所を知らない(、クラスをあなたたちはこのlitle問題で私を助けることができます私の初心者、申し訳ありません)。角度4 NG-サイドバーで、クラスに追加するには、右

app.component.html:

<ng-sidebar-container> 
<ng-sidebar [(opened)]="_opened"> 
    <ul> 
     <li>Menu Item</li> 
     <li>Menu Item</li> 
     <li>Menu Item</li> 
    </ul> 
</ng-sidebar> 

<div ng-sidebar-content> 
    <router-outlet> 
     <div class="jumbotron header"> 
      <img src="../assets/img/logo.png"> 
      <button type="button" class="menu" (click)="_toggleSidebar()" class="btn btn-default btn-lg"> 
       <span class="glyphicon glyphicon-menu-hamburger"></span> 
      </button> 
     </div> 
    </router-outlet> 
</div> 

app.component.ts:お時間を

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    public _opened: boolean = false; 
    public _toggleSidebar() { 
     this._opened = !this._opened; 
    } 
} 

おかげで私のコードは次のようになります! :D

答えて

0

あなたは「右」にposition入力を設定する必要があり、右側のサイドバーに持つようにしたい場合:

<!-- A sidebar --> 
<ng-sidebar [(opened)]="_opened" position="right"> 
    <ul> 
     <li>Menu Item</li> 
     <li>Menu Item</li> 
     <li>Menu Item</li> 
    </ul> 
</ng-sidebar> 

をあなたがそれをスタイルにしたい場合は、あなたの中にあらかじめ定義されたクラスを使用することができますCSS。右サイドバーのクラスがあります "NG-サイドバー - 右":

.ng-sidebar--right { 
    color: red; 
    background: antiquewhite; 
    width: 12rem; 
} 

私はあなたのためstackblitz例を作成しました:

https://stackblitz.com/edit/angular-ng-sidebar

+0

は、このためのuに感謝! –

関連する問題