mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-12-27 03:01:14 +08:00
Code Issues Packages Projects Releases Wiki Activity
270f4bc97a
element-plus/website/docs/fr-FR/menu.md
Xing.Wu 334fe977cb
feat(docs): NavMenu code for composition (#2248) 
Co-authored-by: 无星 <32910694@qq.com>
2021-06-19 02:23:50 +08:00

12 KiB
Raw Blame History

NavMenu

Menu qui fournit un système de navigation à votre site.

Barre du haut

La barre du haut peut être utilisée pour différents scénarios.

:::demo Par défaut le menu est vertical, mais vous pouvez le passer en horizontal en réglant l'attribut mode sur 'horizontal'. De plus, vous pouvez utiliser le composant submenu pour créer un second niveau niveau de menu. Le menu utilises background-color, text-color et active-text-color pour personnaliser les couleurs.

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">Centre de traitement</el-menu-item>
  <el-submenu index="2">
    <template #title>Lieu de travail</template>
    <el-menu-item index="2-1">item un</el-menu-item>
    <el-menu-item index="2-2">item deux</el-menu-item>
    <el-menu-item index="2-3">item trois</el-menu-item>
    <el-submenu index="2-4">
      <template #title>item quatre</template>
      <el-menu-item index="2-4-1">item un</el-menu-item>
      <el-menu-item index="2-4-2">item deux</el-menu-item>
      <el-menu-item index="2-4-3">item trois</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>Infos</el-menu-item>
  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Commandes</a></el-menu-item>
</el-menu>
<div class="line"></div>
<el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="1">Centre de traitement</el-menu-item>
  <el-submenu index="2">
    <template #title>Lieu de travail</template>
    <el-menu-item index="2-1">item un</el-menu-item>
    <el-menu-item index="2-2">item deux</el-menu-item>
    <el-menu-item index="2-3">item trois</el-menu-item>
    <el-submenu index="2-4">
      <template #title>item quatre</template>
      <el-menu-item index="2-4-1">item un</el-menu-item>
      <el-menu-item index="2-4-2">item deux</el-menu-item>
      <el-menu-item index="2-4-3">item trois</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>Info</el-menu-item>
  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Commandes</a></el-menu-item>
</el-menu>

<script>
  export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      const activeIndex = ref('1');
      const activeIndex2 = ref('1');
      const handleSelect = (key, keyPath) => {
        console.log(key, keyPath);
      };
      return {
        activeIndex,
        activeIndex2,
        handleSelect,
      };
    },
  });

</setup>
-->

:::

Barre latérale

Menu vertical avec sous-menus.

:::demo Vous pouvez utiliser le composant el-menu-item-group pour créer un groupe dans le menu dont le nom sera déterminé par celui de la propriété title ou d'un slot.

<el-row class="tac">
  <el-col :span="12">
    <h5>Couleurs par défaut</h5>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <el-submenu index="1">
        <template #title>
          <i class="el-icon-location"></i>
          <span>Navigateur Un</span>
        </template>
        <el-menu-item-group title="Group Un">
          <el-menu-item index="1-1">item un</el-menu-item>
          <el-menu-item index="1-2">item un</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="Group Deux">
          <el-menu-item index="1-3">item trois</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template #title>item quatre</template>
          <el-menu-item index="1-4-1">item un</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span>Navigateur Deux</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span>Navigateur Trois</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span>Navigateur Quatre</span>
      </el-menu-item>
    </el-menu>
  </el-col>
  <el-col :span="12">
    <h5>Couleurs personnalisées</h5>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template #title>
          <i class="el-icon-location"></i>
          <span>Navigateur Un</span>
        </template>
        <el-menu-item-group title="Group Un">
          <el-menu-item index="1-1">item un</el-menu-item>
          <el-menu-item index="1-2">item un</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="Group Deux">
          <el-menu-item index="1-3">item trois</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template #title>item quatre</template>
          <el-menu-item index="1-4-1">item un</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span>Navigateur Deux</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span>Navigateur Trois</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span>Navigateur Quatre</span>
      </el-menu-item>
    </el-menu>
  </el-col>
</el-row>

<script>
  export default {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<!--
<setup>

  import { defineComponent } from 'vue';

  export default defineComponent({
    setup() {
      const handleOpen = (key, keyPath) => {
        console.log(key, keyPath);
      };
      const handleClose = (key, keyPath) => {
        console.log(key, keyPath);
      };
      return {
        handleOpen,
        handleClose,
      };
    },
  });

</setup>
-->

:::

Menu réduit

Le menu vertical peut être réduit.

:::demo

<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
  <el-radio-button :label="false">Agrandir</el-radio-button>
  <el-radio-button :label="true">Réduire</el-radio-button>
</el-radio-group>
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <el-submenu index="1">
    <template #title>
      <i class="el-icon-location"></i>
      <span>Navigateur Un</span>
    </template>
    <el-menu-item-group>
      <template #title><span>Group Un</span></template>
      <el-menu-item index="1-1">item un</el-menu-item>
      <el-menu-item index="1-2">item deux</el-menu-item>
    </el-menu-item-group>
    <el-menu-item-group title="Group Deux">
      <el-menu-item index="1-3">item trois</el-menu-item>
    </el-menu-item-group>
    <el-submenu index="1-4">
      <template #title><span>item quatre</span></template>
      <el-menu-item index="1-4-1">item un</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="2">
    <i class="el-icon-menu"></i>
    <template #title>Navigator Deux</template>
  </el-menu-item>
  <el-menu-item index="3" disabled>
    <i class="el-icon-document"></i>
    <template #title>Navigator Trois</template>
  </el-menu-item>
  <el-menu-item index="4">
    <i class="el-icon-setting"></i>
    <template #title>Navigator Quatre</template>
  </el-menu-item>
</el-menu>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>

<script>
  export default {
    data() {
      return {
        isCollapse: true
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>
<!--
<setup>

  import { defineComponent, ref } from 'vue';

  export default defineComponent({
    setup() {
      const isCollapse = ref(true);
      const handleOpen = (key, keyPath) => {
        console.log(key, keyPath);
      };
      const handleClose = (key, keyPath) => {
        console.log(key, keyPath);
      };
      return {
        isCollapse,
        handleOpen,
        handleClose,
      };
    },
  });

</setup>
-->

:::

Attributs du menu

Attribut Description Type Valeurs acceptées Défaut
mode Mode d'affichage du menu. string horizontal / vertical vertical
collapse Si le menu peut être réduit, uniquement disponible en mode vertical. boolean — false
background-color Couleur de fond du menu (format hexadécimal). string — #ffffff
text-color Couleur du texte du menu (format hexadécimal) string — #303133
active-text-color Couleur du texte de l'item actif (format hexadécimal). string — #409EFF
default-active Index du menu actif. string — —
default-openeds Liste contenant les index les sous-menus actifs. Array — —
unique-opened Si un seul sous-menu peut être actif. boolean — false
menu-trigger Comment les sous-menu sont déclenchés, uniquement en mode horizontal. string hover / click hover
router Si le mode vue-router est activé. Si true, l'index sera utilisé comme 'path' pour activer la route. boolean — false
collapse-transition Si la transition de réduction doit être activée. boolean — true

Méthodes du menu

Nom Description Paramètres
open Ouvre un sous-menu spécifique. index: index du sous-menu à ouvrir
close Ferme un sous-menu spécifique. index: index du sous-menu à fermer

Évènements du menu

Nom Description Paramètres
select Fonction de callback pour quand le menu est activé. index: index du menu activé, indexPath: index path du menu activé.
open Fonction de callback pour quand le sous-menu s'agrandit. index: index of expanded sous-menu, indexPath: index path du sous-menu
close Fonction de callback pour quand le sous-menu se réduit. index: index of collapsed sous-menu, indexPath: index path du sous-menu

Évènements des items du menu

Nom Description Paramètres
click Fonction de callback pour quand le menu-item est cliqué. el: instance du menu-item.

Attributs du sous-menu

Attributs Description Type Valeurs acceptées Défaut
index Identificateur unique. string — —
popper-class Classe du menu popup. string — —
show-timeout Délai avant de montrer un sous-menu. number — 300
hide-timeout Délai avant de cacher un sous-menu. number — 300
disabled Si le sous-menu est désactivé. boolean — false
popper-append-to-body S'il faut ajouter un menu popup au body. Si le positionnement du body n'est pas bon, vous pouvez essayer de régler cette propriété. boolean - Sous-menus de niveau 1: true / autres sous-menus: false

Attributs des items du menu

Attributs Description Type Valeurs acceptées Défaut
index Identificateur unique. string/null — null
route Objet Vue Router. object — —
disabled Si l'item est désactivé. boolean — false

Attributs des groupes

Attributs Description Type Valeurs acceptées Défaut
title Titre du groupe. string — —