Widgets: Boutons de navigation

L'élément personnalisé <devsite-nav-buttons> permet d'actualiser un groupe de boutons la page actuelle avec un paramètre querystring différent.

Démo

Java sample code

Utilisation

Pour l'utiliser, créez un élément <devsite-nav-buttons> avec un attribut name et placer plusieurs éléments button avec différents attributs value ; Pour chaque groupe de boutons, sélectionnez-en un comme bouton par défaut en ajoutant un default. à l'élément.

<devsite-nav-buttons name="language">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

Dans un fichier Markdown (.md), assurez-vous que l'élément personnalisé est encapsulé avec un élément HTML standard, tel que section, div ou p:

<div>
  <devsite-nav-buttons name="language">
    <button value="java" default>Java example</button>
    <button value="python">Python example</button>
    <button value="go">Go example</button>
  </devsite-nav-buttons>
</div>

Vous pouvez ensuite utiliser Avec des tags dynamiques, qui examinent les paramètres de la chaîne de requête pour déterminer le contenu à afficher pour l'utilisateur.

{% dynamic if request.query_string.language == "python" %}
Python sample code
{% dynamic elif request.query_string.language == "go" %}
Go sample code
{% dynamic else %}
Java sample code
{% dynamic endif %}

Association d'encarts à l'aide d'un ID

En règle générale, il est préférable de placer l'élément <devsite-nav-buttons> à proximité de en haut de la page, car en cliquant sur l'un de ses boutons, les utilisateurs sont redirigés vers une nouvelle URL. et actualise la page. Si vous utilisez l'élément au milieu d'une page et/ou que l'emplacement de l'élément sur la page puisse être ajouté aux signets, vous devez spécifiez un id unique sur l'élément, ce qui ajoutera une ancre nommée à la URL et faire défiler la page jusqu'à l'emplacement de l'élément lors du chargement de la page.

<devsite-nav-buttons name="language" id="code-examples">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

Options des paramètres d'URL

Par défaut, lorsqu'un utilisateur clique sur l'un des boutons, la valeur du bouton est enregistrée vers localStorage. La valeur sélectionnée est automatiquement ajoutée à la barre d'adresse en tant que un paramètre d'URL sur d'autres pages comportant des éléments <devsite-nav-buttons> qui utilisent les mêmes champs name et value.

Supprimer le paramètre d'URL du bouton par défaut

Pour ignorer le comportement par défaut et supprimer le paramètre d'URL lorsque l'attribut Clic sur le bouton default. Ajoutez param="reset" à l'élément:

<devsite-nav-buttons name="language" param="reset">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

Toujours afficher un paramètre d'URL pour le bouton par défaut

Lorsqu'un utilisateur visite une page comportant un élément <devsite-nav-buttons> pour le premier l'heure, le bouton default est mis en surbrillance et l'adresse reste inchangée jusqu'à ce que vous cliquiez sur un bouton.

Pour mettre à jour la barre d'adresse avec le paramètre d'URL du bouton default, procédez comme suit : et assurez-vous qu'il y a toujours un paramètre d'URL sur les pages avec <devsite-nav-buttons>, ajoutez param="always" à l'élément:

<devsite-nav-buttons name="language" param="always">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

Style des boutons

Par défaut, les boutons de l'élément <devsite-nav-buttons> ont le mot "chip" du style. Pour augmenter ou réduire l'impact visuel des boutons, vous pouvez ajouter Un attribut type avec la valeur filled ou text, qui appliquera un style à chacun button.

Style de bouton avec type="filled" :

<devsite-nav-buttons name="language" type="filled">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>

Style de bouton avec type="text" :

<devsite-nav-buttons name="language" type="text">
  <button value="java" default>Java example</button>
  <button value="python">Python example</button>
  <button value="go">Go example</button>
</devsite-nav-buttons>