Les contrôles XUL

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Le tableau suivant propose le listing des contrôles utilisateurs mis à disposition par XUL. Reportez-vous à la section Tutoriel XUL pour un guide pas-à-pas sur leurs utilisations et Référence XUL pour les informations de référence.

<button>

Un bouton pouvant être pressé par l'utilisateur.

<button label="Save" accesskey="S"/>

 

Image:Controlsguide-button.png
<button type="menu">

Un bouton ayant un menu déroulant attaché. Appuyez sur le bouton pour ouvrir le menu.

<button type="menu" label="View">
  <menupopup>
    <menuitem label="List"/>
    <menuitem label="Details"/>
  </menupopup>
</button>
Image:Controlsguide-button-menu.png
<button type="menu-button">

Un bouton associé à un bouton-flèche qui ouvre un menu déroulant. Le bouton-flèche est séparé du bouton principal. Contrairement au le type 'menu', des actions différentes peuvent être effectués en cliquant sur le bouton ou sur le bouton-flèche.

<button type="menu-button" label="New">
  <menupopup>
    <menuitem label="New Document"/>
    <menuitem label="New Image"/>
  </menupopup>
</button>
Image:Controlsguide-button-menu-button.gif
<checkbox>

Un contrôle pouvant être coché ou non ; typiquement utilisé pour créer des options pouvant être activées ou désactivées.

<checkbox label="Show Toolbar Labels" checked="true"/>
Image:Controlsguide-checkbox.png
<colorpicker>

Un sélectionneur de couleurs pouvant être utilisé pour sélectionner une couleur.

<colorpicker color="#FF0000"/>
Image:Controlsguide-colorpicker.png
<colorpicker type="button">

Un bouton qui affiche la couleur sélectionnée. Lorsqu'on clique sur le bouton, un sélecteur de couleurs spécialisé s'affiche.

<colorpicker type="button" color="#CC0080"/>
Image:Controlsguide-colorpicker-button.png
<datepicker>

Une série de boîtes de texte qui peuvent être utilisées pour saisir une date.

<datepicker value="2007/03/26"/>
Image:Controlsguide-datepicker.png
<datepicker type="grid">

Un sélecteur de date qui affiche un calendrier pour la sélection.

<datepicker type="grid" value="2007/02/20"/>
Image:Controlsguide-datepicker-grid.png
<datepicker type="popup" >

Un sélecteur de date qui affiche une série de boîtes de texte pour la saisie et un bouton pour afficher un sélecteur de date sous forme de calendrier.

<datepicker type="popup" value="2008/08/24"/>
 
<description>

L'élément description permet d'ajouter un texte descriptif.

<description>
  Sélectionner l'heure du début de l'évènement
</description>
Image:Controlguide-description.png
<groupbox>

Un élément groupbox regroupe plusieurs contrôles d'interface usager et affiche une étiquette à l'aide de l'élément caption.

<groupbox>
  <caption label="Network"/>
</groupbox>
Image:Controlguide-groupbox.png
<image>

Une image spécifiée par une URL.

<image src="start.png"/>
Image:Controlguide-image.png
<label>

L'élément label permet d'ajouter une étiquette à côté d'un champ de saisie.

<label control="volume" value="Volume:"/>
Image:Controlguide-label.png
<listbox>

Une liste permet la sélection d'items textuels.

<listbox>
  <listitem label="Chocolat"/>
  <listitem label="Bonbon"/>
</listbox>
Image:Controlguide-listbox.png
<menulist>

Une zone combinée est un contrôle texte attaché à une liste déroulante. La valeur est sélectionnée à l'aide de la liste déroulante. Aussi connu sous les noms de menulist, combobox et <select> en HTML.

<menulist>
  <menupopup>
    <menuitem label="Lions" value="l"/>
    <menuitem label="Tigres" value="t"/>
    <menuitem label="Ours" value="o"/>
  </menupopup>
</menulist>
Image:Controlguide-menulist.png
<menulist editable="true">

Une zone combinée éditable est comme une zone combinée standard, excepté que la valeur actuellement sélectionnée est affichée dans une zone de saisie où l'on peut  sélectionner directement une valeur, ou l'on peut entrer des valeurs absentes de la liste.

<menulist editable="true">
  <menupopup>
    <menuitem label="Elephants" value="Elephants"/>
    <menuitem label="Kangaroos" value="Kangaroos"/>
    <menuitem label="Bats" value="Bats"/>
  </menupopup>
</menulist>
Image:Controlguide-menulist-editable.png
<progressmeter>

Une barre de progression est utilisée pour montrer la progression d'une tâche lente.

<progressmeter value="40"/>
Image:Controlguide-progressmeter.png
<radio>

Un bouton radio est utilisé pour sélectionner uniquement une seule valeur d'une liste d'options à la fois.

<radiogroup>
  <radio label="Light" value="light"/>
  <radio label="Heavy" value="heavy"/>
</radiogroup>
Image:Controlguide-radio.png
<richlistbox>

The richlistbox displays a list of items where one or more may selected. Unlike the listbox which is designed to display only text, the richlistbox may display any type of content.

<richlistbox>
  <richlistitem>
    <image src="happy.png"/>
  </richlistitem>
  <richlistitem>
    <image src="sad.png"/>
  </richlistitem>
  <richlistitem>
    <image src="angry.png"/>
  </richlistitem>
</richlistbox>
Image:Controlguide-richlistbox.png
<scale>

A scale displays a bar with a thumb that may be slid across the bar to select between a range of values.

<scale min="1" max="10"/>
Image:Controlguide-scale.png
<textbox>

A textbox which allows a single line of text to be entered.

<textbox value="firefox"/>
Image:Controlguide-textbox.png
<textbox multiline="true">

A textbox which allows multiple lines of text to be entered.

<textbox multiline="true"/>
Image:Controlguide-textbox-multiline.png
<textbox type="autocomplete">

A textbox which provides a dropdown showing matches that would complete what the user types. The user can select one to have it filled into the textbox.

<textbox type="autocomplete" autocompletesearch="history"/>
 
<textbox type="number">

A textbox for entering numbers. Two arrow buttons are displayed for cycling through values.

<textbox type="number" min="1" max="20"/>
Image:Controlguide-textbox-number.png
<textbox type="password">

A textbox that hides the characters typed, used for entering passwords.

<textbox type="password"/>
Image:Controlguide-textbox-password.png
<timepicker>

A timepicker displays a set of textboxes for entering a time.

<timepicker value="12:05"/>
Image:Controlguide-timepicker.png
<toolbarbutton>

A button that is displayed on a toolbar.

<toolbarbutton label="Reload"/>
Image:Controlguide-toolbarbutton.png
<toolbarbutton type="menu">

A button that is displayed on a toolbar with a drop down menu attached to it.

<toolbarbutton type="menu" label="Show">
  <menupopup>
    <menuitem label="Toolbars"/>
    <menuitem label="Status Bar"/>
  </menupopup>
</toolbarbutton>
 
<toolbarbutton type="menu-button">

A button on a toolbar that that has a separate arrow button with a menu attached to it. Unlike with the 'menu' type, a separate action may be performed when the main part of the button is pressed.

<toolbarbutton type="menu-button" label="Open">
  <menupopup>
    <menuitem label="Open Changed Files"/>
    <menuitem label="Open All"/>
  </menupopup>
</toolbarbutton>
 
<tree>

A tree displays a hierarchy of items in multiple columns.

<tree>
  <treecols>
    <treecol label="Name" flex="1"/>
    <treecol label="Size" flex="1"/>
  </treecols>
  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="Popcorn"/>
        <treecell label="Large"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="Root Beer"/>
        <treecell label="Small"/>
      </treerow>
    </treeitem>
  </treechildren>
</tree>
Image:Controlguide-tree.png

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : Lugrim, fscholz, Yanmorin, DblK, Fredchat
 Dernière mise à jour par : Lugrim,