layui/example/docs/zh-CN/components/menu.md at 05f135fdca83ba2bc4b6e39b5f8dd5ccd5ba1239

theluyuan/layui

Fork 0

Files

就眠儀式 c8b0457339 feat: 新增 menu 组件 collapse 属性

2022-02-27 12:55:09 +08:00

10 KiB

Raw Blame History

::: anchor :::

::: title 基本介绍 :::

::: describe 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。 :::

::: title 基础使用 :::

::: demo

首页首页首页首页首页首页首页首页首页首页 <script> import { ref } from 'vue' export default { setup() { const selectedKey = ref("5") const openKeys1 = ref(["7"]) return { selectedKey, openKeys1 } } } </script>

:::

::: title 垂直导航 :::

::: demo

首页首页首页首页首页首页首页首页首页首页 <script> import { ref } from 'vue' export default { setup() { const openKeys2 = ref(["7"]) const selectedKey = ref("5") return { openKeys2, selectedKey } } } </script>

:::

::: title 反转样式 :::

::: demo

首页首页首页首页首页首页首页首页首页首页 <script> import { ref } from 'vue' export default { setup() { const openKeys3 = ref(["7"]) const selectedKey = ref("5") return { openKeys3, selectedKey } } } </script>

:::

::: title 切换主题 :::

::: demo

菜单菜单菜单目录菜单菜单目录菜单菜单菜单 <script> import { ref } from 'vue' export default { setup() { const openKeys4 = ref(["7"]) const selectedKey = ref("5") return { openKeys4, selectedKey } } } </script>

:::

::: title 菜单插槽 :::

::: demo

首页目录菜单菜单 <script> import { ref } from 'vue' export default { setup() { const isTree = ref(true) const selectedKey = ref("5") const openKeys5 = ref(["7"]) return { isTree, openKeys5, selectedKey } } } </script>

:::

::: title 菜单折叠 :::

::: demo

首页首页首页首页首页首页首页首页首页首页首页首页首页 <script> import { ref } from 'vue' export default { setup() { const selectedKey = ref("5") const openKeys6 = ref(["7"]) const collapse = ref(true) const isTree = ref(true) return { selectedKey, openKeys6, colapse, isTree } } } </script>

:::

::: title Menu 属性 :::

::: table

属性	描述	备注
v-model:selectedKey	选中项	--
v-model:openKeys	打开项	--
theme	菜单主题	`dark` `light`
inverted	特殊的激活样式	`true` `false`
level	菜单层级	`true` `false`

:::

::: title Menu Item 属性 :::

::: table

插槽	描述	备注
title	菜单标题	--

:::

::: title Menu Item 插槽 :::

::: table

插槽	描述	备注
title	菜单标题	--

:::

::: title Sub Menu 属性 :::

::: table

插槽	描述	备注
title	菜单标题	--

:::

::: title Sub Menu 插槽 :::

::: table

插槽	描述	备注
title	菜单标题	--

:::

::: comment :::

::: previousNext nav :::

10 KiB Raw Blame History

10 KiB

Raw Blame History