1
votes

Barre d'outils Matériau angulaire - Comportement du matériau

J'utilise des matériaux angulaires et angulaires pour un projet. Étant donné que la conception de ce projet est basée sur le matériau, j'utilise un matériau angulaire pour ses composants.

J'ai créé une barre d'outils via et une liste d'onglets via mat-tab-group . Et la page se présente comme suit:

Tout va bien. Le premier onglet contient également une liste Et c'est là que le problème commence ..

Le problème

Lorsque vous faites normalement défiler la liste, selon la Material Design :

la barre du haut doit défiler et les onglets doivent être en haut. Ce n'est pas le comportement standard du matériau angulaire et je me demande s'il est possible de recréer?

J'ai recréé le comportement par défaut dans un stackblitz .

Mes versions

Angulaire: 7.2.6
Matériau angulaire: 7.3.3

material-design angular angular-material angular-material2 sass

0 commentaires

3 Réponses :

0
votes

À l'aide de votre stackblitz , Ajoutez ceci à votre app.component.ts

body { margin:1vw !important; }

Ajoutez ceci à votre styles.css

.mat-tab-group{height: 100%;position: fixed; width:98vw;} .mat-toolbar.mat-primary { width:98vw; }

la clé de l'effet que vous recherchez est `.mat-tab-group {height: 100%; position: fixed;} ... mais vous verrez que le mat-group sera plus court que la mat-toolbar qui a l'air un peu moche ... donc nous les avons mis tous les deux à la même largeur ... mais maintenant nous avons un autre problème, le la marge est bizarre, c'est parce que le corps est défini sur une marge de 8px, donc finalement nous remplaçons le nombre absolu 8px par 1vw ... donc ça a l'air joli.

J'espère que cela répond à votre question.

3 commentaires

Bonjour Akaber, c'est presque ce que je recherche, le résultat de vos modifications: stackblitz.com/edit/ angular-jcydhx Mais cela rend la barre d'outils et les onglets fixés en haut, où la barre d'outils devrait défiler lorsque la liste est déroulée vers le bas, où les onglets devraient défiler vers le haut et rester là (voir l'effet ici : material.io/design/components/tabs.html#behavior , dans la section 'défilement')

une fois que l'utilisateur fait défiler vers le bas de plus de 104px (hauteur de mat-toolbar et mat-group), nous devons faire: .mat-toolbar {display: none; }

Nous pourrions avoir besoin de plus d’aide sur votre commentaire ici, à la recherche de la communauté pour nous aider stackoverflow.com/questions/55015895/...

0
votes

Je suis un peu confus au sujet de votre problème, mais si vous voulez coller l'en-tête de l'onglet en haut lorsqu'il défile vers le bas.

Ajoutez le code ci-dessous à votre stackblitz Fichier CSS. Celles-ci peuvent certainement fonctionner.

.mat-tab-group .mat-tab-header
{
  position: sticky;
  top:0;
}

1 commentaires

Merci pour votre réponse, mais cela ne réalise pas ce que je veux. J'ai amélioré ma question, peut-être que cela clarifie mieux ma question.

2
votes

Je l'ai implémenté en utilisant headroom.js une> bibliothèque. Je ne possède pas cette bibliothèque, mais je l'ai utilisée dans plusieurs projets et cela a parfaitement fonctionné.

Installer:

.mat-toolbar.headroom {
  will-change: transform;
  transition: transform 200ms linear;
}

.mat-toolbar.headroom--pinned {
  transform: translateY(0%);
}

.mat-toolbar.headroom--unpinned {
  transform: translateY(-100%);
}

.mat-tab-group ::ng-deep .mat-tab-header {
  will-change: transform;
  transition: transform 200ms linear;
}

.mat-tab-group.headroom--pinned ::ng-deep .mat-tab-header {
  transform: translateY(0%);
}

.mat-tab-group.headroom--unpinned ::ng-deep .mat-tab-header {
  transform: translateY(-56px);
}

Premièrement, ce dont nous avons besoin est de configurer la .mat-toolbar et .mat-tab-header éléments à position: fixe . .mat-toolbar sera fixé en haut du document ( top: 0 ), et .mat-tab-header sera corrigé sous la barre d'outils ( top: 56px - car 56px est la hauteur par défaut de la barre d'outils):

@ViewChild('toolbar') toolbar: MatToolbar;
@ViewChild('tabgroup') tabgroup: MatTabGroup;

ngAfterViewInit(): void {
  const toolbarEl = this.toolbar._elementRef.nativeElement;
  const tabHeaderEl = this.tabgroup._elementRef.nativeElement;

  const headroomOptions = {
    onPin : () => {
      tabHeaderEl.classList.remove('headroom--unpinned');
      tabHeaderEl.classList.add('headroom--pinned');
    },
    onUnpin : () => {
      tabHeaderEl.classList.remove('headroom--pinned');
      tabHeaderEl.classList.add('headroom--unpinned')
    }
}; 

  const headroom = new Headroom(toolbarEl, headroomOptions);
  headroom.init();
}

Le code css ci-dessus est fourni au niveau du composant , et c'est pourquoi je dois utiliser le sélecteur :: ng-deep . Nous devons également donner un peu de remplissage pour body:

<mat-toolbar color="primary" role="toolbar" aria-label="toolbar" #toolbar>
  ...
</mat-toolbar>

<mat-tab-group backgroundColor="primary" color="accent" mat-stretch-tabs #tabgroup> 
  ...
</mat-tab-group>

Ensuite, nous attacherons Headroom.js à la mat-toolbar élément. La bibliothèque ajoutera une classe css spécifique à cet élément lors du défilement vers le bas, et une autre classe css lors du défilement vers le haut. Mais nous devons également mettre à jour la position de mat-tab-header en conséquence:

body {
  padding-top: 56px;
}

.mat-toolbar {
  position: fixed;
  top: 0;
  z-index: 9;
}

.mat-tab-group {
  padding-top: 48px;
}

.mat-tab-group ::ng-deep .mat-tab-header {
  position: fixed;
  top: 56px;
  width: 100%;
  z-index: 10;
}

Nous avons également besoin les styles suivants pour les classes ajoutées par Headroom.js:

npm install headroom.js --save

Démo Stackblitz :

https://stackblitz.com/edit/angular-gqhwcr

0 commentaires