test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-02 20:28:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
cfaa0ab858
element/examples/docs/tabs.md
qingwei.li eb60126636 Update tabs 
build entry.js

index => name

fix tab doc
2016-08-15 10:51:24 +08:00

4.2 KiB
Raw Blame History

基础使用

选项卡一内容 选项卡二内容 选项卡三内容 选项卡四内容 
<el-tabs :active-name="activeName">
  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs>

标签风格

选项卡一内容 选项卡二内容 选项卡三内容 选项卡四内容 
<el-tabs type="card">
  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs>

可关闭的标签

选项卡一内容 选项卡二内容 选项卡三内容 选项卡四内容
{{activeName2}} 
<el-tabs type="card" :closable="true">
  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs>

卡片风格

选项卡一内容 选项卡二内容 选项卡三内容 选项卡四内容 
<el-tabs type="border-card">
  <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
  <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
  <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
  <el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs>

TABS API

参数 说明 类型 可选值 默认值
type 风格类型 string card, border-card
closable 真实值 boolean true, false false
defaultActiveName 如果没有设置 activeName, 则使用该值 string 第一个面板
activeName 当前选中面板的 name string
tab.click tab 被点击的回调 string
tab.remove tab 被删除的回调 string

TAB-PANE API

参数 说明 类型 可选值 默认值
label 选项卡标题 string
name 与选项卡 activeName 对应的标识符 string 该选项卡在选项卡中的 name 值，如第一个选项卡则为'1'