Chronologie

Aperçu

Le composant Timeline Avonni est un outil dynamique et interactif conçu pour afficher des données chronologiques ou des événements de manière organisée et visuellement attrayante. Il est idéal pour présenter des calendriers de projet, des événements historiques ou des données basées sur une séquence sur les sites Salesforce Experience Cloud.

La Timeline Avonni est Prête pour la réactivité

Propriétés

Configuration de base

Nom	Description
Titre	Le titre principal de la timeline.
Style de texte du titre	Personnalisez le style de police du titre pour un accent visuel.
Légende	Une brève description ou un texte supplémentaire pour la timeline.
Style de texte de la légende	Ajustez le style de police de la légende pour compléter le titre.

Éléments visuels et fonctionnels

Nom	Description
Nom de l'icône	Choisissez une icône dans le Salesforce Lightning Design System pour représenter les éléments de la timeline.
Taille de l'icône	Déterminez la taille de l'icône pour une cohérence visuelle.
Orientation	Sélectionnez entre les dispositions 'verticale' et 'horizontale' en fonction du contenu et de l'espace disponible.
Direction triée	Choisissez 'asc' pour un ordre chronologique ascendant ou 'desc' pour descendant.
Grouper par	Organisez les éléments de la timeline par 'semaine', 'mois' ou 'année' pour une navigation et une compréhension facilitées
Format de date des éléments	Formatez l'affichage des dates sur les éléments de la timeline pour plus de clarté et de cohérence
Est joint	Choisissez si les éléments de la timeline sont visuellement reliés par une ligne ou un chemin
Fermé	Activez ou désactivez si la timeline est fermée ou ouverte
Réductible	Permettez aux sections de la timeline d'être réductibles, améliorant l'interaction utilisateur
Consultable	Autorisez les utilisateurs à rechercher dans la timeline des éléments ou événements spécifiques
Afficher la pagination	Mettez en œuvre la pagination pour les timelines comportant un grand nombre d'éléments
Nombre maximal d'éléments visibles	Définissez le nombre maximal d'éléments à afficher avant que la pagination n'intervienne

Interactivité et personnalisation

Nom	Description
Actions d'en-tête	Ajoutez des boutons d'action dans l'en-tête de la timeline pour les commandes et interactions utilisateur.
Actions des éléments	Implémentez des boutons d'action au niveau des éléments pour des fonctionnalités spécifiques.
Attributs des champs	Configurez l'affichage des champs dans les éléments de la timeline, y compris le nombre de colonnes et les variantes de présentation des champs
Options de filtrage	Incluez un mécanisme de filtrage affiché sous forme de popover pour trier ou restreindre les éléments de la timeline
Options du moteur de recherche	Personnalisez la fonctionnalité de recherche avec un texte d'espace réservé et des paramètres de position
Options de pagination	Ajustez l'alignement et personnalisez les étiquettes et icônes pour les contrôles de pagination 'premier', 'dernier' et 'suivant'

Source de données

Nom	Description
Manuel	Saisissez manuellement les éléments de la timeline et leurs détails.
Source de données	Utilisez une requête pour remplir automatiquement la timeline avec des éléments provenant d'une source de données.

Paramètres de style

En-tête

Nom	Description
Couleur d'arrière-plan	Définit la couleur de l'arrière-plan de l'en-tête.
Couleur de la bordure	Détermine la couleur de la bordure de l'en-tête.
Taille de la bordure	Ajuste l'épaisseur de la bordure autour de l'en-tête.
Style de la bordure	Sélectionne le style de la bordure (par ex., solide, en tirets, en pointillés).
Rayon de la bordure	Arrondit les coins de l'en-tête pour un aspect plus doux.
Couleur de la bordure inférieure (Est joint)	Si les éléments de la timeline sont joints, cela définit la couleur de la bordure inférieure.
Taille de la bordure inférieure (Est joint)	Ajuste l'épaisseur de la bordure inférieure lorsque les éléments sont joints.
Style de la bordure inférieure (Est joint)	Choisit le style de la bordure inférieure pour les éléments joints.
Rembourrage (Haut, Droite, Bas, Gauche)	Définit l'espacement interne de l'en-tête.
Marge inférieure	Détermine l'espace sous l'en-tête.

Titre de l'en-tête

Nom	Description
Couleur	Change la couleur du texte du titre.
Taille de la police	Change la couleur du texte du titre.
Épaisseur de la police	Modifie la graisse ou l'épaisseur du texte du titre.
Style de la police	Applique un style (par ex., italique, normal) au texte du titre.

Légende de l'en-tête

Nom	Description
Couleur	Définit la couleur du texte de la légende.
Taille de la police	Ajuste la taille du texte de la légende.
Épaisseur de la police	Modifie la graisse ou l'épaisseur du texte de la légende.
Style de la police	Applique un style au texte de la légende

Avatar de l'en-tête

Nom	Description
Couleur	Définit la couleur d'arrière-plan de l'avatar.
Taille de la police	Change la couleur du contenu de l'avatar (par ex., icône ou image).
Épaisseur de la police	Ajuste la couleur utilitaire pour le contraste ou l'accentuation
Style de la police	Arrondit les coins de l'avatar pour une apparence plus douce.

Boutons de pagination

Nom	Description
Bordure	Définit les propriétés de bordure des boutons de pagination.
Arrière-plan	Change la couleur d'arrière-plan des boutons.
Couleur du texte/de l'icône	Ajuste la couleur du texte ou des icônes à l'intérieur des boutons.
Couleur du bouton actif	Spécifie la couleur du bouton de pagination lorsqu'il est actif ou sélectionné.