Угловой CDK понимание системы позиционирования оверлея - PullRequest
Новая
       9

Угловой CDK понимание системы позиционирования оверлея

0 голосов
/ 20 сентября 2018

Я действительно пытаюсь понять параметр позиции оверлея, но безуспешно.Я также не могу найти документацию по этой теме.

Что означает следующий код? 

const positions = [
  new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }),
  new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' })
];
this.positionStrategy = this._overlay.position()
.flexibleConnectedTo(this.getConnectedElement())
.withPositions(positions)
.withFlexibleDimensions(false)
.withPush(false);

1 Ответ

0 голосов
/ 17 октября 2018

Документация об Angular Overlay CDK до сих пор не так много.Большая часть того, что я узнал, пришла из их репозитория на Github.

Глобальная стратегия позиции

Это будет стратегия глобального позиционирования.Создаваемый оверлей будет располагаться прямо на экране, а не по отношению к элементу.Это хорошо для всплывающего диалогового окна или модального окна. 

  overlayConfig = this.overlay.position().global()
    .centerHorizontally().centerVertically();

Гибкое подключение к стратегии

Это то, что вы хотите использовать для панелей инструментов, меню, вещей, которыевыскочить из кнопки.Вам нужно будет передать ссылку на кнопку, к которой вы хотите подключить оверлей: 

<button id="toolbar-icons" cdkOverlayOrigin mat-button class="toolbar-button" (click)="this.showAppContext()">

и в вашем Component.ts 

showAppContext() {
  const appOverlayRef: AppOverlayRef = 
    this.appOverlayService.open(this.origin);
}

ConnectionPositionPair - это список предпочтительных позиций, от самых до наименее желательных.Поэтому он сначала попытается использовать первую пройденную вами позицию.

originX: это будет «начало», «конец» или «центр».Это точка крепления для вашего оверлея.Если вы передали кнопку в функцию .f flexConnectedTo, это относится к началу, концу и центру этого элемента.

originY: это будет «верх», «низ» или «центр».Это относится к верху, низу или центру переданного элемента.

Таким образом, { originX: 'start', originY: 'bottom' } будет нижним левым углом кнопки.

overlayX и overlayY имеют одинаковые параметры, но обращаются к тому месту, где будет прикреплен оверлей.{ overlayX: 'start', overlayY: 'top' } присоединяет верхний левый угол наложения к указанному нами источнику.

Затем, как вы можете видеть в массиве, мы можем передать несколько позиций. Если наложение не подходитв первой позиции он попробует следующую позицию в массиве.Таким образом, если наложение не помещается на экране первым способом, оно автоматически сместится во вторую позицию, которая определяется здесь как соединение левой верхней части нижней части с нижней левой рукой наложения. 

const positions = [
  new ConnectionPositionPair(
   { originX: 'start', originY: 'bottom' },
   { overlayX: 'start', overlayY: 'top' }),
  new ConnectionPositionPair(
  { originX: 'start', originY: 'top' },
  { overlayX: 'start', overlayY: 'bottom' })];
];

withPush

Вы можете установить withPush в значение true, что приведет к появлению наложения на экране, если ни одна из предоставленных позиций не подходит.

Код по-прежнему лучшее место для просмотра документации: https://github.com/angular/material2/blob/master/src/cdk/overlay/position/connected-position.ts

...