代码之家 › 专栏 › 技术社区 › John

我可以在“角度材质”菜单组件上使用哪些不同的方向属性?

angular-material2

John · 技术社区 · 6 年前

从 Angular Material Documentation 我可以用 direction

direction: Direction :菜单的布局方向。

Direction ,但我找不到它,也不知道如何在菜单组件上使用它。

我尝试了以下方法,但不确定可以在 方向 -属性。我想我可以用像这样的东西 Direction.UP Direction.DOWN ,但我找不到 方向

<button mat-raised-button type="button" [matMenuTriggerFor]="saveBtn" color="primary">Ny rad</button>
<mat-menu #saveBtn="matMenu" [direction]="'up'"> <!-- Here I am using [direction], but do not know what to put as a value there, that is of type Direction -->
<button mat-menu-item (click)="save('1')">Save 1</button>
<button mat-menu-item (click)="save('2')">Save 2</button>
</mat-menu>

编辑

搜索了一段时间后,我发现我可以使用这些值 'ltr' 和 'rtl' matMenuTriggerFor -选择器。

在声明类型为的变量之后 import { Direction } from '@angular/cdk/bidi';

export declare type Direction = 'ltr' | 'rtl';

尽管我找到了这个,但我得到了一个错误

模板分析错误:

当我尝试使用 方向 mat-menu -元素,即使文档中说我可以使用方向属性。我做错什么了吗?

3 回复 | 直到 6 年前

Marshal 6 年前

mat-menu 将继承 dir 属性,而不导入 cdk dir="rtl"

<div dir="rtl">  
  <button mat-button [matMenuTriggerFor]="menu">Menu</button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item>Item 1</button>
    <button mat-menu-item>Item 2</button>
  </mat-menu>
</div>

https://stackblitz.com/edit/angular-ol2cz5?embed=1&file=app/menu-overview-example.html

垫子菜单 进口 cdk/bidi 自动从 menu-directive.ts 在这里

https://github.com/angular/material2/blob/0b19b586d81feb667958152d033fd4c461a7479c/src/lib/menu/menu-directive.ts#L10

directionality.ts 在bidi中,如果未指定任何内容,则此行默认定义ltr。

this.value = (value === 'ltr' || value === 'rtl') ? value : 'ltr';

在查看超链接时,请注意此代码行上方的行。。。因为这是怎么回事
对于此属性 ltr 和 rtl 这是你唯一的选择。
不会是你要找的人。

https://github.com/angular/material2/blob/0b19b586d81feb667958152d033fd4c461a7479c/src/cdk/bidi/directionality.ts#L37

Edric Prince Bansal 6 年前

如果是这样,您可以使用 yPosition xPosition

位置

菜单在Y/垂直轴上的位置
有效值: above | below

例子:

<button mat-icon-button [matMenuTriggerFor]="appMenu">
    <mat-icon>more_vert</mat-icon>
</button>
<!-- Shows the menu above the button/trigger -->
<mat-menu yPosition="above" #appMenu="matMenu">
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Log out</button>
</mat-menu>

有效值: before after

例子:

<button mat-icon-button [matMenuTriggerFor]="appMenu">
    <mat-icon>more_vert</mat-icon>
</button>
<!-- Shows the menu before the button/trigger -->
<mat-menu xPosition="before" #appMenu="matMenu">
  <button mat-menu-item>Settings</button>
  <button mat-menu-item>Log out</button>
</mat-menu>

有关更多信息,请查看 docs .

G. Tranter 6 年前

Direction 类型是Angular CDK库中双向性API的一部分。与任何其他功能一样,您需要将其模块导入您的应用程序(例如app.module.ts)才能使用它:

import {BidiModule} from '@angular/cdk/bidi';

更多细节见附件 the API docs