Carte

Aperçu

L'Avonni Carte est un bloc de construction ou un cadre flexible pour votre contenu. Son objectif principal est de contenir d'autres composants, en fournissant une délimitation visuelle claire et un en-tête et pied de page dédiés.

Principales caractéristiques

• Conteneur de contenu : Le corps principal de la Carte est un emplacement où vous pouvez placer n'importe quel autre composant Avonni (ou plusieurs composants).

• En-tête et pied de page intégrés : Comprend des zones dédiées pour un titre, une icône, des actions et le contenu du pied de page.

• Organisation de la mise en page : Aide à structurer le contenu de votre page en sections claires et logiques.

• Attractivité visuelle : Présente les informations de manière organisée, moderne et facilement assimilable.

• Intégration des médias : Vous permet de placer une image en arrière-plan ou à côté de votre contenu.

Cas d'utilisation

• Widgets de tableau de bord : Présentation de mesures clés, graphiques ou visualisations de données de manière organisée sur une page d'accueil ou d'application.

• Résumés de profils : Affichage des informations clés d'un client ou d'un profil utilisateur, telles qu'un nom, une photo et des liens rapides.

• Cartes produits : Mise en valeur des détails produits, images et prix dans une liste ou une grille.

• Organisation des formulaires : Regroupement des champs de saisie liés au sein d'un formulaire.

• Affichage d'enregistrements individuels dans une vue de type galerie.

Ajouter le composant Carte

Glisser-déposer : Depuis la bibliothèque de composants (panneau gauche), trouvez le composant "Carte" et faites-le glisser sur votre canevas.

Configuration

Sélectionnez le composant Carte sur le canevas pour accéder à ses propriétés dans le panneau Propriétés.

Configuration de l'en-tête

L'en-tête de la Carte offre un espace pour un titre et des éléments interactifs.

• Titre : (Texte) Saisissez un titre clair et concis qui apparaît en évidence en haut de la Carte.

• Nom de l'icône : (Texte, facultatif) Ajoutez une icône à côté du titre pour renforcer le contexte visuel (par ex., standard:account).

• Emplacement Actions : L'en-tête inclut un emplacement d'actions (généralement en haut à droite). Faites glisser des composants, tels que Bouton ou Menu Bouton, ici pour fournir aux utilisateurs des actions liées au contenu de la carte.

Astuce pro

Supprimer le texte du titre du composant carte révélera un emplacement pour ajouter du contenu personnalisé.

Emplacements Contenu & Pied de page (Le pouvoir des emplacements)

Ce qui rend vraiment la Carte puissante, c'est sa capacité à contenir d'autres composants.

• Emplacement de contenu : Le corps principal de la Carte est un emplacement flexible. Vous pouvez faire glisser n'importe quel un autre composant Avonni ici – depuis de simples composants Texte et Mesure jusqu'à des Tables de données complexes, des graphiques ou même un autre composant dynamique.

• Emplacement Pied de page : La Carte inclut également un emplacement de pied de page . Cette zone est idéale pour ajouter des liens d'action (comme "Afficher tout") ou des informations récapitulatives.

Médias & Apparence

Vous pouvez rendre votre Carte plus attrayante visuellement en incluant une image.

• Image média : Fournissez une URL pour une image que vous souhaitez associer à la carte.

• Position du média : Choisissez comment l'image est affichée :

  • Gauche, Haut, Droite, Bas: Place l'image à côté de la zone de contenu principale.

  • Arrière-plan: Utilise l'image en tant qu'arrière-plan pour l'ensemble de la carte.

  • Superposition: Superpose l'image au-dessus du contenu de la carte.

Comportement & Visibilité

• Visible : (Booléen) Contrôle si l'ensemble du composant Carte est visible sur la page. Vous pouvez lier cela à une Variable ou une Formule pour une logique d'affichage/masquage dynamique.

Exemple : Créer un widget « Mesure clé »

1. Ajouter une Carte : Faites glisser un composant Carte sur le canevas.

2. Configurer l'en-tête :

   • Min/Max : Titre sur "Performance des ventes trimestrielles".

   • Min/Max : Nom de l'icône sur standard:dashboard.

   • Faites glisser un Menu Bouton dans l' emplacement d'actions emplacement avec des options telles que "Actualiser" et "Exporter".

3. Ajouter du contenu :

   • Faites glisser un Composant Metric dans le emplacement de contenu principal

   • Faites glisser un et configurez-le pour afficher le chiffre d'affaires total. Composant dans le Graphique

4. sous le composant Metric (toujours à l'intérieur de l'

   • Faites glisser un Texte emplacement) pour afficher une courbe de tendance des ventes. emplacement de pied de page Ajouter un pied de page : propriété Composant

Résultat : dans l'

Considérations clés

• emplacement. Réglez son pour afficher un lien comme "Afficher le rapport complet". à l'intérieur Vous avez rapidement assemblé un widget de tableau de bord autonome et organisé avec un titre clair, des actions et plusieurs composants à l'intérieur.

• Disposition : En tant que conteneur : Colonnes N'oubliez pas que le rôle principal de la Carte est d'organiser et de fournir un cadre visuel. Sa puissance se réalise par les composants que vous placez

En résumé

dans ses emplacements.