Question

我在我的角度4项目上使用ng-sidebar，但我不知道在哪里放置“ng-sidebar-right”课程，你们可以帮我解决这个问题吗（新手，对不起）。我的代码看起来像这样：

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

Answer 1

如果您想让侧边栏位于右侧，则必须将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-sidebar - right”类：

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

我为你创建了一个stackblitz示例：

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

角度4与ng-sidebar，添加类右

1 个答案: