Sélection de la langue

Gouvernement du Canada / Government of Canada

Recherche

Alternatives pour le déroulement de champs

Trouver des alternatives de styles pour le déroulement de champs.

Police de caractères aux dimensions augmentées

Augmente les dimensions de la police de caractères telle que définit par la mise à jour visuelle de 2019.

En ajoutant la classe .gc-font-2019 à l'élément .wb-fieldflow, vous obtenenz le résultat démontré ci-dessous.

Remarques

  • Si vous utilisez le Déroulement de champs afin d'ajouté du contenu dynamique sur la page à travers AJAX (tel qu'utilisé dans l'exemple ci-dessous) et que vous espérez avoir la police de caractères augmentée sur le contenu injecté, il vous est fortement recommendé d'utliser la technique démontré dans les exemples avancés qui met en vedette la configuration nommé "container" et l'explique plus en détails.
  • Si vous utilisez votre propre élément form et que vous avez un Déroulement de champs à l'intérieur, tel que démontré dans les exemples avancés, vous pouvez d'ailleurs essayer d'ajouter la classe .gc-font-2019 à votre élément form aussi afin de tester la possibilité d'avoir la police de caractères aux dimensions augmentées sur tout le contenu (ou presque) de votre formulaire.

Choisissez du contenu à insérer:

  • Ensemble 3 - Utilise le récipient: $("#ajaxPanel .panel-body")
  • Ensemble 4 - Utilise le récipient: $("#ajaxPanel .panel-body")

id="ajaxPanel" Paneau a des fins d'exemple pratique

(Pour illustrer le comportement de la configuration container)

<div class="wb-fieldflow gc-font-2019">
		<p>Choisissez du contenu à insérer:</p>
		<ul>
			<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-3.html", "container": "#ajaxPanel .panel-body"}'>Ensemble 3 - Utilise le récipient: $("#ajaxPanel .panel-body")</li>
			<li data-wb-fieldflow='{"action": "ajax", "url": "ajax/ajax-4.html", "container": "#ajaxPanel .panel-body"}'>Ensemble 4 - Utilise le récipient: $("#ajaxPanel .panel-body")</li>
		</ul>
	</div>
	<section id="ajaxPanel" class="panel panel-primary mrgn-tp-md">
		<header class="panel-heading">
			<h3 class="panel-title"><code>id="ajaxPanel"</code> Paneau a des fins d'exemple pratique</h3>
		</header>
		<div class="panel-body">
			<p>(Pour illustrer le comportement de la configuration <code>container</code>)</p>
		</div>
	</section>

Contrôles plus grands avec GC Cases à cocher et boutons radio

Exploite le concept GC Cases à cocher et boutons radio afin de livrer des cases à cocher et boutons radio plus gros.

En ajoutant la configuration "gcChckbxrdio":true à votre attribut "data" data-wb-fieldflow, Vous obtiendrez le résultat ci-dessous.

Remarque

Cette configuration génère du texte plus grand par défaut. Vous pouvez tout de même utiliser la classe .gc-font-2019 si vous désirez que les éléments environnants aient une plus grande police de caractères, tel que le bouton de soumission, tel que démontré dans la section Police de caractères aux dimensions augmentées.

Grandes cases à cocher

Choisissez du contenu à insérer:

  • (Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.
  • (Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.
  • (Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.
  • (Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.
  • (Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.
<div class="wb-fieldflow" data-wb-fieldflow='{"renderas":"checkbox","gcChckbxrdio":true}'>
		<p>Choisissez du contenu à insérer:</p>
		<ul>
			<li data-wb-fieldflow="ajax/ajax-1.html">(Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
			<li data-wb-fieldflow="ajax/ajax-2.html">(Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.</li>
			<li data-wb-fieldflow="ajax/ajax-3.html">(Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
			<li data-wb-fieldflow="ajax/ajax-4.html">(Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
			<li data-wb-fieldflow="ajax/ajax-5.html">(Ensemble 5) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> in a ex.</li>
		</ul>
	</div>

Grands boutons radio

Choisissez du contenu à insérer:

  • (Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.
  • (Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.
  • (Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.
  • (Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.
  • (Ensemble 5) Sed eget dui ac nunc mattis consequat in a ex.
<div class="wb-fieldflow" data-wb-fieldflow='{"renderas":"radio","gcChckbxrdio":true}'>
		<p>Choisissez du contenu à insérer:</p>
		<ul>
			<li data-wb-fieldflow="ajax/ajax-1.html">(Ensemble 1) Nunc sed mauris id nisi molestie porta at quis erat.</li>
			<li data-wb-fieldflow="ajax/ajax-2.html">(Ensemble 2) Vestibulum pretium tortor vel facilisis sodales.</li>
			<li data-wb-fieldflow="ajax/ajax-3.html">(Ensemble 3) Nunc sit amet dui ut justo efficitur dapibus.</li>
			<li data-wb-fieldflow="ajax/ajax-4.html">(Ensemble 4) Praesent at purus ut turpis sollicitudin aliquam.</li>
			<li data-wb-fieldflow="ajax/ajax-5.html">(Ensemble 5) <em>Sed eget dui ac <strong>nunc mattis</strong> consequat</em> in a ex.</li>
		</ul>
	</div>

Grandes cases à cocher à l'horizontal

Choisissez du contenu à insérer:

  • Ensemble 1
  • Ensemble 2
  • Ensemble 3
  • Ensemble 4
  • Ensemble 5
<div class="wb-fieldflow" data-wb-fieldflow='{"renderas":"checkbox", "inline":true, "gcChckbxrdio":true}'>
		<p>Choisissez du contenu à insérer:</p>
		<ul>
			<li data-wb-fieldflow="ajax/ajax-1.html">Ensemble 1</li>
			<li data-wb-fieldflow="ajax/ajax-2.html">Ensemble 2</li>
			<li data-wb-fieldflow="ajax/ajax-3.html">Ensemble 3</li>
			<li data-wb-fieldflow="ajax/ajax-4.html">Ensemble 4</li>
			<li data-wb-fieldflow="ajax/ajax-5.html">Ensemble 5</li>
		</ul>
	</div>

Grands boutons radio à l'horizontal

Choisissez du contenu à insérer:

  • Ensemble 1
  • Ensemble 2
  • Ensemble 3
  • Ensemble 4
  • Ensemble 5
<div class="wb-fieldflow" data-wb-fieldflow='{"renderas":"radio", "inline":true, "gcChckbxrdio":true}'>
		<p>Choisissez du contenu à insérer:</p>
		<ul>
			<li data-wb-fieldflow="ajax/ajax-1.html">Ensemble 1</li>
			<li data-wb-fieldflow="ajax/ajax-2.html">Ensemble 2</li>
			<li data-wb-fieldflow="ajax/ajax-3.html">Ensemble 3</li>
			<li data-wb-fieldflow="ajax/ajax-4.html">Ensemble 4</li>
			<li data-wb-fieldflow="ajax/ajax-5.html">Ensemble 5</li>
		</ul>
	</div>

Action query (requête) Utilisation d'une valeur vide

Pour des actions query (requête) individuelles

<div class="wb-frmvld">
	<form action="alternative-en.html" method="get">
		<div class="wb-fieldflow hidden" data-wb-fieldflow='{
			"noForm": true,
			"defaultselectedlabel": false
		}'>
			<p>Choisir une option</p>
			<ul>
				<li data-wb-fieldflow='[
					{ "action": "query", "name": "q1", "value": "" }
				]'>Personalisé: Faites votre sélection...</li>
				<li data-wb-fieldflow='[
					{ "action": "query", "name": "q1", "value": "opt1" }
				]'>Option 1</li>
				<li data-wb-fieldflow='[
					{ "action": "query", "name": "q1", "value": "opt2" }
				]'>Option 2</li>
			</ul>
		</div>
		<button>Soumettre</button>
	</form>
</div>

Lorsque le nouveau défaut de l'action globale est query (requête)

<div class="wb-frmvld">
	<form action="alternative-en.html" method="get">
		<div class="wb-fieldflow hidden" data-wb-fieldflow='{
			"noForm": true,
			"defaultselectedlabel": false,
			"action": "query", "name": "q2", "prop": "value"
		}'>
			<p>Choisir une option</p>
			<ul>
				<li data-wb-fieldflow=''>Personalisé: Faites votre sélection...</li>
				<li data-wb-fieldflow='opt1'>Option 1</li>
				<li data-wb-fieldflow='opt2'>Option 2</li>
			</ul>
		</div>
		<button>Soumettre</button>
	</form>
</div>

Avec plusieurs actions

Cette notation peut améliorer la lisibilité du code comparativement à l'utilisation du paramètre "default" appartenant à l'instance du composant..

L'example suivant est seulement utile afin de vérifier le bon opérabilité de la fonctionalité et il pourrait produire une expérience et du code qui n'est pas entièrement conforme à WCAG niveau AA.

Rouge lorsque l'option par défaut est sélectionné ou vert lorsque qu'une option valide est sélectionné.

<div class="wb-frmvld">
	<form action="http://localhost/" method="post">
		<div class="wb-fieldflow hidden" data-wb-fieldflow='{
			"noForm": true,
			"defaultselectedlabel": false
		}'>
			<p>Choisir une option</p>
			<ul>
				<li data-wb-fieldflow='[
					{ "action": "query", "name": "q3", "value": "" },
					{ "action": "addClass", "source": ".redgreen", "class": "text-danger", "live": true },
					{ "action": "removeClass", "source": ".redgreen", "class": "text-success", "live": true }
				]'>Personalisé: Faites votre sélection....</li>
				<li data-wb-fieldflow='[
					{ "action": "query", "name": "q3", "value": "opt1" },
					{ "action": "addClass", "source": ".redgreen", "class": "text-success", "live": true },
					{ "action": "removeClass", "source": ".redgreen", "class": "text-danger", "live": true }
				]'>Option 1</li>
				<li data-wb-fieldflow='[
					{ "action": "query", "name": "q3", "value": "opt2" },
					{ "action": "addClass", "source": ".redgreen", "class": "text-success", "live": true },
					{ "action": "removeClass", "source": ".redgreen", "class": "text-danger", "live": true }
				]'>Option 2</li>
			</ul>
		</div>
		<p class="redgreen">Rouge lorsque l'option par défaut est sélectionné <strong>ou</strong> vert lorsque qu'une option valide est sélectionné.</p>
		<button>Soumettre</button>
	</form>
</div>

Détails de la page

Date de modification :