Modification de la taille d'un Canvas avec Barres de Défilement
Dans le développement d'applications, notamment celles utilisant des interfaces visuelles comme un canvas, la gestion de la taille et de la navigation est essentielle pour une expérience utilisateur optimale. Cet article explore comment modifier la taille d'un canvas et intégrer des barres de défilement pour naviguer dans un contenu potentiellement plus grand que l'espace d'affichage disponible.
Comprendre les Écrans Déroulants et les Cartes de Données
Dans une application, il est possible de créer un écran que les utilisateurs peuvent faire défiler pour afficher différents éléments. Lorsque vous ajoutez plusieurs contrôles dans une section, ces contrôles conservent leur position relative au sein de cette section, que l'application soit destinée à un téléphone ou à une tablette. L'écran déroulant comprend généralement une grille fluide avec une carte de données par défaut. Les cartes de données jouent un rôle important en aidant à séparer les blocs de construction sur l'écran.
Pour rendre un écran déroulant avec plusieurs contrôles, il suffit d'ajouter d'autres cartes de données. Un aperçu de l'application peut être obtenu en appuyant sur F5 sur le clavier.
Il est important de noter qu'en raison de la manière dont Power Apps utilise les cartes de données pour créer des sections, les contrôles "Afficher le formulaire" et "Modifier le formulaire" ne peuvent pas y être insérés directement. L'imbrication d'une telle combinaison de contrôles peut potentiellement dégrader les performances de l'application. Il est donc recommandé d'ajouter le formulaire de modification ou d'affichage avec les champs obligatoires en dehors de ces sections, ou d'envisager des approches alternatives pour les applications complexes.
Gestion des Conteneurs pour les Applications Complexes
Pour les applications complexes, une stratégie efficace consiste à ajouter des conteneurs dans un contrôle Conteneur vertical. Cette approche permet d'organiser et de structurer le contenu de manière hiérarchique, facilitant ainsi la gestion des éléments défilants et le maintien des performances.
Barres de Défilement CSS et Personnalisation
En 2020, une grande majorité d'utilisateurs d'Internet naviguaient sur des navigateurs qui prenaient en charge la création de style de barres de défilement via CSS. La spécification CSS pour les barres de défilement partage des points communs avec la spécification -webkit-scrollbar, permettant de contrôler la couleur de la barre de défilement.
Les navigateurs basés sur Blink et WebKit ignoreront les règles qu'ils ne reconnaissent pas et appliqueront les règles -webkit-scrollbar. De même, les navigateurs Firefox ignoreront les règles non reconnues et appliqueront les règles CSS Scrollbars.
Simulation de Barres de Défilement avec JavaScript
Il est également possible de simuler une barre de défilement en cachant la barre de défilement par défaut du navigateur et en utilisant JavaScript pour détecter la hauteur et la position de défilement. Cette méthode offre une flexibilité maximale pour créer des expériences de défilement personnalisées.
Scrollables dans Canva Docs
Les Scrollables dans Canva Docs transforment les documents statiques en expériences interactives en introduisant des animations qui s'activent lorsque l'utilisateur fait défiler le contenu. Cet outil améliore l'engagement en rendant le contenu plus dynamique et visuellement plus attrayant.
Il est important de noter que cet outil est déployé progressivement. Si vous n'y avez pas encore accès, il est conseillé de garder votre application actualisée et de surveiller les mises à jour.
Création d'un Design Scrollable dans Canva
Il existe plusieurs méthodes pour créer un design scrollable dans Canva :
1. À partir de l'onglet Modèles (Page d'accueil)
- Depuis la page d'accueil, sélectionnez l'onglet Modèles.
- Dans la barre de recherche, saisissez "Scrollable Design" et appuyez sur Entrée.
- Choisissez parmi les modèles existants ou créez un design vierge scrollable.
2. À partir de l'éditeur (Actions rapides)
- Ouvrez un document Canva.
- En plus de la page de l'éditeur, sélectionnez Actions rapides ou tapez simplement une barre oblique (/) sur votre clavier.
- Sélectionnez Design défilant.
- Choisissez l'option Créer une nouvelle animation de défilement.
- Faites votre choix parmi les modèles existants ou créez votre propre design.
- Une fois terminé, sélectionnez Enregistrer.
3. À partir de l'onglet Conception dans l'éditeur
- Dans le volet latéral de l'éditeur, accédez à l'onglet Conception.
- Sélectionnez un modèle sous "Docs" comprenant des éléments scrollables.
4. À partir des Paramètres de défilement (pour les bannières)
Actuellement, vous pouvez uniquement activer les transitions par défilement pour les designs de bannières.
- Dans le volet latéral de l'éditeur, accédez à l'onglet Conception.
- Sélectionnez un modèle de bannière.
- Sélectionnez la bannière sur votre design.
- Dans la barre d'outils flottante, sélectionnez Paramètres pour ouvrir les paramètres de défilement.
- Activez la transition par défilement.
Remarque importante : lors de l'importation d'un design, seules les 20 premières pages sont ajoutées. De plus, certains types de fichiers ne sont pas pris en charge. Il est conseillé de consulter la section "Limites" pour obtenir plus d'informations.
CANVA DOC 📝 Le tuto RAPIDE & COMPLET 💻
tags: #scrollbar #modifie #taille #canvas