BitBounceFE-UIAppearance
Menu 菜单 #
TIP
Menu 菜单组件一般用于导航。
何时使用 #
在需要有规律地展示或者排列一系列的选项时。
基本用法 #
- javascript
- c
- c++
- c#
- Go
- c语言
- python
java
php
<template>
<div>
<b-menu style="margin-bottom: 200px" mode="horizontal" width="400px">
<b-menu-item>javascript</b-menu-item>
<b-sub-menu title="java">
<b-menu-item>c</b-menu-item>
<b-menu-item>c++</b-menu-item>
<b-menu-item>c#</b-menu-item>
<b-sub-menu title="php">
<b-menu-item>Go</b-menu-item>
</b-sub-menu>
</b-sub-menu>
<b-menu-item disabled>c语言</b-menu-item>
<b-menu-item>python</b-menu-item>
</b-menu>
</div>
</template>
显示代码
复制代码片段
竖直菜单 #
- javascript
- java
- c语言
- python
<template>
<div>
<b-menu style="margin-bottom: 100px" width="200px">
<b-menu-item>javascript</b-menu-item>
<b-menu-item>java</b-menu-item>
<b-menu-item disabled>c语言</b-menu-item>
<b-menu-item>python</b-menu-item>
</b-menu>
</div>
</template>
显示代码
复制代码片段
API #
Menu 属性 #
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| width | string | '' | 修改菜单的宽度 |
| mode | 'vertical' | 'horizontal' | 'vertical' | 设置菜单是横向或者竖直 |
| defaultKeys | array | [] | 菜单的默认展开项的 key 值 |
MenuItem 属性 #
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| disabled | boolean | false | 是否禁用 |
subMenu 属性 #
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| disabled | boolean | false | 是否禁用 |