Sélection de la langue

Recherche

Cases à cocher et boutons radio - fonctionnalité provisoire

Fonctionalité instable

À être utilisé à vos propre risque. Toute les fonctionalité décris ci-dessous peut être retiré dans n'importe lequel version mineur/majeur et l'ensemble de ces fonctionalité sont exclus de l'API publique.

La documentation et/ou les examples pratique pourait être incomplete ou être non disponible.

Voir l'ensemble des fonctionalités provisoires.

Statut
Provisiore
Type
Conception de Canada.ca
Dernière revue
2020-07-31
Est conforme à
Spécifications du contenu et de l'architecture de l'information 2.1
Orientation
Cases à cocher et boutons radio - Configuration de conception de Canada.ca
Nom technique
  • gc-chckbxrdio

Exemple pratique

Cases à cocher et boutons radio (provisoire v1.0)

Grandes cases à cocher avec étiquettes explicites

Choisissez vos condiments :

Grandes cases à cocher désactivé avec étiquettes explicites

Choisissez vos condiments :

Tickbox - élément unique avec étiquette explicite dans un formulaire horizontal

Tickbox - éléments uniques avec étiquette explicite dans un

Options
Options

Utilisez les options ci-dessous pour modifier vos ...

Pour
Titre Date de publication Ministère Type de nouvelles Résumé
Document d’information : Dix-sept projets d'infrastructure prévus ... 2016-07-26 14:07:00 Infrastructure Canada Documents d’information The governments of Canada and ...
Dix-sept projets d'infrastructure prévus ... 2016-07-26 14:07:00 Infrastructure Canada Communiqués de presse Providing community residents ...

Grands boutons radio avec étiquettes explicites

Quel est votre animal favori? :

Grands boutons radio avec étiquettes explicites dans un formulaire horizontal

Veuillez choisir une option :

Évaluation et rapport

Il n'y a pas d'évaluation et de rapport disponibles pour ce composant.

API (Version 1.0)

Classe CSS Gabarit Rendu visuel Schema
Version 1.0 Version 1.0 Version 1.0 s.o.

Classe CSS (v1.0)

gc-chckbxrdio
Conposant : Cases à cocher et boutons radio - fonctionnalité provisiore
Notes sur les versions
Version 1.0 (v8.0)
  • Crée : .gc-chckbxrdio

Gabarit (v1.0)

Notes:

.gc-chckbxrdio

Modèle avec trois cases à cocher
<fieldset class="provisional gc-chckbxrdio chkbxrdio-grp">
	<legend>[[comp:Chckbxrdio dct:title]]:</legend>
	<ul class="list-unstyled lst-spcd-2">
		<li class="checkbox">
			<input type="checkbox" id="[[comp:ChckbxrdioItem html:input-id]]">
			<label for="[[comp:ChckbxrdioItem html:input-id]]">[[comp:ChckbxrdioItem in (comp:Chckbxrdio comp:chckbxsrdios )]]</label>
		</li>
		<li class="checkbox">
			<input type="checkbox" id="[[comp:ChckbxrdioItem html:input-id]]">
			<label for="[[comp:ChckbxrdioItem html:input-id]]">[[comp:ChckbxrdioItem in (comp:Chckbxrdio comp:chckbxsrdios )]]</label>
		</li>
		<li class="checkbox">
			<input type="checkbox" id="[[comp:ChckbxrdioItem html:input-id]]">
			<label for="[[comp:ChckbxrdioItem html:input-id]]">[[comp:ChckbxrdioItem in (comp:Chckbxrdio comp:chckbxsrdios )]]</label>
		</li>
	</ul>
</fieldset>

Variation de la fonctionnalité: .checkbox.gc-chckbxrdio

<form class="form-inline" method="get" action="#">
	<div class="form-group">
		<label class="wb-inv" for="exampleInputEmail2">Email address</label>
		<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email" />
	</div>
	<div class="form-group">
		<label class="wb-inv" for="exampleInputPassword2">Password</label>
		<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" />
	</div>
	<div class="checkbox provisional gc-chckbxrdio">
		<input id="[[comp:ChckbxrdioItem html:input-id]]" type="checkbox"/>
		<label for="[[comp:ChckbxrdioItem html:input-id]]">[[comp:ChckbxrdioItem in (comp:Chckbxrdio comp:chckbxsrdios )]]</label>
	</div>
	<button type="submit" class="btn btn-default">Sign in</button>
</form>

Rendu visuel (v1.0)

Notes sur les versions
Version 1.0
  • Rendu original
Signaler un problème sur cette page
Veuillez cocher toutes les réponses pertinentes :

Merci de votre aide!

Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît contactez-nous.

Date de modification :