угловой 4 с нг-боковой панели, добавить класс справа

Question

угловой 4 с нг-боковой панели, добавить класс справа

1

Я использую ng-sidebar в моем проекте с угловым 4, но я не знаю, где поставить класс "ng-sidebar-right", можете ли вы, ребята, помочь мне с этой проблемой litle (им новичок, извините). мой код выглядит так:

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

miguel buzo 24 окт. 2017, в 21:56

Источник

Теги:

angular

javascript

1 ответ

Ещё вопросы

Philipp Kief · Accepted Answer · 2017-10-24T17-10-00.000Z

Если вы хотите иметь боковую панель с правой стороны, вам нужно установить position в position "right":

<!-- 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-sidebar - right":

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

Я создал для вас пример stackblitz:

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