element-plus/docs/examples/menu/popper-offset.vue
Xc 48a056b051
docs: modify layout style (#10514)
* docs: modify layout style

* docs: modify nav padding

* docs: update style

* feat: update

* docs: upadte

* docs: update

* docs: modify layout style

* docs: update style

* feat: update

* docs: upadte

* docs: update

* docs: update

* docs: update

* docs: remove empty script

* docs: update

---------

Co-authored-by: kooriookami <bingshuanglingluo@163.com>
Co-authored-by: kooriookami <38392315+kooriookami@users.noreply.github.com>
2024-02-19 20:10:44 +08:00

40 lines
1.5 KiB
Vue

<template>
<el-menu
ellipsis
class="el-menu-popper-demo"
mode="horizontal"
:popper-offset="16"
style="max-width: 600px"
>
<el-menu-item index="1">Processing Center</el-menu-item>
<el-sub-menu index="2">
<template #title>Workspace</template>
<el-menu-item index="2-1">item one</el-menu-item>
<el-menu-item index="2-2">item two</el-menu-item>
<el-menu-item index="2-3">item three</el-menu-item>
<el-sub-menu index="2-4">
<template #title>item four</template>
<el-menu-item index="2-4-1">item one</el-menu-item>
<el-menu-item index="2-4-2">item two</el-menu-item>
<el-menu-item index="2-4-3">item three</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-sub-menu index="3" :popper-offset="8">
<template #title>Override Popper Offset</template>
<el-menu-item index="3-1">item one</el-menu-item>
<el-menu-item index="3-2">item two</el-menu-item>
<el-menu-item index="3-3">item three</el-menu-item>
<el-sub-menu index="3-4" :popper-offset="20">
<template #title>override child</template>
<el-menu-item index="3-4-1">item one</el-menu-item>
<el-menu-item index="3-4-2">item two</el-menu-item>
<el-menu-item index="3-4-3">item three</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="4" disabled>Info</el-menu-item>
<el-menu-item index="5">Orders</el-menu-item>
</el-menu>
</template>
<script lang="ts" setup></script>