Angulaire du Matériel 2 - Comment verrouiller mat-barre d'outils et mat-onglets en haut
Pour mon Site web je suis tenter de verrouiller le < Mat-Barre d'outils > en haut de l'écran, puis directement sous que je veux verrouiller le < Mat Onglets-> .
La question, je suis en cours d'exécution dans est cette position: fixed dans le CSS n'est pas bloquant, à tous, et quand je suis aller sur le site et inspecter l'élément, c'est de mettre dans un < div >
Comment suis-je censé pour verrouiller ces deux éléments vers le haut, comment suis-je censé ignorer cette auto créé Div? J'ai eu une précédente question similaire à cela, mais j'ai résolu en utilisant le Fixe et le positionnement Absolu, qui ne s'applique pas dans cette version plus récente de Angulaire Angulaire du Matériel.
- Vous ne pouvez pas aller au-delà de cette auto-créé
div
. Vous pouvez essayer de nidification le contenu de votre application dansmat-sidenav-content
, mais je ne suis pas sûr qu'il va créer undiv
ainsi.
Vous devez vous connecter pour publier un commentaire.
Vouliez-vous dire une barre d'outils flottante?
Il suffit d'ajouter une classe à la barre d'outils et la rendre collante:
Remarque: Il n'y a pas de support pour
position: sticky
sur IE 11. Pour plus d'informations sur la prise en charge du navigateur pourposition: sticky
, la vue de cette caniuse page.position: sticky
à tous.Vous pouvez probablement obtenir en définissant le style avec ::ng-profondeur:
DÉMO
margin-top
à64px
au lieu de55px
.mat-toolbar
à l'intérieur d'unmat-sidenav
, votre démo rocks!. Il est intéressant de noter que::ng-deep .mat-toolbar { ... }
doit être écrit dans la composante du fichier CSS et non dans le grandstyles.css
un.Même j'ai été confronté à la même question pour mon projet. Il est très diffiucult pour faire de la barre fixe lorsqu'elle est déclarée à l'intérieur d'
<mat-sidenav-container>
.La raison pour laquelle c'est difficile, c'est parce que les deux
<mat-sidenav-container>
et<mat-toolbar>
utilisetransform: translate3d(0,0,0)
.Donc, la meilleure façon de procéder serait, pour supprimer
<mat-toolbar>
de<mat-sidenav-container>
et d'écrire un extenal css pour la barre d'outils.Cette solution a fonctionné pour moi.
Cela fonctionne pour moi:
app.component.html
style.css
Voici la solution garçons.
1) Aller dans la barre d'outils du composant et les ajouter à son css/scss fichier :
2) Maintenant allez à la racine de votre application qui contient à la fois la barre du haut et par le routeur de sortie (app.composant par défaut), et tapez le texte suivant sur son css/scss fichier :
Pris mes quelques heures, mais enfin trouvé la solution.