web-dev-qa-db-fra.com

Angular CDK comprendre le système de position de superposition

J'essaie vraiment de comprendre le paramètre de position de superposition mais sans aucune chance. Je ne trouve pas non plus de documentation sur ce sujet.

Que signifie le code suivant?

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);
angularangular-cdk
11
undefined

Il n'y a toujours pas beaucoup de documentation sur le Angular Overlay CDK. La plupart de ce que j'ai appris vient de leur dépôt Github.

Stratégie de position globale

Ce serait une stratégie de positionnement mondial. La superposition que vous créez serait positionnée directement sur l'écran, et non par rapport à un élément. C'est bon pour une fenêtre de dialogue ou une fenêtre modale.

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

Stratégie flexible connectée à

C'est ce que vous voulez utiliser pour les barres d'outils, le menu, les choses qui sortent d'un bouton. Vous devrez transmettre une référence à votre bouton auquel vous souhaitez que la superposition soit connectée:

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

et dans votre Component.ts

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

ConnectionPositionPair - il s'agit d'une liste de positions préférées, de la plus souhaitable à la moins souhaitable. Il essaiera donc d'abord d'utiliser la première position dans laquelle vous passez.

originX: Ce sera "début", "fin" ou "centre". C'est le point d'attache de votre superposition. Si vous avez transmis un bouton à votre fonction .flexibleConnectedTo, cela fait référence au début, à la fin et au centre de cet élément.

originY: ce sera "haut", "bas" ou "centre". Il s'agit du haut, du bas ou du centre de l'élément transmis.

Alors { originX: 'start', originY: 'bottom' } serait le coin inférieur gauche du bouton.

overlayX et overlayY ont les mêmes options, mais se réfèrent à l'endroit où la superposition sera attachée. { overlayX: 'start', overlayY: 'top' } attache le coin supérieur gauche de la superposition à l'origine que nous avons spécifiée.

Ensuite, comme vous pouvez le voir dans le tableau, nous pouvons passer plusieurs positions. Si la superposition ne tient pas dans la première position, elle essaiera la position suivante dans le tableau. Donc, si la superposition ne tient pas sur l'écran de la première façon, elle passera automatiquement à la deuxième position, qui est définie ici comme reliant la partie supérieure gauche du bas à la partie inférieure gauche de la superposition.

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

withPush

Vous pouvez définir withPush sur true, ce qui poussera la superposition à l'écran si aucune des positions fournies ne correspond.

Le code est toujours le meilleur endroit pour voir la documentation: https://github.com/angular/material2/blob/master/src/cdk/overlay/position/connected-position.ts

28
David Rinck