Skip to content

E
Element
Commit 1956a62d authored by baiyaaaaa's avatar baiyaaaaa
Browse files
Options

uodate tab docs

parent 73e9e918
Hide whitespace changes
Inline Side-by-side
Showing with 37 additions and 55 deletions
examples/docs/en-US/tabs.md
View file @ 1956a62d
...@@ -2,13 +2,7 @@ ...@@ -2,13 +2,7 @@
export default { export default {
data() { data() {
return { return {
activeName: 'first', activeName: 'first'
tabs: [
{label: 'User', content: '', name: 'first'},
{label: 'Config', content: '', name: 'second'},
{label: 'Role', content: '', name: 'third'},
{label: 'Task', content: '', name: 'last'}
]
} }
}, },
methods: { methods: {
...@@ -35,20 +29,17 @@ Basic and concise tabs. ...@@ -35,20 +29,17 @@ Basic and concise tabs.
```html ```html
<template> <template>
<el-tabs :active-name="activeName"> <el-tabs :active-name="activeName">
<el-tab-pane v-for="tab in tabs" :label="tab.label" :name="tab.name">{{tab.content}}</el-tab-pane> <el-tab-pane label="User" name="first">User</el-tab-pane>
</el-tabs> <el-tab-pane label="Config" name="second">Config</el-tab-pane>
<el-tab-pane label="Role" name="third">Role</el-tab-pane>
<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
</el-tabs>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
activeName: 'first', activeName: 'first'
tabs: [
{label: 'User', content: '', name: 'first'},
{label: 'Config', content: '', name: 'second'},
{label: 'Role', content: '', name: 'third'},
{label: 'Task', content: '', name: 'last'}
]
}; };
} }
}; };
...@@ -65,10 +56,10 @@ Tabs styled as cards. ...@@ -65,10 +56,10 @@ Tabs styled as cards.
```html ```html
<template> <template>
<el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove"> <el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove">
<el-tab-pane label="User"></el-tab-pane> <el-tab-pane label="User">User</el-tab-pane>
<el-tab-pane label="Config"></el-tab-pane> <el-tab-pane label="Config">Config</el-tab-pane>
<el-tab-pane label="Role"></el-tab-pane> <el-tab-pane label="Role">Role</el-tab-pane>
<el-tab-pane label="Task"></el-tab-pane> <el-tab-pane label="Task">Task</el-tab-pane>
</el-tabs> </el-tabs>
</template> </template>
<script> <script>
...@@ -95,10 +86,10 @@ Closable tabs. ...@@ -95,10 +86,10 @@ Closable tabs.
```html ```html
<template> <template>
<el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove"> <el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
<el-tab-pane label="User"></el-tab-pane> <el-tab-pane label="User">User</el-tab-pane>
<el-tab-pane label="Config"></el-tab-pane> <el-tab-pane label="Config">Config</el-tab-pane>
<el-tab-pane label="Role"></el-tab-pane> <el-tab-pane label="Role">Role</el-tab-pane>
<el-tab-pane label="Task"></el-tab-pane> <el-tab-pane label="Task">Task</el-tab-pane>
</el-tabs> </el-tabs>
</template> </template>
<script> <script>
...@@ -125,10 +116,10 @@ Border card tabs. ...@@ -125,10 +116,10 @@ Border card tabs.
```html ```html
<el-tabs type="border-card"> <el-tabs type="border-card">
<el-tab-pane label="User"></el-tab-pane> <el-tab-pane label="User">User</el-tab-pane>
<el-tab-pane label="Config"></el-tab-pane> <el-tab-pane label="Config">Config</el-tab-pane>
<el-tab-pane label="Role"></el-tab-pane> <el-tab-pane label="Role">Role</el-tab-pane>
<el-tab-pane label="Task"></el-tab-pane> <el-tab-pane label="Task">Task</el-tab-pane>
</el-tabs> </el-tabs>
``` ```
......
examples/docs/zh-CN/tabs.md
View file @ 1956a62d
...@@ -2,13 +2,7 @@ ...@@ -2,13 +2,7 @@
export default { export default {
data() { data() {
return { return {
activeName: 'first', activeName: 'first'
tabs: [
{label: '用户管理', content: '', name: 'first'},
{label: '配置管理', content: '', name: 'second'},
{label: '角色管理', content: '', name: 'third'},
{label: '定时任务补偿', content: '', name: 'last'}
]
} }
}, },
methods: { methods: {
...@@ -33,20 +27,17 @@ ...@@ -33,20 +27,17 @@
```html ```html
<template> <template>
<el-tabs :active-name="activeName"> <el-tabs :active-name="activeName">
<el-tab-pane v-for="tab in tabs" :label="tab.label" :name="tab.name">{{tab.content}}</el-tab-pane> <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs> </el-tabs>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
activeName: 'first', activeName: 'first'
tabs: [
{label: '用户管理', content: '', name: 'first'},
{label: '配置管理', content: '', name: 'second'},
{label: '角色管理', content: '', name: 'third'},
{label: '定时任务补偿', content: '', name: 'last'}
]
}; };
} }
}; };
...@@ -63,10 +54,10 @@ ...@@ -63,10 +54,10 @@
```html ```html
<template> <template>
<el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove"> <el-tabs type="card" @tab-click="handleClick" @tab-remove="handleRemove">
<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-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>
</template> </template>
<script> <script>
...@@ -93,10 +84,10 @@ ...@@ -93,10 +84,10 @@
```html ```html
<template> <template>
<el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove"> <el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
<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-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>
</template> </template>
<script> <script>
...@@ -121,10 +112,10 @@ ...@@ -121,10 +112,10 @@
:::demo 将`type`设置为`border-card`。 :::demo 将`type`设置为`border-card`。
```html ```html
<el-tabs type="border-card"> <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-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>
``` ```
::: :::
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment