AppLayout
Le composant AppLayout vous fournit une structure de page prête à l'emploi avec un en-tête et un pied de page fixes, un tiroir qui glisse dans et hors de l'écran, et une zone de contenu déroulante. Ensemble, ces sections couvrent les besoins de mise en page des tableaux de bord, des panneaux d'administration et de la plupart des interfaces à sections multiples.
Fonctionnalités
Le webforJ App Layout est un composant qui permet de créer des mises en page d'applications communes.
- Facile à utiliser et à personnaliser
- Design réactif
- Options de mise en page multiples
- Fonctionne avec le mode sombre de webforJ
Il fournit un en-tête, un pied de page, un tiroir et une section de contenu, le tout intégré dans un composant réactif qui peut être facilement personnalisé pour construire rapidement des mises en page d'applications communes comme un tableau de bord. L'en-tête et le pied de page sont fixes, le tiroir glisse dans et hors de la fenêtre d'affichage, et le contenu est déroulant.
Chaque partie de la mise en page est un Div, qui peut contenir n'importe quel contrôle webforJ valide. Pour de meilleurs résultats, l'application doit inclure une balise meta viewport qui contient viewport-fit=cover. La balise meta permet à la fenêtre d'affichage d'être redimensionnée pour remplir l'affichage de l'appareil.
@AppMeta(name = "viewport", content = "width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no")
Aperçu
L'exemple de code suivant aboutira à une application avec une barre latérale rétractable qui contient un logo et des onglets pour diverses options de contenu ainsi qu'un en-tête. La démo utilise le composant web dwc-icon-button pour créer un bouton de basculement du tiroir. Le bouton a l'attribut data-drawer-toggle qui indique à DwcAppLayout d'écouter les événements de clic provenant de ce composant pour basculer l'état du tiroir.
Afficher le code
- Java
- CSS
Barre de navigation pleine largeur
Par défaut, l'AppLayout rend l'en-tête et le pied de page en mode hors écran. Le mode hors écran signifie que la position de l'en-tête et du pied de page sera décalée pour s'adapter à côté du tiroir ouvert. Désactiver ce mode entraînera l'occupation de l'espace disponible par l'en-tête et le pied de page et le décalage de la position haute et basse du tiroir pour s'adapter à l'en-tête et au pied de page.
AppLayout myApp = new AppLayout();
myApp.setHeaderOffscreen(false);
myApp.setFooterOffscreen(false);
Afficher le code
- Java
- CSS
Barres d'outils multiples
La barre de navigation n'a pas de limite au nombre de barres d'outils que vous pouvez ajouter. Une Toolbar est un composant conteneur horizontal qui contient une série de boutons d'action, d'icônes ou d'autres contrôles. Pour ajouter une barre d'outils supplémentaire, il suffit d'utiliser la méthode addToHeader() pour ajouter un autre composant Toolbar.
La démo suivante montre comment utiliser deux barres d'outils. La première contient le bouton de basculement du tiroir et le titre de l'application. La seconde barre d'outils contient un menu de navigation secondaire.
Afficher le code
- Java
- CSS
Barres d'outils collantes
Une barre d'outils collante est une barre d'outils qui reste visible en haut de la page lorsque l'utilisateur fait défiler vers le bas, mais la hauteur de la barre de navigation est réduite pour libérer plus d'espace pour le contenu de la page. Ce type de barre d'outils contient généralement un menu de navigation fixe qui est pertinent pour la page actuelle.
Il est possible de créer des barres d'outils collantes en utilisant la propriété CSS personnalisée --dwc-app-layout-header-collapse-height et l'option AppLayout.setHeaderReveal().
Lorsque AppLayout.setHeaderReveal(true) est appelé, l'en-tête sera visible au premier rendu, puis masqué lorsque l'utilisateur commence à défiler vers le bas. Une fois que l'utilisateur commence à défiler vers le haut à nouveau, l'en-tête sera révélé.
Avec l'aide de la propriété CSS personnalisée --dwc-app-layout-header-collapse-height, il est possible de contrôler combien de la barre de navigation supérieure sera cachée.
Afficher le code
- Java
- CSS
Mise en page de navigation mobile
La barre de navigation inférieure peut être utilisée pour fournir une version différente de la navigation en bas de l'application. Ce type de navigation est particulièrement populaire dans les applications mobiles.
Remarquez comment le tiroir est masqué dans la démo suivante. Le widget AppLayout prend en charge trois positions de tiroir : DrawerPlacement.LEFT, DrawerPlacement.RIGHT, et DrawerPlacement.HIDDEN.
Tout comme AppLayout.setHeaderReveal(), AppLayout.setFooterReveal() est pris en charge. Lorsque AppLayout.setFooterReveal(true) est appelé, le pied de page sera visible au premier rendu puis masqué lorsque l'utilisateur commence à défiler vers le haut. Une fois que l'utilisateur commence à défiler vers le bas à nouveau, le pied de page sera révélé.
Par défaut, lorsque la largeur de l'écran est de 800px ou moins, le tiroir sera commuté en mode popover. C'est ce que l'on appelle le point de rupture. Le mode popover signifie que le tiroir apparaîtra au-dessus de la zone de contenu avec un superposé. Il est possible de configurer le point de rupture en utilisant la méthode setDrawerBreakpoint() et le point de rupture doit être une requête média valide.
Afficher le code
- Java
- CSS
Utilitaires de tiroir
Les utilitaires de tiroir de l'AppLayout sont conçus pour une navigation intégrée et des menus contextuels au sein de la mise en page principale de l'application, tandis que les composants Drawer autonomes offrent des panneaux coulissants flexibles et indépendants qui peuvent être utilisés n'importe où dans votre application pour du contenu supplémentaire, des filtres ou des notifications. Cette section se concentre sur les fonctionnalités intégrées du tiroir et les utilitaires fournis par AppLayout.
Point de rupture du tiroir
Par défaut, lorsque la largeur de l'écran est de 800px ou moins, le tiroir sera commuté en mode popover. C'est ce que l'on appelle le point de rupture. Le mode popover signifie que le tiroir apparaîtra au-dessus de la zone de contenu avec un superposé. Il est possible de configurer le point de rupture en utilisant la méthode setDrawerBreakpoint() et le point de rupture doit être une requête média valide.
Par exemple, dans l'exemple suivant, le point de rupture du tiroir est configuré pour être de 500px ou moins.
AppLayout demo = new AppLayout();
demo.setDrawerBreakpoint("(max-width:500px)");
Titre du tiroir
Le composant AppLayout fournit une méthode addToDrawerTitle() pour définir un titre personnalisé affiché dans l'en-tête du tiroir.
layout.addToDrawerTitle(new Div("Menu"));
Actions de tiroir
Le composant AppLayout vous permet de placer des composants personnalisés tels que des boutons ou des icônes dans la zone d'actions de l'en-tête du tiroir à l'aide de la méthode addToDrawerHeaderActions().
layout.addToDrawerHeaderActions(
new IconButton(TablerIcon.create("bell")),
);
Il est possible de passer plusieurs composants en arguments :
layout.addToDrawerHeaderActions(
new IconButton(TablerIcon.create("bell")),
new Button("Profil")
);
Les actions de tiroir apparaissent dans la section alignée à droite de l'en-tête du tiroir.
Afficher le code
- Java
- CSS
AppDrawerToggle 24.12
Le composant AppDrawerToggle est une classe webforJ côté serveur qui représente un bouton utilisé pour basculer la visibilité d'un tiroir de navigation dans un AppLayout. Il correspond à l'élément client <dwc-app-drawer-toggle> et est stylé par défaut pour se comporter comme une icône de menu hamburger traditionnelle, ce comportement peut être personnalisé.
Aperçu
L'AppDrawerToggle étend IconButton et utilise l'icône "menu-2" du jeu d'icônes Tabler par défaut. Il applique automatiquement l'attribut data-drawer-toggle pour s'intégrer au comportement du tiroir côté client.
// Aucune inscription d'événement requise :
AppLayout layout = new AppLayout();
layout.addToHeader(new AppDrawerToggle());
// Le commutateur de tiroir fonctionnera dès le départ—aucun écouteur d'événements manuel nécessaire.