Документации по 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: это будет «начало», «конец» или «центр». Это точка крепления вашей накладки. Если вы передали кнопку в функцию .flexibleConnectedTo, это относится к началу, концу и центру этого элемента.
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' })];
];
с помощью Push
Вы можете установить для withPush значение true, что приведет к перемещению оверлея на экран, если ни одна из предоставленных позиций не подходит.
Код по-прежнему является лучшим местом для просмотра документации: https://github.com/angular/material2/blob/master/src/cdk/overlay/position/connected-position.ts
person
David Rinck
schedule
17.10.2018
