blob: 707a1ae49d1bcae9d4a1f6c5accc27628a6e9118 (
plain)
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
|
---
title: Menu action
slug: Web/Apps/Design/Building_Blocks/menu_action
translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_blocks/1.x/Action_menu
---
<p><span id="result_box" lang="fr"><span class="hps atn">Un menu Action</span><span> présente</span> <span class="hps">une liste d'élémenst</span><span>,</span> <span class="hps">liée</span> <span class="hps">au contenu de</span> <span class="hps">l'application,</span> <span class="hps">à partir de</span> <span class="hps">laquelle l'utilisateur peut</span> <span class="hps">faire une sélection.</span> <span class="hps">Consultez le guide</span> <span class="hps">de codage</span> <span class="hps">pour plus de détails</span> <span class="hps">sur la façon de</span> <span class="hps">mettre en place un</span> <span class="hps">menu d'action</span> <span class="hps">dans votre application</span><span>.</span></span></p>
<h2 id="Caractéristiques">Caractéristiques</h2>
<ul>
<li><span id="result_box" lang="fr"><span class="hps">Ouvert</span> <span class="hps">à partir de</span> <span class="hps">boutons</span> <span class="hps">dans le contenu</span> <span class="hps">de l'application</span><span>,</span> <span class="hps">ces</span> <span class="hps">boutons sont</span> <span class="hps">souvent à l'intérieur</span> <span class="hps">des barres d'outils</span> <span class="hps atn">(</span><span>par exemple</span><span>, le bouton</span> <span class="hps">"Partager"</span> <span class="hps">du Navigateur</span><span class="hps">)</span><span>.</span></span></li>
<li><span id="result_box" lang="fr"><span class="hps">Les menus</span> <span class="hps">d'action</span> <span class="hps">contiennent</span> <span class="hps">un ou plusieurs éléments</span><span>.</span></span></li>
<li><span id="result_box" lang="fr"><span class="hps">Ces</span> <span class="hps">menus</span> se <span class="hps">développent</span> <span class="hps">en hauteur pour</span> <span class="hps">accueillir</span> <span class="hps">leurs articles,</span> <span class="hps">à un maximum de</span> <span class="hps atn">la hauteur de l'</span><span>écran</span><span>.</span> <span class="hps">Une fois</span> <span class="hps">que la hauteur</span> <span class="hps">maximale</span> <span class="hps">est atteinte, le</span> <span class="hps">contenu défile</span> <span class="hps">verticalement</span><span>.</span> <span class="hps">Généralement, la meilleure</span> <span class="hps">pratique</span> <span class="hps">consiste à essayer de</span> <span class="hps">ne comprendre</span> <span class="hps">pas plus de cinq</span> éléments<span>, plus</span> <span class="hps">un titre de menu</span><span>.</span></span></li>
<li>Le titre du menu est optionnel.</li>
<li>Le menu se ferme si :
<ul>
<li>Un des élément est sélectionné.</li>
<li>Le bouton "annulé" est touché.</li>
</ul>
</li>
</ul>
<h2 id="Captures_d'écran">Captures d'écran</h2>
<table class="fxosScreenGrid">
<tbody>
<tr>
<td>
<h3 id="État_neutre">État neutre</h3>
<p><img alt="" src="https://mdn.mozillademos.org/files/4641/action-menu-idle.png" style="width: 320px; height: 480px;"></p>
<p>Le menu Action ouvert attendant la sélection de l'utilisateur.</p>
</td>
<td>
<h3 id="État_appuyé">État appuyé</h3>
<p><img alt="" src="https://mdn.mozillademos.org/files/4635/action-menu.png" style="width: 320px; height: 480px;"></p>
<p>L'apparence du menu quand l'utilisateur touche le boutton "Option 3"</p>
</td>
</tr>
</tbody>
</table>
<h2 id="Variations">Variations</h2>
<p><span id="result_box" lang="fr"><span class="hps">Il existe deux variantes</span> <span class="hps">de base sur</span> <span class="hps">le menu Action </span><span>:</span> <span class="hps">si le</span> <span class="hps">menu a</span> <span class="hps">une chaîne de</span> <span class="hps">titre en haut</span><span> ou non.</span></span></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/4645/action-menu-variations.jpg" style="width: 1023px; height: 532px;"></p>
<h2 id="Interaction">Interaction</h2>
<p>Ce diagramme montre comment l'utilisateur interagit avec le menu action.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/4649/action-menu-flow-1.png" style="width: 731px; height: 1169px;"></p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding" title="/en-US/docs/Mozilla/Firefox_OS/UX/Building_blocks/Action_menu/Coding">Action menu coding guide</a></li>
</ul>
|
