Découvrez comment remplacer une disposition basée sur le flotteur par Flexbox pour un meilleur alignement et une meilleure flexibilité, et utilisez Angular Flex CDK pour réduire les requêtes multimédias CSS.
Lorsque nous construisons une page, les éléments ont besoin d’une structure de mise en page pour les positionner. Dans les temps anciens où nous avons créé des interfaces pour définir ces positions, nous utiliserions float ou position dans CSS pour aligner nos éléments.
De nos jours, nous devons prendre soin de nous adapter à l’utilisateur et nous ne savons pas s’ils visitent notre page avec un téléphone, un PC ou une télévision. Dans CSS, nous avons des alternatives au classique float et position Pour commander et aligner nos éléments: Flex.
Flex est un modèle de disposition natif dans CSS et fournit un ensemble de façons de commander des éléments HTML dans le DOM, comme les aligner côte à côte, la commande et la réaction à l’espace restant et une tonne d’options. Flex nous aide à créer une excellente interface utilisateur flexible et réactive combinée avec le Requêtes médiatiques CSS.
Depuis la dépréciation de Aménagement de Flex Angularl’équipe angulaire recommande d’utiliser CSS Flex ou Grille CSS.
Mais au lieu d’écrire les requêtes multimédias CSS avec des règles Flex dans le fichier CSS ou SASS, je préfère garder le contrôle, et c’est le moment idéal pour utiliser Disposition CDK!
Qu’est-ce que la disposition CDK?
La disposition CDK est un utilitaire CDK angulaire Pour simplifier l’interface utilisateur réactive du bâtiment, ce qui facilite la réaction des modifications de la taille de l’écran, en utilisant BreakPointobserver Pour écouter lorsque les changements de mise en page se produisent dans le navigateur et la mise à jour de l’interface utilisateur en conséquence.
Nous pourrions prendre le week-end complet (selon le moment que vous lisez cet article) Fléchir Ou nous pouvons apprendre en faisant avec un scénario du monde réel où vous pouvez apprendre à créer la mise en page avec Flex et pourquoi profiter de la mise en page CDK.
Scénario
Mon ami a créé un projet avec une barre latérale et un domaine de contenu principal, mais il veut que sa mise en page soit réactive pour le bureau et le mobile. Après avoir examiné son code, nous avons trouvé ceci:
Il utilisait un float Pour positionner les éléments et créer la disposition 🙁, et ce n’est pas une façon moderne de la construire.
.sidebar {
float: left;
width: 20%;
background-color: #f0f0f0;
padding: 20px;
box-sizing: border-box;
min-height: 100vh;
}
.main-content {
float: left;
width: 80%;
padding: 20px;
box-sizing: border-box;
min-height: 100vh;
}
Par exemple, ce code montre comment la conception se casse lorsque nous nous transformons de bureau en mobile. Il veut que ce site Web soit réactif pour les petits et grands écrans, cachant peut-être la barre latérale pour mobile.
Nous devons changer le code, et c’est notre opportunité d’apprendre à commencer avec Flex et à le combiner avec des requêtes multimédias pour le rendre réactif. Et après cela, nous pouvons refacter de combiner avec la disposition Flex CDK. Faisons-le!
Configuration du projet
Tout d’abord, nous devons cloner le projet en exécutant la commande suivante dans votre terminal:
git clone https://github.com/danywalls/angular-flex-cdk.git
Cloning into 'angular-flex-cdk'...
remote: Enumerating objects: 70, done.
remote: Counting objects: 100% (70/70), done.
remote: Compressing objects: 100% (55/55), done.
remote: Total 70 (delta 22), reused 50 (delta 13), pack-reused 0 (from 0)
Receiving objects: 100% (70/70), 136.57 KiB | 1.10 MiB/s, done.
Resolving deltas: 100% (22/22), done.
Accédez au répertoire Angular-Flex-CDK et installez toutes les dépendances avec npm i. Une fois que c’est terminé, courez ng serve pour voir notre projet fonctionner.
npm i
ng serve
Component HMR has been enabled.
If you encounter application reload issues, you can manually reload the page to bypass HMR and/or disable this feature with the `--no-hmr` command line option.
Please consider reporting any issues you encounter here: https://github.com/angular/angular-cli/issues
Initial chunk files | Names | Raw size
polyfills.js | polyfills | 90.20 kB |
main.js | main | 5.35 kB |
styles.css | styles | 339 bytes |
| Initial total | 95.89 kB
Application bundle generation complete. [4.516 seconds]
Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
➜ Local: http://localhost:4200/
➜ press h + enter to show help
Dans votre navigateur, ouvrez http://localhost:4200 Et notre projet est opérationnel!
Après avoir testé l’application et utilisé Chrome Devtools (F11) Pour changer la taille, il ne semble pas comme prévu! Passons à Fléchir.
Tout d’abord, nous allons apporter des modifications à la vieille école float et left à l’affichage moderne. Dans votre éditeur, ouvrez le projet et ouvrez le app.component.scss déposer. Nous allons modifier le .container classe à utiliser display: flex et le combiner avec flex-wrap: wrap.
Flex sets comment un élément Flex se développera ou s’adaptera pour s’adapter à l’espace dans les ensembles de récipient et de what-wrap, si les éléments flexibles sont forcés sur une ligne ou peuvent s’envelopper sur plusieurs lignes.
En savoir plus sur se dérober à la flexion et Fléchir.
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
Après ces modifications, la barre latérale et le contenu principal s’aligneront côte à côte, afin que nous puissions supprimer le float: left option
display: flex;
flex-wrap: wrap;
Nous maintenons les mêmes proportions de largeur (20% de barre latérale, 80% de contenu principal), mais pour le rendre réactif et masquer la barre latérale sur le mobile, nous devons utiliser Requêtes médiatiques CSS.
Ajoutez une requête multimédia pour les écrans plus petits qu’un point d’arrêt mobile typique (par exemple, 768px) et cachez la barre latérale et faites en sorte que le contenu principal prenne 100% de largeur sur le mobile.
@media (max-width: 768px) {
.sidebar {
display: none;
}
.main-content {
width: 100%;
}
}
Enregistrer les modifications, le rechargement et le tada !!!
Avec seulement quelques lignes de code, nous avons remplacé la disposition basée sur le flotteur par Flexbox pour un meilleur alignement et une meilleure flexibilité. En travaillant en combinaison avec les requêtes multimédias CSS pour cacher la barre latérale et ajuster la largeur du contenu principal sur les appareils mobiles, nous avons amélioré la réactivité.
Mais nous voulons le refacter à une meilleure version avec CDK angulaire!
Déplacer vers Angular Flex CDK
Au lieu d’écrire toute notre logique dans CSS avec des requêtes multimédias, nous pouvons avoir plus de contrôle sur celle-ci en utilisant Angular Flex CDK avec BreakPointobserver.
Tout d’abord, ouvrez votre terminal et installez @ Angular / CDK.
npm i @angular/cdk
Ouvrir le app.component.ts et importation BreakpointObserver depuis @angular/cdk/layouten utilisant Inject pour déclarer une variable pour utiliser le serveur BreakPointObserver.
private breakpointObserver = inject(BreakpointObserver);
Ensuite, créez un signal pour expliquer si la fenêtre est la taille du mobile. Utilisé en combinaison avec toSignalil aide à transformer l’observable de BreakPointObserver. Et en utilisant le observer La méthode nous aide à écouter les changements. Nous pouvons filtrer des points d’arrêt spécifiques au lieu du CSS comme Breakpoints.HandsetPortrait, Breakpoints.TabletPortrait et plus.
Ici, nous créons une nouvelle variable isMobile à utiliser dans le modèle.
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import {Component, inject} from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { map } from 'rxjs';
…
isMobile = toSignal(
this.breakpointObserver
.observe([Breakpoints.HandsetPortrait, Breakpoints.TabletPortrait])
.pipe(
map(result => result.matches)
),
{initialValue: false}
);
Ouvrez l’application.Component.html et mettez-le à jour pour afficher / masquer conditionnellement la barre latérale en fonction du signal.
@if (!isMobile()) {
<div class="sidebar">
<h2>Sidebar</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
}
<div class="main-content" [class.full-width]="isMobile()">
<h1>Main Content Area</h1>
<p>This is the main content area of the page. The sidebar and main content are now aligned using flexbox for a responsive layout. The sidebar will be hidden on mobile devices using Angular CDK's BreakpointObserver.</p>
</div>
Nous pouvons maintenant supprimer toutes les requêtes multimédias connexes de notre CSS. Enregistrer les modifications et Tada !!! Nous avons le même comportement avec moins de code !! Ouais!!! 😊
Résumer
Nous avons appris à déplacer notre CSS hérité vers Flexbox pour créer des sites Web réactifs, en le combinant avec Angular Flex CDK pour réduire les requêtes multimédias CSS.
Il est maintenant temps de commencer à créer des sites Web réactifs en utilisant la disposition Angular CDK!
Code source:
Source link