Question

我正在使用Angular 2材质来创建应用，并且我尝试在md-sidenav-layout部分添加材质菜单。但是，菜单的触发器显示在页面的不同部分。

app.component.ts - 我引导的主要组件

    @Component({
        selector: 'app-root',
        template: `
        <navbar></navbar>
        <sidenav #tests></sidenav>
        `
    })

sidenav.component.ts - sidenav组件。我指的是https://github.com/angular/material2/blob/master/src/lib/menu/README.md来创建菜单。

    @Component({
        selector: 'sidenav',
        template: `
            <md-sidenav-layout>
                <md-sidenav #start  [opened]="sidenavStatus()" (close)="reset()">
                    <md-card>
                        <p class="profile-name">Username</p>
                    </md-card>

                    <md-list class="sidenav-list">
                        <md-list-item> Add Steps </md-list-item>
                        <md-list-item> Add Sections </md-list-item>
                        <md-list-item> Add Fields </md-list-item>
                    </md-list>
                    <br>               
                </md-sidenav>

                //the actual content in the page
                <md-menu #menu="mdMenu">
                    <button md-menu-item> Refresh </button>
                    <button md-menu-item> Settings </button>
                    <button md-menu-item> Help </button>
                    <button md-menu-item disabled> Sign Out </button>
                </md-menu>
                <md-card class="step-card">
                    <md-card-title>Card with title
                        <md-icon>more_vert</md-icon>
                        //button which is used to trigger the menu
                        <button md-icon-button [md-menu-trigger-for]="menu">
                            <md-icon>more_vert</md-icon>
                        </button>                    
                    </md-card-title>   
                    <md-card-content>
                            <p>This is supporting text.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
                    </md-card-content>
                </md-card>        
            </md-sidenav-layout>
        `,
        styleUrls: ['./app/sidenav/sidenav.component.css']
    })

在页面上渲染它在app-root（主要组件）外部创建一个新的div，其中包含一个转换css属性，该属性会偏移菜单的实际位置。

呈现DOM：

呈现的用户界面

我错过了什么？当我尝试添加应该在sidenav之外的实际内容时，即使是偏向sidenav结束的位置。

Answer 1

要解决出现在内容或应用区域下方的对话框或菜单的问题，只需导入角度材质预制主题之一或创建自己的主题。

预建主题名称

deeppurple-amber.scss
靛蓝pink.scss
pink-bluegrey.scss
紫green.scss

如果你正在使用sass

import ‘~@angular/material/core/theming/prebuilt/[name-of-the-themes].scss';

这就是你创建主题的方式

创建sass或scss文件

@import '~@angular/material/core/theming/all-theme';
// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$candy-app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($candy-app-theme);

并将其包含在styles.scss文件中

示例主题取自Angular Material docs https://material.angular.io/guide/theming

此处类似问题Angular Material2 md-select dropdown appears at bottom of the page

md-menu的md-overlay-container在Angular 2 Material中未对齐

1 个答案: