> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-language-selector.md). # AX - Sélecteur de langue ## Aperçu **AX - Sélecteur de langue** est un composant Experience Cloud qui affiche un sélecteur de langue sur les pages des sites Experience, permettant aux utilisateurs du portail de basculer entre les langues disponibles. Utilisez-le pour offrir une prise en charge multilingue aux clients ou partenaires internationaux. Le composant affiche toutes les langues actives configurées pour votre site Experience et met à jour le contenu de la page lorsque les utilisateurs sélectionnent une autre langue. Idéal pour les portails clients mondiaux, les sites partenaires internationaux, les centres d'assistance multi-régions ou tout portail destiné à des utilisateurs parlant différentes langues.
🔀 Différences entre le sélecteur de langue standard Salesforce et le sélecteur de langue Avonni Le sélecteur de langue Avonni surpasse le sélecteur de langue standard Salesforce en offrant : 1. **Regroupement des langues :** Organisez les langues par région ou selon d'autres critères pour une expérience conviviale. 2. **Personnalisation visuelle :** Adaptez l'apparence du sélecteur au design de votre site web. 3. **Fonctionnalités avancées :** Bénéficiez de fonctionnalités telles que la personnalisation du nubbin de menu et des déclencheurs de menu flexibles, indisponibles dans le sélecteur standard. Avec le sélecteur de langue Avonni, vous pouvez créer une expérience multilingue à la fois fonctionnelle, visuellement attrayante et parfaitement alignée sur l'identité unique de votre site web.
## Configuration ### **Poser les bases : configurations de base** #### **Libellé** * Personnalisez l'étiquette affichée au-dessus du menu de sélection de langue. * Vous pouvez également activer l'option « Utiliser la langue actuelle comme étiquette » pour afficher dynamiquement la langue actuellement sélectionnée comme étiquette.
#### **Groupes de langues** * Organisez plusieurs langues en colonnes distinctes grâce à la fonctionnalité Groupes de langues. * Assurez-vous que les langues que vous sélectionnez sont actives et disponibles sur votre site.
### **Personnalisation visuelle** #### **Nom et taille de l'icône** Choisissez un symbole représentant la diversité linguistique (un globe, peut-être ?) et ajustez sa taille pour qu'elle corresponde à l'esthétique de votre site. Au lieu d'une icône Lightning Design System, vous pouvez fournir un **Source de l’icône CMS** ou un **URL de l’icône ou expression**. Activez **Utiliser la langue actuelle comme étiquette** pour afficher la langue actuellement sélectionnée comme étiquette du bouton. #### **Variante** Sélectionnez un style visuel (bare, bare-inverse, base, border, border-filled, etc.) qui s'aligne sur l'esthétique de votre site. #### **Alignement du menu** Sélectionnez un style visuel (bare, bare-inverse, base, border, border-filled, etc.) qui s'aligne sur l'esthétique de votre site. ### **Comportement du menu** #### **Déclencheur du menu** Vos visiteurs cliqueront-ils sur un bouton, le survoleront-ils ou le sélectionneront-ils pour afficher les options de langue ? Choisissez l'interaction la plus intuitive pour votre public. #### **Triangle de menu** Cette petite flèche est une touche subtile qui relie le menu au composant, comme un panneau directionnel. #### **Titre du menu** Donnez à votre menu un titre clair (par exemple, « Choisissez votre langue ») pour plus de clarté. ### **Astuces utiles et accessibilité** #### **Infobulle** Lorsque les utilisateurs survolent le composant, fournissez une brève explication ou des instructions via une info-bulle. #### **Masquer la flèche vers le bas** Vous pouvez masquer l'icône de flèche vers le bas généralement associée aux listes déroulantes si vous préférez un aspect plus épuré. #### **Étirement** Cette option permet au composant de s'étendre et de remplir son conteneur, garantissant un aspect soigné. #### **Désactivé** Désactive temporairement la fonctionnalité de sélection de langue lorsque cela est nécessaire. #### **Alignement horizontal** Contrôle l'alignement horizontal du composant dans son conteneur (gauche, centre, droite). Avec le sélecteur de langue Avonni, votre site Experience Cloud devient un lieu d'accueil pour un public mondial. Les visiteurs peuvent choisir leur langue préférée sans effort, garantissant une navigation fluide et agréable dans votre contenu. ## Style {% tabs %} {% tab title="Espacement" %} Contrôle l'espace autour du composant (Haut / Bas / Gauche / Droite). {% endtab %} {% tab title="Arrière-plan" %} * **Couleur / Couleur active / Couleur au survol :** Définissez l'arrière-plan du bouton de déclenchement pour les états par défaut, actif et au survol. {% endtab %} {% tab title="Libellé/Icône" %} * **Couleur / Couleur active / Couleur au survol :** Définissez la couleur du libellé et de l'icône pour chaque état. * **Taille de police / Style de police / Graisse de police / Famille de police :** Contrôlez la typographie du libellé. * **Alignement horizontal :** Alignez le libellé et l'icône. {% endtab %} {% tab title="Bordure" %} * **Couleur / Couleur active / Couleur au survol :** Définissez la couleur de la bordure pour chaque état. * **Taille / Style / Rayon :** Contrôlez la bordure du bouton de déclenchement. {% endtab %} {% tab title="Image" %} * **Couleur de bordure / Taille / Style / Rayon / Ajustement de l'objet :** Stylez une image personnalisée utilisée comme icône de déclenchement. {% endtab %} {% tab title="Menu" %} * **Largeur / Largeur min. / Largeur max. / Hauteur / Hauteur min. / Hauteur max. / Largeur de colonne :** Contrôlez les dimensions du menu déroulant. * **Espacement bloc / Espacement en ligne :** Définissez l'espacement du menu. {% endtab %} {% tab title="Couleur du menu" %} * **Arrière-plan / Bordure :** Définissez les couleurs d'arrière-plan et de bordure du menu. {% endtab %} {% tab title="Titre du menu" %} * **Couleur du texte / Taille de police / Graisse de police / Famille de police / Ombre du texte :** Stylisez le titre du menu. {% endtab %} {% tab title="Libellé du groupe de menu" %} * **Couleur du texte / Taille de police / Graisse de police / Famille de police / Ombre du texte :** Stylisez les libellés des groupes de langues. {% endtab %} {% tab title="Élément de menu" %} * **Couleur d'arrière-plan au survol / Couleur du texte / Couleur du texte au survol :** Définissez les couleurs des éléments de menu. * **Taille de police / Famille de police / Ombre du texte :** Contrôlez la typographie des éléments de menu. {% endtab %} {% endtabs %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-language-selector.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.