1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
|
---
title: Bouton
slug: Web/Apps/Design/Building_Blocks/Buton
translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Button
---
<p><span id="result_box" lang="fr"><span class="hps">Effectue</span> <span class="hps">une action</span> <span class="hps">quand touché</span> <span class="hps">par l'utilisateur.</span> <span class="hps">Ce sont des objets</span> <span class="hps">de l'interface utilisateur</span> <span class="hps">hautements</span> <span class="hps">flexibles</span> <span class="hps">qui ont une</span> <span class="hps">grande variété de styles</span><span>.</span> <span class="hps">Consultez le guide</span> <span class="hps">de codage</span> pour <span class="hps">la façon de</span> <span class="hps">mettre en œuvre des</span> <span class="hps">boutons</span> <span class="hps">qui ressemblent à</span> <span class="hps">ceux décrits ici.</span></span></p>
<h2 id="Caractéristiques">Caractéristiques</h2>
<ul>
<li><span id="result_box" lang="fr"><span class="hps">Les boutons ont</span> <span class="hps">deux composantes :</span> <span class="hps">une cible visuelle</span> <span class="hps">et une cible</span> <span class="hps">de</span> <span class="hps">toucher</span><span>.</span> <span class="hps">La cible</span> <span class="hps">de toucher</span> <span class="hps">est toujours plus grande</span><span>,</span> <span class="hps">afin de réduire les</span> <span class="hps">erreurs de ciblage</span> <span class="hps">en rendant</span> <span class="hps">la touche</span> <span class="hps">plus facile</span> <span class="hps">à toucher</span><span>.</span></span></li>
<li>Les boutons ont deux états : normal et pressé.</li>
<li>Ils peuvent aussi être <strong>désactivés</strong>, ce qui signifie qu'ils sont inutilisables, et sont seulement affichés pour indiquer qu'ils sont désactivés.</li>
</ul>
<p>Il y a différents types de boutons :</p>
<dl>
<dt>
Boutons d'action</dt>
<dd>
<span id="result_box" lang="fr"><span class="hps">Utilisé</span>s <span class="hps">lorsqu'il n'y a que</span> <span class="hps">quelques</span> <span class="hps">actions</span> <span class="hps">et qu'une liste</span> <span class="hps">n'est pas nécessaire.</span> <span class="hps">Le</span> <span class="hps">bouton d'action</span> <span class="hps">principal</span> <span class="hps">utilise une</span> <span class="hps">couleur</span> <span class="hps">spéciale pour indiquer</span> <span class="hps">que c'est la</span> <span class="hps">première option</span><span>.</span></span></dd>
<dt>
Boutons de listes</dt>
<dd>
<span id="result_box" lang="fr"><span class="hps">Utilisés</span> <span class="hps">lors de l'affichage</span> <span class="hps">d'une</span> <span class="hps">liste d'actions</span><span>,</span> <span class="hps">ou</span> <span class="hps">pour déclencher l'affichage</span> <span class="hps">d'un sélecteur de</span> <span class="hps">valeur</span><span>.</span></span></dd>
<dt>
Boutons de champ de saisie</dt>
<dd>
<span id="result_box" lang="fr"><span class="hps">Utilisés pour</span> <span class="hps">effectuer des actions</span> <span class="hps">avec</span> <span class="hps">les champs de saisie</span><span>.</span></span></dd>
<dt>
Boutons spéciaux/personnalisés</dt>
<dd>
<span id="result_box" lang="fr"><span class="hps">Utilisés pour fournir des</span> <span class="hps">actions</span> <span class="hps">spécifiques, comme</span> <span class="hps">l'enregistrement,</span> <span class="short_text" id="result_box" lang="fr"><span class="hps">la numérotation</span></span><span>, etc</span><span>.</span></span></dd>
</dl>
<h2 id="Captures_d'écran">Captures d'écran</h2>
<p><span id="result_box" lang="fr"><span class="hps">Voici quelques</span> <span class="hps">exemples visuels de</span> <span class="hps">ce à quoi les boutons</span> <span class="hps">devraient ressembler</span><span>.</span> <span class="hps">N'oubliez pas que</span> <span class="hps">vous</span> <span class="hps">pouvez utiliser</span> <span class="hps">les feuilles de style</span> <span class="hps">et</span> <span class="hps">des ressources d'images</span> <span class="hps">fournies dans</span> <span class="hps">le guide</span> <span class="hps">de codage</span> <span class="hps">pour les implémenter</span><span class="hps">.</span></span></p>
<h3 id="Boutons_d'action">Boutons d'action</h3>
<p><span id="result_box" lang="fr"><span class="hps">Utilisé</span>s <span class="hps">lorsqu'il n'y a que</span> <span class="hps">quelques</span> <span class="hps">actions</span> <span class="hps">et qu'une liste</span> <span class="hps">n'est pas nécessaire.</span> <span class="hps">Le</span> <span class="hps">bouton d'action</span> <span class="hps">principal</span> <span class="hps">utilise une</span> <span class="hps">couleur</span> <span class="hps">spéciale pour indiquer</span> <span class="hps">que c'est la</span> <span class="hps">première option</span><span>.</span></span></p>
<table class="standard-table">
<thead>
<tr>
<th scope="row"> </th>
<th scope="col"> Première action</th>
<th scope="col">Seconde action</th>
<th scope="col">Supprimer</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Normal</th>
<td><img alt="" src="https://mdn.mozillademos.org/files/4693/btn-main-normal.jpg" style="width: 140px; height: 40px;"></td>
<td><img alt="" src="https://mdn.mozillademos.org/files/4699/btn-secondary-normal.jpg" style="width: 140px; height: 40px;"></td>
<td><img alt="" src="https://mdn.mozillademos.org/files/4687/btn-delete-normal.jpg" style="width: 140px; height: 40px;"></td>
</tr>
<tr>
<th scope="row">Pressé</th>
<td><img alt="" src="https://mdn.mozillademos.org/files/4691/btn-main-lit.jpg" style="width: 140px; height: 40px;"></td>
<td><img alt="" src="https://mdn.mozillademos.org/files/4697/btn-secondary-lit.jpg" style="width: 140px; height: 40px;"></td>
<td><img alt="" src="https://mdn.mozillademos.org/files/4685/btn-delete-lit.jpg" style="width: 140px; height: 40px;"></td>
</tr>
<tr>
<th scope="row">Désactivé</th>
<td><img alt="" src="https://mdn.mozillademos.org/files/4689/btn-main-disabled.jpg" style="width: 140px; height: 40px;"></td>
<td><img alt="" src="https://mdn.mozillademos.org/files/4695/btn-secondary-disabled.jpg" style="width: 140px; height: 40px;"></td>
<td><img alt="" src="https://mdn.mozillademos.org/files/4683/btn-delete-disabled.jpg" style="width: 140px; height: 40px;"></td>
</tr>
</tbody>
</table>
<p>Sur un fond sombre, les boutons d'action ont une apparence spéciale, comme ci-dessous.</p>
<table class="standard-table">
<thead>
<tr>
<th scope="row"> </th>
<th scope="col">Première action</th>
<th scope="col">Seconde action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Désactivé</th>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4701/btn-primary-disabled-dark.jpg" style="width: 140px; height: 40px;"></td>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4703/btn-secondary-disabled-dark.jpg" style="width: 140px; height: 40px;"></td>
</tr>
</tbody>
</table>
<h3 id="Boutons_de_liste">Boutons de liste</h3>
<p><span id="result_box" lang="fr"><span class="hps">Utilisés</span> <span class="hps">lors de l'affichage</span> <span class="hps">d'une</span> <span class="hps">liste d'actions</span><span>,</span> <span class="hps">ou</span> <span class="hps">pour déclencher l'affichage</span> <span class="hps">d'un sélecteur de</span> <span class="hps">valeur</span><span>.</span></span></p>
<h4 id="Déclencheurs">Déclencheurs</h4>
<table class="standard-table">
<thead>
<tr>
<th scope="row"> </th>
<th scope="col"><span class="short_text" id="result_box" lang="fr"><span class="hps">Déclencher une action</span> <span class="hps">dans la vue actuelle</span></span></th>
<th scope="col"><span class="short_text" id="result_box" lang="fr"><span class="hps">Déclencher une action</span> <span class="hps">dans une nouvelle vue </span></span></th>
<th scope="col"><span class="short_text" id="result_box" lang="fr"><span class="hps">Afficher</span> <span class="hps">un sélecteur de</span> <span class="hps">valeur</span></span></th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Normal</th>
<td><img alt="" src="https://mdn.mozillademos.org/files/4725/btn-trigger-current-normal.png" style="width: 291px; height: 40px;"></td>
<td><img alt="" src="https://mdn.mozillademos.org/files/4731/btn-trigger-new-normal.png" style="width: 290px; height: 40px;"></td>
<td><img alt="" src="https://mdn.mozillademos.org/files/4743/btn-trigger-selector-normal.png" style="width: 291px; height: 40px;"></td>
</tr>
<tr>
<th scope="row">Pressé</th>
<td><img alt="" src="https://mdn.mozillademos.org/files/4727/btn-trigger-current-pressed.png" style="width: 291px; height: 40px;"></td>
<td><img alt="" src="https://mdn.mozillademos.org/files/4733/btn-trigger-new-pressed.png" style="width: 289px; height: 39px;"></td>
<td><img alt="" src="https://mdn.mozillademos.org/files/4745/btn-trigger-selector-pressed.png" style="width: 291px; height: 40px;"></td>
</tr>
<tr>
<th scope="row">Désactivé</th>
<td><img alt="" src="https://mdn.mozillademos.org/files/4723/btn-trigger-current-disabled.png" style="width: 290px; height: 40px;"></td>
<td><img alt="" src="https://mdn.mozillademos.org/files/4729/btn-trigger-new-disabled.png" style="width: 290px; height: 40px;"></td>
<td><img alt="" src="https://mdn.mozillademos.org/files/4741/btn-trigger-selector-disabled.png" style="width: 291px; height: 40px;"></td>
</tr>
</tbody>
</table>
<h4 id="Sélecteur_de_valeur">Sélecteur de valeur</h4>
<p><span id="result_box" lang="fr"><span class="hps">Une fois</span> <span class="hps">que le sélecteur de</span> <span class="hps">valeur</span> <span class="hps">a été ouvert,</span> <span class="hps">vous</span> <span class="hps">aurez besoin d'au</span> <span class="hps">moins un bouton</span> <span class="hps">sur le panneau</span> <span class="hps">de sélection de</span> <span class="hps">valeur</span> <span class="hps">pour annuler </span><span class="hps">ledit sélecteur de</span> <span class="hps">valeur</span><span>.</span> <span class="hps">Ces</span> <span class="hps">boutons doivent</span> <span class="hps">ressembler à</span> <span class="hps">ce qui suit:</span></span></p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Normal</th>
<th scope="col">Pressé</th>
<th scope="col">Désactivé</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4755/btn-selector-normal.png" style="width: 269px; height: 39px;"></td>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4757/btn-selector-pressed.png" style="width: 269px; height: 39px;"></td>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4753/btn-selector-disabled.png" style="width: 269px; height: 39px;"></td>
</tr>
</tbody>
</table>
<h3 id="Boutons_de_champ_de_saisie">Boutons de champ de saisie</h3>
<p><span id="result_box" lang="fr"><span class="hps">Les boutons de champ</span> <span class="hps">de saisie</span> <span class="hps">sont des boutons</span> <span class="hps">associés à</span> <span class="hps">un champ de saisie</span><span>,</span> <span class="hps">qui, lorsqu'il est</span> <span class="hps">pressé,</span> <span class="hps">effectuent une action</span> <span class="hps">liée à ce</span> <span class="hps">champ de saisie.</span></span></p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Normal</th>
<th scope="col">Pressé</th>
<th scope="col">Désactivé</th>
</tr>
</thead>
<tbody>
<tr>
<td><img alt="" src="https://mdn.mozillademos.org/files/4761/input-field-normal.png" style="width: 320px; height: 40px;"></td>
<td><img alt="" src="https://mdn.mozillademos.org/files/4763/input-field-pressed.png" style="width: 320px; height: 40px;"></td>
<td><img alt="" src="https://mdn.mozillademos.org/files/4759/input-field-disabled.png" style="width: 320px; height: 40px;"></td>
</tr>
</tbody>
</table>
<h3 id="Boutons_spéciaux">Boutons spéciaux</h3>
<p><span id="result_box" lang="fr"><span class="hps">Les</span> <span class="hps">boutons spéciaux</span> <span class="hps">sont des boutons</span> <span class="hps">de style visuels avec des icônes,</span><span class="hps"> utilisés</span> <span class="hps">à des fins</span> <span class="hps">spéciales, telles que</span> <span class="hps">l'exploitation</span> <span class="hps">de la</span> <span class="hps atn">caméra de l'</span><span>appareil</span><span>,</span> <span class="hps">répondre et</span> <span class="hps">raccrocher le</span> <span class="hps">téléphone</span><span>,</span> <span class="hps">et l'activation de</span> <span class="hps">la</span> <span class="hps">numérotation</span> <span class="hps">au clavier</span><span>.</span> <span class="hps">Vous pouvez</span> <span class="hps">bien sûr</span> <span class="hps">trouver</span> <span class="hps">d'autres utilisations pour</span> <span class="hps">ce style de</span> <span class="hps">bouton.</span></span></p>
<h4 id="Boutons_photo">Boutons photo</h4>
<p><span id="result_box" lang="fr"><span class="hps">Ces</span> butons<span class="hps"> n'ont pas</span><span class="hps"> d'état désactivé</span><span>, vous</span> <span class="hps">n'avez tout simplement</span> <span class="hps">pas</span> <span class="hps">besoin de les afficher si la prise</span><span class="hps"> de photos</span> <span class="hps">n'est pas disponible.</span></span></p>
<table class="standard-table">
<thead>
<tr>
<th scope="row"> </th>
<th scope="col">Enregistrement vidéo</th>
<th scope="col">Arrêter l'enregistrement vidéo</th>
<th scope="col">Prendre photo</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Normal</th>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4771/video-record-normal.png" style="width: 100px; height: 45px;"></td>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4775/video-stop-normal.png" style="width: 100px; height: 45px;"></td>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4767/camera-normal.png" style="width: 100px; height: 45px;"></td>
</tr>
<tr>
<th scope="row">Pressé</th>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4773/video-record-pressed.png" style="width: 100px; height: 45px;"></td>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4777/video-stop-pressed.png" style="width: 100px; height: 45px;"></td>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4769/camera-pressed.png" style="width: 100px; height: 45px;"></td>
</tr>
</tbody>
</table>
<h4 id="Boutons_téléphone">Boutons téléphone</h4>
<table class="standard-table">
<tbody>
<tr>
<th scope="row"> </th>
<th scope="col">Répondre</th>
<th scope="col">Raccrocher</th>
<th scope="col">Masquer le clavier</th>
</tr>
<tr>
<th scope="row">Normal</th>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4781/phone-answer-normal.png" style="width: 130px; height: 40px;"></td>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4787/phone-hangup-normal.png" style="width: 130px; height: 40px;"></td>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4793/hide-dialer-normal.png" style="width: 130px; height: 40px;"></td>
</tr>
<tr>
<th scope="row">Pressé</th>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4783/phone-answer-pressed.png" style="width: 130px; height: 40px;"></td>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4789/phone-hangup-pressed.png" style="width: 130px; height: 40px;"></td>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4795/hide-dialer-pressed.png" style="width: 130px; height: 40px;"></td>
</tr>
<tr>
<th scope="row">Désactivé</th>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4779/phone-answer-disabled.png" style="width: 130px; height: 40px;"></td>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4785/phone-hangup-disabled.png" style="width: 130px; height: 40px;"></td>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4791/hide-dialer-disabled.png" style="width: 130px; height: 40px;"></td>
</tr>
</tbody>
</table>
<h4 id="Boutons_personnalisés">Boutons personnalisés</h4>
<p><span id="result_box" lang="fr"><span class="hps">Voici des exemples boutons personnalisés</span><span>, ici</span> <span class="hps">pour ajouter</span> <span class="hps">un contact.</span></span></p>
<table class="standard-table">
<tbody>
<tr>
<th scope="row">Normal</th>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4799/generic-normal.png" style="width: 90px; height: 40px;"></td>
</tr>
<tr>
<th scope="row">Pressé</th>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4801/generic-pressed.png" style="width: 90px; height: 40px;"></td>
</tr>
<tr>
<th scope="row">Désactivé</th>
<td style="background-color: black;"><img alt="" src="https://mdn.mozillademos.org/files/4797/generic-disabled.png" style="width: 90px; height: 40px;"></td>
</tr>
</tbody>
</table>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/en-US/docs/Mozilla/Firefox_OS/UX" title="/en-US/docs/Mozilla/Firefox_OS/UX">Firefox OS user experience</a></li>
<li><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Button/Coding">Button coding guide</a></li>
</ul>
|
