Какие свойства Направления я могу использовать для компонента меню Угловой материал? - PullRequest
0 голосов
/ 29 ноября 2018

Из угловой документации материалов Я могу использовать атрибут direction в компоненте меню:

direction: Direction: направление расположения меню.

Это означает, что существует тип Direction, но я не могу его найти и не знаю, как использовать его в компоненте меню.

Я пробовал следующее, но я не уверен, какие значения я могу поместить в direction -атрибут.Я думал, что мог бы использовать что-то вроде Direction.UP или Direction.DOWN, но я не могу найти класс Direction в своем проекте.Есть ли скрытое место для импорта?

<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.

После объявления переменной с типом Direction в коде Visual Studio,он предложил мне import { Direction } from '@angular/cdk/bidi';, и этот тип выглядел следующим образом:

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

Несмотря на то, что я обнаружил это, я получаю сообщение о том, что

Ошибки синтаксического анализа шаблона:Невозможно привязать к «direction», так как это не известное свойство «mat-menu».

, когда я пытаюсь использовать атрибут direction для mat-menu -элемента,хотя в документации сказано, что я могу использовать атрибут направления.Я что-то не так делаю?

Ответы [ 3 ]

0 голосов
/ 30 ноября 2018

mat-menu будет наследовать атрибут dir из родительского контейнера без импорта cdk ... обратите внимание на dir="rtl" в родительском div

<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>

Stackblitz

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

Редакция

mat-menu автоматически импортирует 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';
  • Обратите также внимание на строки вышестрока кода при просмотре гиперссылки ... так как directionality.ts получает это значение из родительского контейнера или глобального документа.
  • Для этого атрибута ltr и rtl - единственные варианты.
  • Если вы ищете выше, ниже, влево или вправо, пожалуйста, укажите ответ об атрибутах позиции x и y, так как dir не будет тем, который вы ищете.

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

0 голосов
/ 30 ноября 2018

Вероятно, вы ищете способ настроить положение меню.

Если это так, вы можете использовать атрибуты yPosition и / или xPosition, чтобы изменить место отображения меню.

Вот что представляют собой атрибуты:

  • yPosition

    • Положение меню по оси 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>
      
  • xPosition

    • Положениеменю по оси X / по горизонтали
    • Допустимые значения: 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>
      

Для получения дополнительной информации ознакомьтесь с документами .

0 голосов
/ 30 ноября 2018

Тип Direction является частью API двунаправленности в библиотеке Angular CDK.Как и для любой другой функции, вам необходимо импортировать его модуль в ваше приложение (например, app.module.ts), чтобы использовать его:

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

Подробнее см. В Документация API .

...