add tabs and tag docs
tjz
parent
ea23f5841f
commit
b3c750d8ce
|
|
@ -46,55 +46,4 @@ export default {
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
|
||||||
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
|
|
||||||
color: #666;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group {
|
|
||||||
border-bottom: 1px solid #F6F6F6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.certain-category-search-dropdown .ant-select-dropdown-menu-item {
|
|
||||||
padding-left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.certain-category-search-dropdown .ant-select-dropdown-menu-item.show-all {
|
|
||||||
text-align: center;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.certain-category-search-dropdown .ant-select-dropdown-menu {
|
|
||||||
max-height: 300px;
|
|
||||||
}
|
|
||||||
.global-search-wrapper {
|
|
||||||
padding-right: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.global-search {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.global-search.ant-select-auto-complete .ant-select-selection--single {
|
|
||||||
margin-right: -46px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
|
|
||||||
padding-right: 62px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.global-search-item-count {
|
|
||||||
position: absolute;
|
|
||||||
right: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -40,13 +40,24 @@ export { default as Tooltip } from './tooltip'
|
||||||
|
|
||||||
export { default as Pagination } from './pagination'
|
export { default as Pagination } from './pagination'
|
||||||
|
|
||||||
export { default as Tag } from './tag'
|
import Tag from './tag'
|
||||||
|
const CheckableTag = Tag.CheckableTag
|
||||||
|
|
||||||
|
export {
|
||||||
|
Tag,
|
||||||
|
CheckableTag,
|
||||||
|
}
|
||||||
|
|
||||||
export { default as Avatar } from './avatar'
|
export { default as Avatar } from './avatar'
|
||||||
|
|
||||||
export { default as Badge } from './badge'
|
export { default as Badge } from './badge'
|
||||||
|
|
||||||
export { default as Tabs } from './tabs'
|
import Tabs from './tabs'
|
||||||
|
const TabPane = Tabs.TabPane
|
||||||
|
export {
|
||||||
|
Tabs,
|
||||||
|
TabPane,
|
||||||
|
}
|
||||||
|
|
||||||
import Input from './input'
|
import Input from './input'
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -61,23 +61,4 @@ export default {
|
||||||
#components-modal-demo .ant-btn {
|
#components-modal-demo .ant-btn {
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
.vertical-center-modal {
|
|
||||||
text-align: center;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertical-center-modal:before {
|
|
||||||
content: '';
|
|
||||||
display: inline-block;
|
|
||||||
height: 100%;
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertical-center-modal .ant-modal {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
top: 0;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -11,10 +11,10 @@
|
||||||
| size | the size of the `Switch`, options: `default` `small` | string | default |
|
| size | the size of the `Switch`, options: `default` `small` | string | default |
|
||||||
| unCheckedChildren | content to be shown when the state is unchecked | string\|slot | |
|
| unCheckedChildren | content to be shown when the state is unchecked | string\|slot | |
|
||||||
|
|
||||||
### events
|
### Events
|
||||||
| Events Name | Description | Arguments |
|
| Events Name | Description | Arguments |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
| change | a callback function, can be executed when the checked state is changing | Function(checked:Boolean) | |
|
| change | a callback function, can be executed when the checked state is changing | Function(checked:Boolean) |
|
||||||
|
|
||||||
## Methods
|
## Methods
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
### 事件
|
### 事件
|
||||||
| 事件名称 | 说明 | 回调参数 |
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
| --- | --- | --- |
|
| --- | --- | --- |
|
||||||
| change | 变化时回调函数 | Function(checked:Boolean) | |
|
| change | 变化时回调函数 | Function(checked:Boolean) |
|
||||||
|
|
||||||
## 方法
|
## 方法
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<cn>
|
||||||
|
#### 基本用法
|
||||||
|
默认选中第一项。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### basic Usage
|
||||||
|
Default activate first tab.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<md>
|
||||||
|
## 基本
|
||||||
|
默认选中第一项。
|
||||||
|
</md>
|
||||||
|
<a-tabs defaultActiveKey="1" @change="callback">
|
||||||
|
<a-tab-pane tab="Tab 1" key="1">Content of Tab Pane 1</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 2" key="2" forceRender>Content of Tab Pane 2</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 3" key="3">Content of Tab Pane 3</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
callback (key) {
|
||||||
|
console.log(key)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<md>
|
|
||||||
## 基本
|
|
||||||
默认选中第一项。
|
|
||||||
</md>
|
|
||||||
<Tabs defaultActiveKey="1" @change="callback">
|
|
||||||
<TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
|
|
||||||
<TabPane tab="Tab 2" key="2" forceRender>Content of Tab Pane 2</TabPane>
|
|
||||||
<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { Tabs } from 'antd'
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
callback (key) {
|
|
||||||
console.log(key)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Tabs,
|
|
||||||
TabPane: Tabs.TabPane,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,26 +1,37 @@
|
||||||
|
<cn>
|
||||||
|
#### 卡片式页签容器
|
||||||
|
用于容器顶部，需要一点额外的样式覆盖。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Container of card type Tab
|
||||||
|
Should be used at the top of container, needs to override styles.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="card-container">
|
<div class="card-container">
|
||||||
<Tabs type="card">
|
<a-tabs type="card">
|
||||||
<TabPane tab="Tab Title 1" key="1">
|
<a-tab-pane tab="Tab Title 1" key="1">
|
||||||
<p>Content of Tab Pane 1</p>
|
<p>Content of Tab Pane 1</p>
|
||||||
<p>Content of Tab Pane 1</p>
|
<p>Content of Tab Pane 1</p>
|
||||||
<p>Content of Tab Pane 1</p>
|
<p>Content of Tab Pane 1</p>
|
||||||
</TabPane>
|
</a-tab-pane>
|
||||||
<TabPane tab="Tab Title 2" key="2">
|
<a-tab-pane tab="Tab Title 2" key="2">
|
||||||
<p>Content of Tab Pane 2</p>
|
<p>Content of Tab Pane 2</p>
|
||||||
<p>Content of Tab Pane 2</p>
|
<p>Content of Tab Pane 2</p>
|
||||||
<p>Content of Tab Pane 2</p>
|
<p>Content of Tab Pane 2</p>
|
||||||
</TabPane>
|
</a-tab-pane>
|
||||||
<TabPane tab="Tab Title 3" key="3">
|
<a-tab-pane tab="Tab Title 3" key="3">
|
||||||
<p>Content of Tab Pane 3</p>
|
<p>Content of Tab Pane 3</p>
|
||||||
<p>Content of Tab Pane 3</p>
|
<p>Content of Tab Pane 3</p>
|
||||||
<p>Content of Tab Pane 3</p>
|
<p>Content of Tab Pane 3</p>
|
||||||
</TabPane>
|
</a-tab-pane>
|
||||||
</Tabs>
|
</a-tabs>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { Tabs } from 'antd'
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|
@ -31,10 +42,6 @@ export default {
|
||||||
console.log(key)
|
console.log(key)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {
|
|
||||||
Tabs,
|
|
||||||
TabPane: Tabs.TabPane,
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -67,3 +74,4 @@ export default {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<cn>
|
||||||
|
#### 卡片式页签
|
||||||
|
另一种样式的页签，不提供对应的垂直样式。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Card type tab
|
||||||
|
Another type Tabs, which doesn't support vertical mode.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<a-tabs @change="callback" type="card">
|
||||||
|
<a-tab-pane tab="Tab 1" key="1">Content of Tab Pane 1</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 2" key="2">Content of Tab Pane 2</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 3" key="3">Content of Tab Pane 3</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
callback (key) {
|
||||||
|
console.log(key)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
<template>
|
|
||||||
<Tabs @change="callback" type="card">
|
|
||||||
<TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
|
|
||||||
<TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
|
|
||||||
<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
|
|
||||||
</Tabs>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { Tabs } from 'antd'
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
callback (key) {
|
|
||||||
console.log(key)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Tabs,
|
|
||||||
TabPane: Tabs.TabPane,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,23 +1,33 @@
|
||||||
|
<cn>
|
||||||
|
#### 自定义新增页签触发器
|
||||||
|
隐藏默认的页签增加图标，给自定义触发器绑定事件。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Customized trigger of new tab
|
||||||
|
Hide default plus icon, and bind event for customized trigger.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div :style="{ marginBottom: '16px' }">
|
<div :style="{ marginBottom: '16px' }">
|
||||||
<a-button @click="add">ADD</a-button>
|
<a-button @click="add">ADD</a-button>
|
||||||
</div>
|
</div>
|
||||||
<Tabs
|
<a-tabs
|
||||||
hideAdd
|
hideAdd
|
||||||
v-model="activeKey"
|
v-model="activeKey"
|
||||||
type="editable-card"
|
type="editable-card"
|
||||||
@edit="onEdit"
|
@edit="onEdit"
|
||||||
>
|
>
|
||||||
<TabPane v-for="pane in panes" :tab="pane.title" :key="pane.key" :closable="pane.closable">
|
<a-tab-pane v-for="pane in panes" :tab="pane.title" :key="pane.key" :closable="pane.closable">
|
||||||
{{pane.content}}
|
{{pane.content}}
|
||||||
</TabPane>
|
</a-tab-pane>
|
||||||
</Tabs>
|
</a-tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { Tabs, Button } from 'antd'
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
const panes = [
|
const panes = [
|
||||||
|
|
@ -60,10 +70,6 @@ export default {
|
||||||
this.activeKey = activeKey
|
this.activeKey = activeKey
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {
|
|
||||||
Tabs,
|
|
||||||
TabPane: Tabs.TabPane,
|
|
||||||
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<cn>
|
||||||
|
#### 禁用
|
||||||
|
禁用某一项。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Disabled
|
||||||
|
Disabled a tab.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-tabs defaultActiveKey="1">
|
||||||
|
<a-tab-pane tab="Tab 1" key="1">Tab 1</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 2" disabled key="2">Tab 2</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 3" key="3">Tab 3</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
<template>
|
|
||||||
<Tabs defaultActiveKey="1">
|
|
||||||
<TabPane tab="Tab 1" key="1">Tab 1</TabPane>
|
|
||||||
<TabPane tab="Tab 2" disabled key="2">Tab 2</TabPane>
|
|
||||||
<TabPane tab="Tab 3" key="3">Tab 3</TabPane>
|
|
||||||
</Tabs>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { Tabs } from 'antd'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
Tabs,
|
|
||||||
TabPane: Tabs.TabPane,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,16 +1,28 @@
|
||||||
|
<cn>
|
||||||
|
#### 新增和关闭页签
|
||||||
|
只有卡片样式的页签支持新增和关闭选项。
|
||||||
|
使用 `closable={false}` 禁止关闭。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Add & close tab
|
||||||
|
Only card type Tabs support adding & closable.
|
||||||
|
+Use `closable={false}` to disable close.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
<template>
|
<template>
|
||||||
<Tabs
|
<a-tabs
|
||||||
v-model="activeKey"
|
v-model="activeKey"
|
||||||
type="editable-card"
|
type="editable-card"
|
||||||
@edit="onEdit"
|
@edit="onEdit"
|
||||||
>
|
>
|
||||||
<TabPane v-for="pane in panes" :tab="pane.title" :key="pane.key" :closable="pane.closable">
|
<a-tab-pane v-for="pane in panes" :tab="pane.title" :key="pane.key" :closable="pane.closable">
|
||||||
{{pane.content}}
|
{{pane.content}}
|
||||||
</TabPane>
|
</a-tab-pane>
|
||||||
</Tabs>
|
</a-tabs>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { Tabs } from 'antd'
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
const panes = [
|
const panes = [
|
||||||
|
|
@ -53,9 +65,6 @@ export default {
|
||||||
this.activeKey = activeKey
|
this.activeKey = activeKey
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {
|
|
||||||
Tabs,
|
|
||||||
TabPane: Tabs.TabPane,
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
<cn>
|
||||||
|
#### 附加内容
|
||||||
|
可以在页签右边添加附加操作。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Extra content
|
||||||
|
You can add extra actions to the right of Tabs.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-tabs>
|
||||||
|
<a-tab-pane tab="Tab 1" key="1">Content of tab 1</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 2" key="2">Content of tab 2</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 3" key="3">Content of tab 3</a-tab-pane>
|
||||||
|
<a-button slot="tabBarExtraContent">Extra Action</a-button>
|
||||||
|
</a-tabs>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<Tabs :tabBarExtraContent="operations">
|
|
||||||
<TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
|
|
||||||
<TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
|
|
||||||
<TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
|
|
||||||
</Tabs>
|
|
||||||
<Tabs>
|
|
||||||
<TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
|
|
||||||
<TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
|
|
||||||
<TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
|
|
||||||
<a-button slot="tabBarExtraContent">Extra Action</a-button>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { Tabs, Button } from 'antd'
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
operations (h) {
|
|
||||||
return h('span', [<Button>Extra Action</Button>])
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Tabs,
|
|
||||||
TabPane: Tabs.TabPane,
|
|
||||||
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<cn>
|
||||||
|
#### 图标
|
||||||
|
有图标的标签。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Icon
|
||||||
|
The Tab with Icon.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<a-tabs defaultActiveKey="2">
|
||||||
|
<a-tab-pane key="1">
|
||||||
|
<span slot="tab">
|
||||||
|
<a-icon type="apple" />
|
||||||
|
Tab 1
|
||||||
|
</span>
|
||||||
|
Tab 1
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="2">
|
||||||
|
<span slot="tab">
|
||||||
|
<a-icon type="android" />
|
||||||
|
Tab 2
|
||||||
|
</span>
|
||||||
|
Tab 2
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<Tabs defaultActiveKey="2">
|
|
||||||
<TabPane :tab="(h) => renderTab(h, '1', 'apple')" key="1">
|
|
||||||
Tab 1
|
|
||||||
</TabPane>
|
|
||||||
<TabPane :tab="(h) => renderTab(h, '2', 'android')" key="2">
|
|
||||||
Tab 2
|
|
||||||
</TabPane>
|
|
||||||
</Tabs>
|
|
||||||
<Tabs defaultActiveKey="2">
|
|
||||||
<TabPane key="1">
|
|
||||||
<span slot="tab">
|
|
||||||
<Icon type="apple" />
|
|
||||||
Tab 1
|
|
||||||
</span>
|
|
||||||
Tab 1
|
|
||||||
</TabPane>
|
|
||||||
<TabPane key="2">
|
|
||||||
<span slot="tab">
|
|
||||||
<Icon type="android" />
|
|
||||||
Tab 2
|
|
||||||
</span>
|
|
||||||
Tab 2
|
|
||||||
</TabPane>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { Tabs, Icon } from 'antd'
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
renderTab (h, tabKey, iconType) {
|
|
||||||
return h('span', [<Icon type={iconType} />, `Tab ${tabKey}`])
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Tabs,
|
|
||||||
TabPane: Tabs.TabPane,
|
|
||||||
Icon,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,29 +1,3 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<h1>Basic</h1>
|
|
||||||
<Basic />
|
|
||||||
<h1>CardTop</h1>
|
|
||||||
<CardTop />
|
|
||||||
<h1>Card</h1>
|
|
||||||
<Card />
|
|
||||||
<h1>CustomAddTrigger</h1>
|
|
||||||
<CustomAddTrigger />
|
|
||||||
<h1>Disabled</h1>
|
|
||||||
<Disabled />
|
|
||||||
<h1>EditableCard</h1>
|
|
||||||
<EditableCard />
|
|
||||||
<h1>Extra</h1>
|
|
||||||
<Extra />
|
|
||||||
<h1>Icon</h1>
|
|
||||||
<Icon />
|
|
||||||
<h1>Position</h1>
|
|
||||||
<Position />
|
|
||||||
<h1>Size</h1>
|
|
||||||
<Size />
|
|
||||||
<h1>Slide</h1>
|
|
||||||
<Slide/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
<script>
|
||||||
import Basic from './basic'
|
import Basic from './basic'
|
||||||
import CardTop from './card-top'
|
import CardTop from './card-top'
|
||||||
|
|
@ -36,24 +10,67 @@ import Icon from './icon'
|
||||||
import Position from './position'
|
import Position from './position'
|
||||||
import Size from './size'
|
import Size from './size'
|
||||||
import Slide from './slide'
|
import Slide from './slide'
|
||||||
|
import CN from '../index.zh-CN.md'
|
||||||
|
import US from '../index.en-US.md'
|
||||||
|
|
||||||
|
const md = {
|
||||||
|
cn: `# Tabs 标签页
|
||||||
|
|
||||||
|
选项卡切换组件。
|
||||||
|
|
||||||
|
## 何时使用
|
||||||
|
|
||||||
|
提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
|
||||||
|
|
||||||
|
Ant Design 依次提供了三级选项卡，分别用于不同的场景。
|
||||||
|
|
||||||
|
- 卡片式的页签，提供可关闭的样式，常用于容器顶部。
|
||||||
|
- 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。
|
||||||
|
- [RadioButton](#/cn/components/radio/components-radio-demo-radiobutton) 可作为更次级的页签来使用。
|
||||||
|
|
||||||
|
## 代码演示`,
|
||||||
|
us: `# Tabs
|
||||||
|
|
||||||
|
Tabs make it easy to switch between different views.
|
||||||
|
|
||||||
|
### When To Use
|
||||||
|
|
||||||
|
Ant Design has 3 types of Tabs for different situations.
|
||||||
|
|
||||||
|
- Card Tabs: for managing too many closeable views.
|
||||||
|
- Normal Tabs: for functional aspects of a page.
|
||||||
|
- [RadioButton](#/us/components/radio/components-radio-demo-radiobutton): for secondary tabs.
|
||||||
|
## Examples `,
|
||||||
|
}
|
||||||
export default {
|
export default {
|
||||||
category: 'Components',
|
category: 'Components',
|
||||||
subtitle: '标签页',
|
subtitle: '标签页',
|
||||||
type: 'Data Display',
|
type: 'Data Display',
|
||||||
title: 'Tabs',
|
title: 'Tabs',
|
||||||
cols: 1,
|
cols: 1,
|
||||||
components: {
|
render () {
|
||||||
Basic,
|
return (
|
||||||
CardTop,
|
<div>
|
||||||
Card,
|
<md cn={md.cn} us={md.us}/>
|
||||||
CustomAddTrigger,
|
<Basic />
|
||||||
Disabled,
|
<CardTop />
|
||||||
EditableCard,
|
<Card />
|
||||||
Extra,
|
<CustomAddTrigger />
|
||||||
Icon,
|
<Disabled />
|
||||||
Position,
|
<EditableCard />
|
||||||
Size,
|
<Extra />
|
||||||
Slide,
|
<Icon />
|
||||||
|
<Position />
|
||||||
|
<Size />
|
||||||
|
<Slide/>
|
||||||
|
<api>
|
||||||
|
<template slot='cn'>
|
||||||
|
<CN/>
|
||||||
|
</template>
|
||||||
|
<US/>
|
||||||
|
</api>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<cn>
|
||||||
|
#### 位置
|
||||||
|
有四个位置，`tabPosition="left|right|top|bottom"`。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Position
|
||||||
|
Tab's position: left, right, top or bottom.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div style="width: 500px">
|
||||||
|
<a-radio-group v-model="tabPosition" style="margin:8px">
|
||||||
|
<a-radio-button value="top">top</a-radio-button>
|
||||||
|
<a-radio-button value="bottom">bottom</a-radio-button>
|
||||||
|
<a-radio-button value="left">left</a-radio-button>
|
||||||
|
<a-radio-button value="right">right</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
<a-tabs defaultActiveKey="1" :tabPosition="tabPosition">
|
||||||
|
<a-tab-pane tab="Tab 1" key="1">Content of Tab 1</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 2" key="2">Content of Tab 2</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 3" key="3">Content of Tab 3</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
tabPosition: 'top',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
callback (val) {
|
||||||
|
console.log(val)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
<template>
|
|
||||||
<div style="width: 500px">
|
|
||||||
<RadioGroup v-model="tabPosition" style="margin:8px">
|
|
||||||
<RadioButton value="top">top</RadioButton>
|
|
||||||
<RadioButton value="bottom">bottom</RadioButton>
|
|
||||||
<RadioButton value="left">left</RadioButton>
|
|
||||||
<RadioButton value="right">right</RadioButton>
|
|
||||||
</RadioGroup>
|
|
||||||
<Tabs defaultActiveKey="1" :tabPosition="tabPosition">
|
|
||||||
<TabPane tab="Tab 1" key="1">Content of Tab 1</TabPane>
|
|
||||||
<TabPane tab="Tab 2" key="2">Content of Tab 2</TabPane>
|
|
||||||
<TabPane tab="Tab 3" key="3">Content of Tab 3</TabPane>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { Tabs, Radio } from 'antd'
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
tabPosition: 'top',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
callback (val) {
|
|
||||||
console.log(val)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Tabs,
|
|
||||||
TabPane: Tabs.TabPane,
|
|
||||||
Radio,
|
|
||||||
RadioGroup: Radio.Group,
|
|
||||||
RadioButton: Radio.Button,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<cn>
|
||||||
|
#### 大小
|
||||||
|
大号页签用在页头区域，小号用在弹出框等较狭窄的容器内。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Size
|
||||||
|
Large size tabs are usally used in page header, and small size could be used in Modal.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-radio-group v-model="size" style="margin-bottom: 16px">
|
||||||
|
<a-radio-button value="small">Small</a-radio-button>
|
||||||
|
<a-radio-button value="default">Default</a-radio-button>
|
||||||
|
<a-radio-button value="large">Large</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
<a-tabs defaultActiveKey="2" :size="size">
|
||||||
|
<a-tab-pane tab="Tab 1" key="1">Content of tab 1</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 2" key="2">Content of tab 2</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 3" key="3">Content of tab 3</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
size: 'small',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<RadioGroup v-model="size" style="margin-bottom: 16px">
|
|
||||||
<RadioButton value="small">Small</RadioButton>
|
|
||||||
<RadioButton value="default">Default</RadioButton>
|
|
||||||
<RadioButton value="large">Large</RadioButton>
|
|
||||||
</RadioGroup>
|
|
||||||
<Tabs defaultActiveKey="2" :size="size">
|
|
||||||
<TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
|
|
||||||
<TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
|
|
||||||
<TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { Tabs, Radio } from 'antd'
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
size: 'small',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Tabs,
|
|
||||||
TabPane: Tabs.TabPane,
|
|
||||||
RadioGroup: Radio.Group,
|
|
||||||
RadioButton: Radio.Button,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
<cn>
|
||||||
|
#### 滑动
|
||||||
|
可以左右、上下滑动，容纳更多标签。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Slide
|
||||||
|
Tab can be slide to left or right(up or down), which is used for a lot of tabs.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div style="width: 500px">
|
||||||
|
<a-radio-group v-model="mode" :style="{ marginBottom: '8px' }">
|
||||||
|
<a-radio-button value="top">Horizontal</a-radio-button>
|
||||||
|
<a-radio-button value="left">Vertical</a-radio-button>
|
||||||
|
</a-radio-group>
|
||||||
|
<a-tabs defaultActiveKey="1" :tabPosition="mode" :style="{ height: '200px'}" @prevClick="callback" @nextClick="callback">
|
||||||
|
<a-tab-pane tab="Tab 1" key="1">Content of tab 1</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 2" key="2">Content of tab 2</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 3" key="3">Content of tab 3</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 4" key="4">Content of tab 4</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 5" key="5">Content of tab 5</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 6" key="6">Content of tab 6</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 7" key="7">Content of tab 7</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 8" key="8">Content of tab 8</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 9" key="9">Content of tab 9</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 10" key="10">Content of tab 10</a-tab-pane>
|
||||||
|
<a-tab-pane tab="Tab 11" key="11">Content of tab 11</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
mode: 'top',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
callback (val) {
|
||||||
|
console.log(val)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
<template>
|
|
||||||
<div style="width: 500px">
|
|
||||||
<RadioGroup v-model="mode" :style="{ marginBottom: '8px' }">
|
|
||||||
<RadioButton value="top">Horizontal</RadioButton>
|
|
||||||
<RadioButton value="left">Vertical</RadioButton>
|
|
||||||
</RadioGroup>
|
|
||||||
<Tabs defaultActiveKey="1" :tabPosition="mode" :style="{ height: '200px'}" @prevClick="callback" @nextClick="callback">
|
|
||||||
<TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
|
|
||||||
<TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
|
|
||||||
<TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
|
|
||||||
<TabPane tab="Tab 4" key="4">Content of tab 4</TabPane>
|
|
||||||
<TabPane tab="Tab 5" key="5">Content of tab 5</TabPane>
|
|
||||||
<TabPane tab="Tab 6" key="6">Content of tab 6</TabPane>
|
|
||||||
<TabPane tab="Tab 7" key="7">Content of tab 7</TabPane>
|
|
||||||
<TabPane tab="Tab 8" key="8">Content of tab 8</TabPane>
|
|
||||||
<TabPane tab="Tab 9" key="9">Content of tab 9</TabPane>
|
|
||||||
<TabPane tab="Tab 10" key="10">Content of tab 10</TabPane>
|
|
||||||
<TabPane tab="Tab 11" key="11">Content of tab 11</TabPane>
|
|
||||||
</Tabs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { Tabs, Radio } from 'antd'
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
mode: 'top',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
callback (val) {
|
|
||||||
console.log(val)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Tabs,
|
|
||||||
TabPane: Tabs.TabPane,
|
|
||||||
Radio,
|
|
||||||
RadioGroup: Radio.Group,
|
|
||||||
RadioButton: Radio.Button,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Tabs
|
||||||
|
|
||||||
|
| Property | Description | Type | Default |
|
||||||
|
| -------- | ----------- | ---- | ------- |
|
||||||
|
| activeKey | Current TabPane's key | string | - |
|
||||||
|
| animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` |
|
||||||
|
| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set. | string | - |
|
||||||
|
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` |
|
||||||
|
| size | preset tab bar size | `large` \| `default` \| `small` | `default` |
|
||||||
|
| tabBarExtraContent | Extra content in tab bar | slot | - |
|
||||||
|
| tabBarStyle | Tab bar style object | object | - |
|
||||||
|
| tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` |
|
||||||
|
| type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` |
|
||||||
|
| tabBarGutter | The gap between tabs | number | - |
|
||||||
|
|
||||||
|
### Events
|
||||||
|
| Events Name | Description | Arguments |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| change | Callback executed when active tab is changed | Function(activeKey) {} |
|
||||||
|
| edit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (targetKey, action): void |
|
||||||
|
| nextClick | Callback executed when next button is clicked | Function |
|
||||||
|
| prevClick | Callback executed when prev button is clicked | Function |
|
||||||
|
| tabClick | Callback executed when tab is clicked | Function |
|
||||||
|
|
||||||
|
|
||||||
|
### Tabs.TabPane
|
||||||
|
|
||||||
|
| Property | Description | Type | Default |
|
||||||
|
| -------- | ----------- | ---- | ------- |
|
||||||
|
| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |
|
||||||
|
| key | TabPane's key | string | - |
|
||||||
|
| tab | Show text in TabPane's head | string\|slot | - |
|
||||||
|
|
@ -1,22 +1,3 @@
|
||||||
---
|
|
||||||
category: Components
|
|
||||||
subtitle: 标签页
|
|
||||||
type: Data Display
|
|
||||||
title: Tabs
|
|
||||||
cols: 1
|
|
||||||
---
|
|
||||||
|
|
||||||
选项卡切换组件。
|
|
||||||
|
|
||||||
## 何时使用
|
|
||||||
|
|
||||||
提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
|
|
||||||
|
|
||||||
Ant Design 依次提供了三级选项卡，分别用于不同的场景。
|
|
||||||
|
|
||||||
- 卡片式的页签，提供可关闭的样式，常用于容器顶部。
|
|
||||||
- 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。
|
|
||||||
- [RadioButton](#/cn/components/radio/components-radio-demo-radiobutton) 可作为更次级的页签来使用。
|
|
||||||
|
|
||||||
## API
|
## API
|
||||||
|
|
||||||
|
|
@ -28,21 +9,21 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
|
||||||
| animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false |
|
| animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false |
|
||||||
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 |
|
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 |
|
||||||
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |
|
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |
|
||||||
| size | 大小，提供 `large` `default` 和 `small` 三种大小，仅当 `type="line"` 时生效。 | string | 'default' |
|
| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | 'default' |
|
||||||
| tabBarExtraContent | tab bar 上额外的元素 | string\|Function\|slot | 无 |
|
| tabBarExtraContent | tab bar 上额外的元素 | slot | 无 |
|
||||||
| tabBarStyle | tab bar 的样式对象 | object | - |
|
| tabBarStyle | tab bar 的样式对象 | object | - |
|
||||||
| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | 'top' |
|
| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | 'top' |
|
||||||
| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | 'line' |
|
| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | 'line' |
|
||||||
| tabBarGutter | tabs 之间的间隙 | number | 无 |
|
| tabBarGutter | tabs 之间的间隙 | number | 无 |
|
||||||
|
|
||||||
|
### 事件
|
||||||
### 事件 emit
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
| --- | --- | --- |
|
||||||
| change | 切换面板的回调 | Function | 无 |
|
| change | 切换面板的回调 | Function(activeKey) {} |
|
||||||
| edit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | 无 |
|
| edit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void |
|
||||||
| nextClick | next 按钮被点击的回调 | Function | 无 |
|
| nextClick | next 按钮被点击的回调 | Function |
|
||||||
| prevClick | prev 按钮被点击的回调 | Function | 无 |
|
| prevClick | prev 按钮被点击的回调 | Function |
|
||||||
| tabClick | tab 被点击的回调 | Function | 无 |
|
| tabClick | tab 被点击的回调 | Function |
|
||||||
|
|
||||||
### Tabs.TabPane
|
### Tabs.TabPane
|
||||||
|
|
||||||
|
|
@ -50,4 +31,4 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
|
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
|
||||||
| key | 对应 activeKey | string | 无 |
|
| key | 对应 activeKey | string | 无 |
|
||||||
| tab | 选项卡头显示文字 | string\|Function\|slot | 无 |
|
| tab | 选项卡头显示文字 | string\|slot | 无 |
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
<cn>
|
||||||
|
#### 基本用法
|
||||||
|
基本标签的用法，可以通过添加 `closable` 变为可关闭标签。可关闭标签具有 `onClose` `afterClose` 两个事件。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### basic Usage
|
||||||
|
Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `onClose` `afterClose` events.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-tag>Tag 1</a-tag>
|
||||||
|
<a-tag><a href="https://github.com/vueComponent/ant-design">Link</a></a-tag>
|
||||||
|
<a-tag closable @close="log">Tag 2</a-tag>
|
||||||
|
<a-tag closable @close="preventDefault">Prevent Default</a-tag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
methods: {
|
||||||
|
log (e) {
|
||||||
|
console.log(e)
|
||||||
|
},
|
||||||
|
preventDefault (e) {
|
||||||
|
e.preventDefault()
|
||||||
|
console.log('Clicked! But prevent default.')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<Tag>Tag 1</Tag>
|
|
||||||
<Tag><a href="https://github.com/vueComponent/ant-design">Link</a></Tag>
|
|
||||||
<Tag closable @close="log">Tag 2</Tag>
|
|
||||||
<Tag closable @close="preventDefault">Prevent Default</Tag>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { Tag } from 'antd'
|
|
||||||
export default {
|
|
||||||
methods: {
|
|
||||||
log (e) {
|
|
||||||
console.log(e)
|
|
||||||
},
|
|
||||||
preventDefault (e) {
|
|
||||||
e.preventDefault()
|
|
||||||
console.log('Clicked! But prevent default.')
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Tag,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
<cn>
|
||||||
|
#### 可选择
|
||||||
|
可通过 `CheckableTag` 实现类似 Checkbox 的效果，点击切换选中效果。
|
||||||
|
> 该组件为完全受控组件，不支持非受控用法。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Checkable
|
||||||
|
`CheckableTag` works like Checkbox, click it to toggle checked state.
|
||||||
|
> it is an absolute controlled component and has no uncontrolled mode.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-checkable-tag v-model="checked1" @change="handleChange">Tag1</a-checkable-tag>
|
||||||
|
<a-checkable-tag v-model="checked2" @change="handleChange">Tag2</a-checkable-tag>
|
||||||
|
<a-checkable-tag v-model="checked3" @change="handleChange">Tag3</a-checkable-tag>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
checked1: false,
|
||||||
|
checked2: false,
|
||||||
|
checked3: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleChange (checked) {
|
||||||
|
console.log(checked)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<CheckableTag v-model="checked1" @change="handleChange">Tag1</CheckableTag>
|
|
||||||
<CheckableTag v-model="checked2" @change="handleChange">Tag2</CheckableTag>
|
|
||||||
<CheckableTag v-model="checked3" @change="handleChange">Tag3</CheckableTag>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { Tag } from 'antd'
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
checked1: false,
|
|
||||||
checked2: false,
|
|
||||||
checked3: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
handleChange (checked) {
|
|
||||||
console.log(checked)
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {
|
|
||||||
Tag,
|
|
||||||
CheckableTag: Tag.CheckableTag,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<cn>
|
||||||
|
#### 多彩标签
|
||||||
|
我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Colorful Tag
|
||||||
|
We preset a series of colorful tag style for different situation usage.
|
||||||
|
And you can always set it to a hex color string for custom color.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h4 style="margin-bottom: 16px">Presets:</h4>
|
||||||
|
<div>
|
||||||
|
<a-tag color="pink">pink</a-tag>
|
||||||
|
<a-tag color="red">red</a-tag>
|
||||||
|
<a-tag color="orange">orange</a-tag>
|
||||||
|
<a-tag color="green">green</a-tag>
|
||||||
|
<a-tag color="cyan">cyan</a-tag>
|
||||||
|
<a-tag color="blue">blue</a-tag>
|
||||||
|
<a-tag color="purple">purple</a-tag>
|
||||||
|
</div>
|
||||||
|
<h4 style="margin: '16px 0'">Custom:</h4>
|
||||||
|
<div>
|
||||||
|
<a-tag color="#f50">#f50</a-tag>
|
||||||
|
<a-tag color="#2db7f5">#2db7f5</a-tag>
|
||||||
|
<a-tag color="#87d068">#87d068</a-tag>
|
||||||
|
<a-tag color="#108ee9">#108ee9</a-tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<h4 style="margin-bottom: 16px">Presets:</h4>
|
|
||||||
<div>
|
|
||||||
<Tag color="pink">pink</Tag>
|
|
||||||
<Tag color="red">red</Tag>
|
|
||||||
<Tag color="orange">orange</Tag>
|
|
||||||
<Tag color="green">green</Tag>
|
|
||||||
<Tag color="cyan">cyan</Tag>
|
|
||||||
<Tag color="blue">blue</Tag>
|
|
||||||
<Tag color="purple">purple</Tag>
|
|
||||||
</div>
|
|
||||||
<h4 style="margin: '16px 0'">Custom:</h4>
|
|
||||||
<div>
|
|
||||||
<Tag color="#f50">#f50</Tag>
|
|
||||||
<Tag color="#2db7f5">#2db7f5</Tag>
|
|
||||||
<Tag color="#87d068">#87d068</Tag>
|
|
||||||
<Tag color="#108ee9">#108ee9</Tag>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { Tag } from 'antd'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
Tag,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,14 +1,26 @@
|
||||||
|
<cn>
|
||||||
|
#### 动态添加和删除
|
||||||
|
用数组生成一组标签，可以动态添加和删除，通过监听删除动画结束的事件 `afterClose` 实现。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Add & Remove Dynamically
|
||||||
|
Generating a set of Tags by array, you can add and remove dynamically.
|
||||||
|
It's based on `afterClose` event, which will be triggered while the close animation end.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<template v-for="(tag, index) in tags">
|
<template v-for="(tag, index) in tags">
|
||||||
<Tooltip v-if="tag.length > 20" :key="tag" :title="tag">
|
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
|
||||||
<Tag :key="tag" :closable="index !== 0" @afterClose="() => handleClose(tag)">
|
<a-tag :key="tag" :closable="index !== 0" @afterClose="() => handleClose(tag)">
|
||||||
{{`${tag.slice(0, 20)}...`}}
|
{{`${tag.slice(0, 20)}...`}}
|
||||||
</Tag>
|
</a-tag>
|
||||||
</Tooltip>
|
</a-tooltip>
|
||||||
<Tag v-else :key="tag" :closable="index !== 0" @afterClose="() => handleClose(tag)">
|
<a-tag v-else :key="tag" :closable="index !== 0" @afterClose="() => handleClose(tag)">
|
||||||
{{tag}}
|
{{tag}}
|
||||||
</Tag>
|
</a-tag>
|
||||||
</template>
|
</template>
|
||||||
<a-input
|
<a-input
|
||||||
v-if="inputVisible"
|
v-if="inputVisible"
|
||||||
|
|
@ -21,13 +33,12 @@
|
||||||
@blur="handleInputConfirm"
|
@blur="handleInputConfirm"
|
||||||
@keyup.enter="handleInputConfirm"
|
@keyup.enter="handleInputConfirm"
|
||||||
/>
|
/>
|
||||||
<Tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
|
<a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
|
||||||
<Icon type="plus" /> New Tag
|
<a-icon type="plus" /> New Tag
|
||||||
</Tag>
|
</a-tag>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { Tag, Tooltip, Icon } from 'antd'
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|
@ -68,10 +79,6 @@ export default {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {
|
|
||||||
Tag,
|
|
||||||
Tooltip,
|
|
||||||
Icon,
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
```
|
||||||
|
|
@ -1,19 +1,29 @@
|
||||||
|
<cn>
|
||||||
|
#### 热门标签
|
||||||
|
选择你感兴趣的话题。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Hot Tags
|
||||||
|
Select your favourite topics.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```html
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<strong :style="{ marginRight: 8 }">Categories:</strong>
|
<strong :style="{ marginRight: 8 }">Categories:</strong>
|
||||||
<template v-for=" tag in tags">
|
<template v-for=" tag in tags">
|
||||||
<CheckableTag
|
<a-checkable-tag
|
||||||
:key="tag"
|
:key="tag"
|
||||||
:checked="selectedTags.indexOf(tag) > -1"
|
:checked="selectedTags.indexOf(tag) > -1"
|
||||||
@change="(checked) => handleChange(tag, checked)"
|
@change="(checked) => handleChange(tag, checked)"
|
||||||
>
|
>
|
||||||
{{tag}}
|
{{tag}}
|
||||||
</CheckableTag>
|
</a-checkable-tag>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { Tag } from 'antd'
|
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|
@ -34,9 +44,6 @@ export default {
|
||||||
this.selectedTags = nextSelectedTags
|
this.selectedTags = nextSelectedTags
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {
|
|
||||||
Tag,
|
|
||||||
CheckableTag: Tag.CheckableTag,
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
```
|
||||||
|
|
@ -1,34 +1,56 @@
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<h1>Basic</h1>
|
|
||||||
<Basic />
|
|
||||||
<h1>Checkable</h1>
|
|
||||||
<Checkable />
|
|
||||||
<h1>Colorful</h1>
|
|
||||||
<Colorful />
|
|
||||||
<h1>Control</h1>
|
|
||||||
<Control />
|
|
||||||
<h1>HotTags</h1>
|
|
||||||
<HotTags />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
<script>
|
||||||
import Basic from './basic'
|
import Basic from './basic'
|
||||||
import Checkable from './checkable'
|
import Checkable from './checkable'
|
||||||
import Colorful from './colorful'
|
import Colorful from './colorful'
|
||||||
import Control from './control'
|
import Control from './control'
|
||||||
import HotTags from './hot-tags'
|
import HotTags from './hot-tags'
|
||||||
|
import CN from '../index.zh-CN.md'
|
||||||
|
import US from '../index.en-US.md'
|
||||||
|
|
||||||
|
const md = {
|
||||||
|
cn: `# 标签 Tag
|
||||||
|
|
||||||
|
进行标记和分类的小标签。
|
||||||
|
|
||||||
|
## 何时使用
|
||||||
|
|
||||||
|
- 用于标记事物的属性和维度。
|
||||||
|
- 进行分类。
|
||||||
|
|
||||||
|
## 代码演示`,
|
||||||
|
us: `# Tag
|
||||||
|
|
||||||
|
Tag for categorizing or markup.
|
||||||
|
|
||||||
|
## When To Use
|
||||||
|
|
||||||
|
- It can be used to tag by dimension or property.
|
||||||
|
|
||||||
|
- When categorizing.
|
||||||
|
## Examples `,
|
||||||
|
}
|
||||||
export default {
|
export default {
|
||||||
category: 'Components',
|
category: 'Components',
|
||||||
subtitle: '标签',
|
subtitle: '标签',
|
||||||
type: 'Data Display',
|
type: 'Data Display',
|
||||||
title: 'Tag',
|
title: 'Tag',
|
||||||
components: {
|
render () {
|
||||||
Basic,
|
return (
|
||||||
Checkable,
|
<div>
|
||||||
Colorful,
|
<md cn={md.cn} us={md.us}/>
|
||||||
Control,
|
<Basic />
|
||||||
HotTags,
|
<Checkable />
|
||||||
|
<Colorful />
|
||||||
|
<Control />
|
||||||
|
<HotTags />
|
||||||
|
<api>
|
||||||
|
<template slot='cn'>
|
||||||
|
<CN/>
|
||||||
|
</template>
|
||||||
|
<US/>
|
||||||
|
</api>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Tag
|
||||||
|
|
||||||
|
| Property | Description | Type | Default |
|
||||||
|
| -------- | ----------- | ---- | ------- |
|
||||||
|
| afterClose | Callback executed when close animation is completed | () => void | - |
|
||||||
|
| closable | Whether Tag can be closed | boolean | `false` |
|
||||||
|
| color | Color of the Tag | string | - |
|
||||||
|
|
||||||
|
### Tag Events
|
||||||
|
| Events Name | Description | Arguments |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| close | Callback executed when tag is closed | (e) => void |
|
||||||
|
|
||||||
|
### Tag.CheckableTag
|
||||||
|
|
||||||
|
| Property | Description | Type | Default |
|
||||||
|
| -------- | ----------- | ---- | ------- |
|
||||||
|
| checked | Checked status of Tag | boolean | `false` |
|
||||||
|
|
||||||
|
### Tag.CheckableTag Events
|
||||||
|
| Events Name | Description | Arguments |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| change | Callback executed when Tag is checked/unchecked | (checked) => void |
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Tag
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| afterClose | 关闭动画完成后的回调 | () => void | - |
|
||||||
|
| closable | 标签是否可以关闭 | boolean | false |
|
||||||
|
| color | 标签色 | string | - |
|
||||||
|
|
||||||
|
### 事件
|
||||||
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| close | 关闭时的回调 | (e) => void |
|
||||||
|
|
||||||
|
### Tag.CheckableTag
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| checked | 设置标签的选中状态 | boolean | false |
|
||||||
|
|
||||||
|
### 事件
|
||||||
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| change | 点击标签时触发的回调 | (checked) => void |
|
||||||
|
|
@ -7,10 +7,12 @@ const babelConfig = getBabelCommonConfig(false)
|
||||||
|
|
||||||
babelConfig.plugins.push(require.resolve('babel-plugin-syntax-dynamic-import'))
|
babelConfig.plugins.push(require.resolve('babel-plugin-syntax-dynamic-import'))
|
||||||
|
|
||||||
const fetch = (str, tag) => {
|
const fetch = (str, tag, scoped) => {
|
||||||
const $ = cheerio.load(str, { decodeEntities: false, xmlMode: true })
|
const $ = cheerio.load(str, { decodeEntities: false, xmlMode: true })
|
||||||
if (!tag) return str
|
if (!tag) return str
|
||||||
|
if (tag === 'style') {
|
||||||
|
return scoped ? $(`${tag}[scoped]`).html() : $(`${tag}`).not(`${tag}[scoped]`).html()
|
||||||
|
}
|
||||||
return $(tag).html()
|
return $(tag).html()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -53,6 +55,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
|
||||||
let template = ''
|
let template = ''
|
||||||
let script = ''
|
let script = ''
|
||||||
let style = ''
|
let style = ''
|
||||||
|
let scopedStyle = ''
|
||||||
let code = ''
|
let code = ''
|
||||||
tokens.forEach(token => {
|
tokens.forEach(token => {
|
||||||
if (token.type === 'html_block') {
|
if (token.type === 'html_block') {
|
||||||
|
|
@ -70,6 +73,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
|
||||||
template = fetch(token.content, 'template')
|
template = fetch(token.content, 'template')
|
||||||
script = fetch(token.content, 'script')
|
script = fetch(token.content, 'script')
|
||||||
style = fetch(token.content, 'style')
|
style = fetch(token.content, 'style')
|
||||||
|
scopedStyle = fetch(token.content, 'style', true)
|
||||||
token.content = ''
|
token.content = ''
|
||||||
token.type = 'html_block'
|
token.type = 'html_block'
|
||||||
}
|
}
|
||||||
|
|
@ -98,10 +102,15 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
|
||||||
</script>
|
</script>
|
||||||
` : ''
|
` : ''
|
||||||
newContent += style ? `
|
newContent += style ? `
|
||||||
<style scoped>
|
<style>
|
||||||
${style || ''}
|
${style || ''}
|
||||||
</style>
|
</style>
|
||||||
` : ''
|
` : ''
|
||||||
|
newContent += scopedStyle ? `
|
||||||
|
<style scoped>
|
||||||
|
${scopedStyle || ''}
|
||||||
|
</style>
|
||||||
|
` : ''
|
||||||
const t = new Token('html_block', '', 0)
|
const t = new Token('html_block', '', 0)
|
||||||
t.content = newContent
|
t.content = newContent
|
||||||
tokens.push(t)
|
tokens.push(t)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue