Navigation latérale repliable
Un espace de gestion avec menu à gauche, contenu à droite et un bouton pour replier le menu.
Type : BERKIOS Studio · Niveau : intermédiaire · Fichier : navigation-laterale-repliable.berkios.json
Ce que vous allez apprendre
- Construire un « cadre » d'application : un menu fixe et une zone de contenu qui change.
- Relier des boutons de menu à des interfaces.
- Replier et déplier la barre latérale.
Avant de commencer
Installer le Studio. Il est utile d'avoir fait Gestion des clients.
Étape 1 : importer l'exemple
Fichier → Importer, puis choisissez navigation-laterale-repliable.berkios.json.
Étape 2 : comprendre la structure
Le projet contient cinq interfaces :
| Interface | Rôle |
|---|---|
| Application principale : navigation | Le cadre : barre latérale + zone de contenu à droite. |
| Tableau de bord : contenu | Section affichée au départ (indicateurs et activité récente). |
| Produits | Section avec un tableau de produits. |
| Ventes | Section avec un tableau de ventes. |
| Paramètres | Section de réglages. |
L'interface principale contient un panneau sombre à gauche (la barre latérale), la marque BERKIOS GESTION, quatre boutons de menu (Tableau de bord, Produits, Ventes, Paramètres), un profil et un grand panneau vide à droite : la zone de contenu.
Étape 3 : les trois réglages de l'interface principale
Sélectionnez l'interface principale et ouvrez ses propriétés. Trois réglages font tout :
| Propriété | Valeur dans l'exemple | Rôle |
|---|---|---|
contentHostWidgetId | le panneau de droite | Le panneau qui accueille les sections. |
contentDefaultInterfaceId | « Tableau de bord : contenu » | La section affichée au démarrage. |
sidebarWidgetId | la barre latérale | Le panneau qui se masque quand on replie le menu. |
Étape 4 : tester dans l'aperçu
- Passez en mode Aperçu.
- Cliquez sur Produits, Ventes, Paramètres : la section change.
- Cliquez sur le bouton ☰ en haut à gauche : la barre latérale se masque et le contenu occupe toute la largeur.
- Cliquez de nouveau pour la rouvrir.
À savoir
Les boutons de menu de cet exemple utilisent l'action Ouvrir une interface (open-interface). Le Studio propose aussi une action dédiée, Afficher dans la zone de contenu (navigate-content), pensée pour ce type de cadre : la barre latérale reste en place et seule la zone de droite change. Si, dans votre version, une section s'ouvre en remplaçant tout l'écran, passez les boutons de menu sur cette action.
À vous de jouer
Ajoutez une cinquième section « Clients » : créez une nouvelle interface, ajoutez un bouton Clients dans le menu, et pointez-le vers cette interface.
Pour aller plus loin
- Exemple suivant : Outil en ligne de commande
- Pages techniques : Code d'interface et navigation, Écrans modulaires
Cette page en Markdown · llms.txt · documentation complète pour les IA