- 快速开始
- 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 示例

## Tabs 选项卡切换

选项卡切换。

### 基本用法

选项卡内容0

选项卡内容1

选项卡内容2

选项卡内容3

    import { BeTabs, BeTabPane } from '@brewer/beerui'
    let active = 'u1'
    const tabClick = (evt) => {
    	active = evt.detail
    }
    let items:TabItem[] = [{ key: 'u1', label: '用户管理' }, { key: 'u2', label: '配置管理' }, { key: 'u3', label: '角色管理' }, { key: 'u4', label: '定时任务补偿' } ]

    <BeTabs bind:active={active} {items} on:tabClick={tabClick}>
    	{#each items as item}
    	<BeTabPane {active} {...item}>
    		<h3>{item.label}</h3>
    		<h3>选项卡切换</h3>
    	</BeTabPane>
    	{/each}
    </BeTabs>

显示代码

### 固定数据

BeTabPane上需要绑定 key 和 active

选项卡内容1

选项卡内容2

    let active2 = 'u1';

    <BeTabs bind:active={active2} items={[{ key: 'u1', label: '选项卡1' }, { key: 'u2', label: '选项卡2' }]} on:tabClick={ ({ detail }) => active2 = detail }>
    	<BeTabPane active={active2} key='u1'>
    		<p>选项卡内容1</p>
    	</BeTabPane>
    	<BeTabPane active={active2} key='u2'>
    		<p>选项卡内容2</p>
    	</BeTabPane>
    </BeTabs >

显示代码

### BeTabs Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
active | 绑定值，选中选项卡的 key | string | - | ''
items | 选项 | TabItem | - | ''

    interface TabItem {
    	key: string,
    	label: string
    }

### BeTabPane Attributes

参数 | 说明 | 类型 | 可选值 | 默认值
--- | --- | --- | --- | ---
active | 绑定值，选中选项卡的 key | string | - | ''
key | 判断选中的标识 | TabItem | - | ''

### BeTabs Events

事件名称 | 说明 | 回调参数
--- | --- | ---
tabClick | tab点击触发 | 当前点击的key

### BeTabPane Slot

name | 说明
--- | ---
default | 默认