* First round of correction * Second round * Cascader and form translation * Last big round of changes * Update changelog
10 KiB
Dropdown
Menu déroulant pour afficher des listes de liens et d'actions possibles.
Usage
Passez sur le menu avec la souris pour dérouler son contenu.
:::demo L'élément déclencheur est généré par le slot
par défaut, et le menu déroulant est généré par le slot
appelé dropdown
. Par défaut le menu apparaît simplement en passant la souris sur l'élément déclencheur, sans avoir à cliquer.
<el-dropdown>
<span class="el-dropdown-link">
Menu déroulant<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item disabled>Action 4</el-dropdown-item>
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
:::
Élément déclencheur
Utilisez le bouton pour ouvrir le menu déroulant.
:::demo Utilisez split-button
pour séparer le déclencheur du reste du bouton, ce dernier devenant la partie gauche et le déclencheur la partie droite.
<el-dropdown>
<el-button type="primary">
Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown split-button type="primary" @click="handleClick">
Liste déroulante
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
<el-dropdown-item>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown {
vertical-align: top;
}
.el-dropdown + .el-dropdown {
margin-left: 15px;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
<script>
export default {
methods: {
handleClick() {
alert('button click');
}
}
}
</script>
:::
Déclencheur
Vous pouvez choisir de déclencher le menu au moment du clic, ou en passant la souris sur l'élément.
:::demo Utilisez l'attribut trigger
. Par défaut, il est à hover
.
<el-row class="block-col-2">
<el-col :span="12">
<span class="demonstration">En passant la souris</span>
<el-dropdown>
<span class="el-dropdown-link">
Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
<el-col :span="12">
<span class="demonstration">En cliquant</span>
<el-dropdown trigger="click">
<span class="el-dropdown-link">
Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>
<el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>
<el-dropdown-item icon="el-icon-circle-check-outline">Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
.demonstration {
display: block;
color: #8492a6;
font-size: 14px;
margin-bottom: 20px;
}
</style>
:::
Fermer le menu
Utilisez l'attribut hide-on-click
pour déterminer si le menu se ferme après avoir cliqué sur un élément de la liste.
:::demo Par défaut le menu se ferme après avoir cliqué dans la liste. Vous pouvez changer cette option en mettant hide-on-click
à false
.
<el-dropdown :hide-on-click="false">
<span class="el-dropdown-link">
Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item disabled>Action 4</el-dropdown-item>
<el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
:::
Évènement command
Cliquer sur un élément du dropdown déclenche un évènement "command". Le paramètre de cet évènement peut être assigné à chaque élément de la liste.
:::demo
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">Action 1</el-dropdown-item>
<el-dropdown-item command="b">Action 2</el-dropdown-item>
<el-dropdown-item command="c">Action 3</el-dropdown-item>
<el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>
<el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style>
.el-dropdown-link {
cursor: pointer;
color: #409EFF;
}
.el-icon-arrow-down {
font-size: 12px;
}
</style>
<script>
export default {
methods: {
handleCommand(command) {
this.$message('click on item ' + command);
}
}
}
</script>
:::
Tailles
En plus de la taille par défaut, le composant Dropdown propose trois autres tailles différentes.
:::demo Utilisez size
pour déterminer une autre taille parmi medium
, small
ou mini
.
<el-dropdown split-button type="primary">
Défaut
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown size="medium" split-button type="primary">
Medium
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown size="small" split-button type="primary">
Small
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-dropdown size="mini" split-button type="primary">
Mini
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
:::
Attributs du Dropdown
Attribut | Description | Type | Valeurs acceptées | Défaut |
---|---|---|---|---|
type | Type du bouton, se référer au composant Button . Ne marche que si split-button est true . |
string | — | — |
size | Taille du menu, marche aussi avec split button . |
string | medium / small / mini | — |
split-button | Si le bouton est séparé en deux. | boolean | — | false |
placement | Emplacement du menu déroulant | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom-end |
trigger | Comment déclencher l'ouverture du menu. | string | hover/click | hover |
hide-on-click | Si le menu doit disparaître après avoir cliqué sur un élément. | boolean | — | true |
show-timeout | Délai avant d'afficher le menu (ne marche que si trigger est hover ) |
number | — | 250 |
hide-timeout | Délai avant de cacher le menu (ne marche que si trigger est hover ) |
number | — | 150 |
tabindex | tabindex de Dropdown | number | — | 0 |
Dropdown Slots
Nom | Description |
---|---|
— | Contenu du Dropdown. Note: doit être un élément du DOM valide (ex. <span>, <button> etc. ) ou el-component , pour y attacher un évènement. |
dropdown | Contenu du menu du Dropdown, en général un élément <el-dropdown-menu> . |
Évènements du Dropdown
Nom | Description | Paramètres |
---|---|---|
click | Si split-button est true , se déclenche quand le bouton de gauche est cliqué. |
— |
command | Se déclenche quand un élément de la liste est cliqué. | L'attribut command de l'élément de la liste. |
visible-change | Se déclenche quand le menu s'affiche ou disparaît. | true quand il apparaît, false sinon. |
Attributs des éléments du menu
Attribut | Description | Type | Valeurs acceptées | Défaut |
---|---|---|---|---|
command | Le contenu à envoyer au callback de l'évènement command du Dropdown. |
string/number/object | — | — |
disabled | Si l'élément est désactivé. | boolean | — | false |
divided | Si un diviseur doit être affiché. | boolean | — | false |
icon | Classe de l'icône. | string | — | — |