- 快速开始
- REPL
- 基本
- Icons 示例
- Button 示例
- 表单
- Input 示例
- Textarea 示例
- Radio 单选框
- Checkbox 多选框
- Switch 示例
- Select 示例
- Cascader 示例
- Form 示例
- Upload 示例
- date-picker 示例
- Drag 拖动排序
- data 数据
- Table 表格
- Tree 树形控件
- SelectTree 树形选择控件
- Pagination 分页
- progress 示例
- Empty 空状态
- 提示
- Loading 示例
- MessageBox 示例
- Dialog 示例
- Alert 示例
- Notice 示例
- 导航 Navigation
- Tabs 标签页
- NavMenu 导航菜单
- Breadcrumb 面包屑
- 其它 Others
- Clock 示例
- Drawer 示例
- Collapse 示例
- Scrollbar 示例
- Carousel 示例
- CountTo 示例
- PreviewImage 示例

## NavMenu 导航菜单

为网站提供导航功能的菜单。

### 基础用法

1. data1 为菜单数据 id: 必须 title: 必须
2. bind:this=undefined 绑定菜单DOM
3. active: 当前选中菜单的index
4. 使用 setMenuActive 方法可设置选中数据。
5. 使用 change 方法可监听菜单改变。

    let MenuDom: NavMenu
    let setMenuActive = (key) => MenuDom.setMenuActive(key)
    const changeMenu = (evt) => console.log('changeMenu', evt.detail)

    <BeMenu class="be-menu-demo" active="1" mode="horizontal" bind:this={MenuDom} on:change={changeMenu}>
    	<BeMenuItem id="1">处理中心</BeMenuItem>
    	<BeSubMenu id="2">
    		<div slot="title">我的工作台</div>
    		<BeMenuItem id="2-1">选项1</BeMenuItem>
    		<BeMenuItem id="2-2">选项2</BeMenuItem>
    		<BeMenuItem id="2-3">选项3</BeMenuItem>
    		<BeSubMenu id="2-4">
    			<div slot="title">选项4</div>
    			<BeMenuItem id="2-4-1">选项1</BeMenuItem>
    			<BeMenuItem id="2-4-2">选项2</BeMenuItem>
    			<BeMenuItem id="2-4-3">选项3</BeMenuItem>
    		</BeSubMenu>
    	</BeSubMenu>
    	<BeMenuItem id="3" disabled>消息中心</BeMenuItem>
    	<BeMenuItem id="4">订单管理</BeMenuItem>
    </BeMenu>

显示代码

## 侧栏

垂直菜单，可内嵌子菜单。

1. 存在多个Menu时 使用key:string 绑定菜单
2. mode 模式 string horizontal / vertical vertical
3. trigger 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) string hover / click hover
4. mode为vertical时 trigger只能为click

    <div style="width: 200px;min-height: 200px;">
    	<BeMenu class="be-menu-demo" data={data1} active="2-1" mode="vertical" trigger="click">
    		<BeMenuItem id="1">处理中心</BeMenuItem>
    		<BeSubMenu id="2">
    			<div slot="icon">
    				<BeIcon name="app" />
    			</div>
    			<div slot="title">我的工作台</div>
    			<BeMenuItem id="2-1">
    				<div slot="icon">
    					<BeIcon name="app" />
    				</div>
    				选项1
    			</BeMenuItem>
    			<BeMenuItem id="2-2">选项2</BeMenuItem>
    			<BeMenuItem id="2-3">选项3</BeMenuItem>
    			<BeSubMenu id="2-4">
    				<div slot="title">选项4</div>
    				<BeMenuItem id="2-4-1">选项1</BeMenuItem>
    				<BeMenuItem id="2-4-2">选项2</BeMenuItem>
    				<BeMenuItem id="2-4-3">选项3</BeMenuItem>
    			</BeSubMenu>
    		</BeSubMenu>
    		<BeMenuItem id="3" disabled>消息中心</BeMenuItem>
    		<BeMenuItem id="4">订单管理</BeMenuItem>
    	</BeMenu>
    </div>

显示代码

## 折叠

1. collapse 是否水平折叠收起菜单（仅在 mode 为 vertical 时可用） boolean — false

    let collapse = true;
    const toggleCollapse = () => collapse = !collapse

    <BeButton on:click={toggleCollapse}>切换 collapse</BeButton>
    <div style="width: 200px;min-height: 200px;">
    	<BeMenu class="be-menu-demo" data={data1} active="1" mode="vertical" trigger="hover" {collapse}>
    		<BeMenuItem id="1">
    			<div slot="icon">
    				<BeIcon name="chart-bubble" />
    			</div>
    			处理中心
    		</BeMenuItem>
    		<BeSubMenu id="2">
    			<div slot="icon">
    				<BeIcon name="app" />
    			</div>
    			<div slot="title">我的工作台</div>
    			<BeMenuItem id="2-1">
    				<div slot="icon">
    					<BeIcon name="app" />
    				</div>
    				选项1
    			</BeMenuItem>
    			<BeMenuItem id="2-2">选项2</BeMenuItem>
    			<BeMenuItem id="2-3">选项3</BeMenuItem>
    			<BeSubMenu id="2-4">
    				<div slot="title">选项4</div>
    				<BeMenuItem id="2-4-1">选项1</BeMenuItem>
    				<BeMenuItem id="2-4-2">选项2</BeMenuItem>
    				<BeMenuItem id="2-4-3">选项3</BeMenuItem>
    			</BeSubMenu>
    		</BeSubMenu>
    		<BeMenuItem id="3" disabled>
    			<div slot="icon">
    				<BeIcon name="gift" />
    			</div>
    			消息中心
    		</BeMenuItem>
    		<BeMenuItem id="4">
    			<div slot="icon">
    				<BeIcon name="desktop" />
    			</div>
    			订单管理
    		</BeMenuItem>
    	</BeMenu>
    </div>

显示代码

### BeMenu Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
active | 选中菜单标识Id | string | - | ''
mode | 菜单方向 | string | horizontal/vertical | horizontal
trigger | 触发形式 | string | hover/click | hover
data | 菜单数据 | any[] | - | []
collapse | 展开收起的状态 | boolean | true/false | false
isOnlyOne | 仅有一个下级菜单展开 | boolean | true/false | false

### BeMenu Events

事件名称 | 说明 | 回调参数
--- | --- | ---
setMenuActive | 设置选中的菜单(active) |
change | 菜单改变的回调 | 当前选中菜单数据

### BeMenuItem/BeSubMenu Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
id | 选中菜单标识Id | string | - | ''