github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add tabs and tag docs

pull/9/head
tjz 2018-03-22 22:17:35 +08:00
parent ea23f5841f
commit b3c750d8ce
39 changed files with 688 additions and 560 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
components/auto-complete/demo/index.vue
View File

@ -46,55 +46,4 @@ export default {
},
}
</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>

15
components/index.js
View File

@ -40,13 +40,24 @@ export { default as Tooltip } from './tooltip'
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 Badge } from './badge'
export { default as Tabs } from './tabs'
import Tabs from './tabs'
const TabPane = Tabs.TabPane
export {
Tabs,
TabPane,
}
import Input from './input'

19
components/modal/demo/index.vue
View File

@ -61,23 +61,4 @@ export default {
#components-modal-demo .ant-btn {
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>

4
components/switch/index.en-US.md
View File

@ -11,10 +11,10 @@
| size | the size of the `Switch`, options: `default` `small` | string | default |
| unCheckedChildren | content to be shown when the state is unchecked | string\|slot | |
### events
### Events
| 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

2
components/switch/index.zh-CN.md
View File

@ -14,7 +14,7 @@
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| change | 变化时回调函数 | Function(checked:Boolean) | |
| change | 变化时回调函数 | Function(checked:Boolean) |
## 方法

39
components/tabs/demo/basic.md Normal file
View File

@ -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>
```

31
components/tabs/demo/basic.vue
View File

@ -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>

34
components/tabs/demo/card-top.vue → components/tabs/demo/card-top.md
View File

@ -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>
<div class="card-container">
<Tabs type="card">
<TabPane tab="Tab Title 1" key="1">
<a-tabs type="card">
<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>
</TabPane>
<TabPane tab="Tab Title 2" key="2">
</a-tab-pane>
<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>
</TabPane>
<TabPane tab="Tab Title 3" key="3">
</a-tab-pane>
<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>
</TabPane>
</Tabs>
</a-tab-pane>
</a-tabs>
</div>
</template>
<script>
import { Tabs } from 'antd'
export default {
data () {
return {
@ -31,10 +42,6 @@ export default {
console.log(key)
},
},
components: {
Tabs,
TabPane: Tabs.TabPane,
},
}
</script>
<style>
@ -67,3 +74,4 @@ export default {
background: #fff;
}
</style>
```

33
components/tabs/demo/card.md Normal file
View File

@ -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>
```

25
components/tabs/demo/card.vue
View File

@ -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>

26
components/tabs/demo/custom-add-trigger.vue → components/tabs/demo/custom-add-trigger.md
View File

@ -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>
<div>
<div :style="{ marginBottom: '16px' }">
<a-button @click="add">ADD</a-button>
</div>
<Tabs
<a-tabs
hideAdd
v-model="activeKey"
type="editable-card"
@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}}
</TabPane>
</Tabs>
</a-tab-pane>
</a-tabs>
</div>
</template>
<script>
import { Tabs, Button } from 'antd'
export default {
data () {
const panes = [
@ -60,10 +70,6 @@ export default {
this.activeKey = activeKey
},
},
components: {
Tabs,
TabPane: Tabs.TabPane,
},
}
</script>
```

19
components/tabs/demo/disabled.md Normal file
View File

@ -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>
```

16
components/tabs/demo/disabled.vue
View File

@ -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>

27
components/tabs/demo/editable-card.vue → components/tabs/demo/editable-card.md
View File

@ -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>
<Tabs
<a-tabs
v-model="activeKey"
type="editable-card"
@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}}
</TabPane>
</Tabs>
</a-tab-pane>
</a-tabs>
</template>
<script>
import { Tabs } from 'antd'
export default {
data () {
const panes = [
@ -53,9 +65,6 @@ export default {
this.activeKey = activeKey
},
},
components: {
Tabs,
TabPane: Tabs.TabPane,
},
}
</script>
```

20
components/tabs/demo/extra.md Normal file
View File

@ -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>
```

31
components/tabs/demo/extra.vue
View File

@ -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>

30
components/tabs/demo/icon.md Normal file
View File

@ -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>
```

43
components/tabs/demo/icon.vue
View File

@ -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>

93
components/tabs/demo/index.vue
View File

@ -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>
import Basic from './basic'
import CardTop from './card-top'
@ -36,24 +10,67 @@ import Icon from './icon'
import Position from './position'
import Size from './size'
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 {
category: 'Components',
subtitle: '标签页',
type: 'Data Display',
title: 'Tabs',
cols: 1,
components: {
Basic,
CardTop,
Card,
CustomAddTrigger,
Disabled,
EditableCard,
Extra,
Icon,
Position,
Size,
Slide,
render () {
return (
<div>
<md cn={md.cn} us={md.us}/>
<Basic />
<CardTop />
<Card />
<CustomAddTrigger />
<Disabled />
<EditableCard />
<Extra />
<Icon />
<Position />
<Size />
<Slide/>
<api>
<template slot='cn'>
<CN/>
</template>
<US/>
</api>
</div>
)
},
}
</script>

42
components/tabs/demo/position.md Normal file
View File

@ -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>
```

38
components/tabs/demo/position.vue
View File

@ -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>

35
components/tabs/demo/size.md Normal file
View File

@ -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>
```

30
components/tabs/demo/size.vue
View File

@ -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>

48
components/tabs/demo/slide.md Normal file
View File

@ -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>
```

44
components/tabs/demo/slide.vue
View File

@ -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>

35
components/tabs/index.en-US.md Normal file
View File

@ -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 | - |

41
components/tabs/index.zh-CN.md
View File

@ -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
@ -28,21 +9,21 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
| animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false |
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 |
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |
| size | 大小，提供 `large` `default` 和 `small` 三种大小，仅当 `type="line"` 时生效。 | string | 'default' |
| tabBarExtraContent | tab bar 上额外的元素 | string\|Function\|slot | 无 |
| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | 'default' |
| tabBarExtraContent | tab bar 上额外的元素 | slot | 无 |
| tabBarStyle | tab bar 的样式对象 | object | - |
| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | 'top' |
| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | 'line' |
| tabBarGutter | tabs 之间的间隙 | number | 无 |
### 事件 emit
| 参数 | 说明 | 类型 | 默认值 |
| change | 切换面板的回调 | Function | 无 |
| edit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | 无 |
| nextClick | next 按钮被点击的回调 | Function | 无 |
| prevClick | prev 按钮被点击的回调 | Function | 无 |
| tabClick | tab 被点击的回调 | Function | 无 |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| change | 切换面板的回调 | Function(activeKey) {} |
| edit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void |
| nextClick | next 按钮被点击的回调 | Function |
| prevClick | prev 按钮被点击的回调 | Function |
| tabClick | tab 被点击的回调 | Function |
### Tabs.TabPane
@ -50,4 +31,4 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
| --- | --- | --- | --- |
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
| key | 对应 activeKey | string | 无 |
| tab | 选项卡头显示文字 | string\|Function\|slot | 无 |
| tab | 选项卡头显示文字 | string\|slot | 无 |

34
components/tag/demo/basic.md Normal file
View File

@ -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>
```

25
components/tag/demo/basic.vue
View File

@ -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>

37
components/tag/demo/checkable.md Normal file
View File

@ -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>
```

28
components/tag/demo/checkable.vue
View File

@ -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>

35
components/tag/demo/colorful.md Normal file
View File

@ -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>
```

29
components/tag/demo/colorful.vue
View File

@ -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>

37
components/tag/demo/control.vue → components/tag/demo/control.md
View File

@ -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>
<div>
<template v-for="(tag, index) in tags">
<Tooltip v-if="tag.length > 20" :key="tag" :title="tag">
<Tag :key="tag" :closable="index !== 0" @afterClose="() => handleClose(tag)">
<a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
<a-tag :key="tag" :closable="index !== 0" @afterClose="() => handleClose(tag)">
{{`${tag.slice(0, 20)}...`}}
</Tag>
</Tooltip>
<Tag v-else :key="tag" :closable="index !== 0" @afterClose="() => handleClose(tag)">
</a-tag>
</a-tooltip>
<a-tag v-else :key="tag" :closable="index !== 0" @afterClose="() => handleClose(tag)">
{{tag}}
</Tag>
</a-tag>
</template>
<a-input
v-if="inputVisible"
@ -21,13 +33,12 @@
@blur="handleInputConfirm"
@keyup.enter="handleInputConfirm"
/>
<Tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
<Icon type="plus" /> New Tag
</Tag>
<a-tag v-else @click="showInput" style="background: #fff; borderStyle: dashed;">
<a-icon type="plus" /> New Tag
</a-tag>
</div>
</template>
<script>
import { Tag, Tooltip, Icon } from 'antd'
export default {
data () {
return {
@ -68,10 +79,6 @@ export default {
})
},
},
components: {
Tag,
Tooltip,
Icon,
},
}
</script>
```

21
components/tag/demo/hot-tags.vue → components/tag/demo/hot-tags.md
View File

@ -1,19 +1,29 @@
<cn>
#### 热门标签
选择你感兴趣的话题。
</cn>
<us>
#### Hot Tags
Select your favourite topics.
</us>
```html
<template>
<div>
<strong :style="{ marginRight: 8 }">Categories:</strong>
<template v-for=" tag in tags">
<CheckableTag
<a-checkable-tag
:key="tag"
:checked="selectedTags.indexOf(tag) > -1"
@change="(checked) => handleChange(tag, checked)"
>
{{tag}}
</CheckableTag>
</a-checkable-tag>
</template>
</div>
</template>
<script>
import { Tag } from 'antd'
export default {
data () {
return {
@ -34,9 +44,6 @@ export default {
this.selectedTags = nextSelectedTags
},
},
components: {
Tag,
CheckableTag: Tag.CheckableTag,
},
}
</script>
```

62
components/tag/demo/index.vue
View File

@ -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>
import Basic from './basic'
import Checkable from './checkable'
import Colorful from './colorful'
import Control from './control'
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 {
category: 'Components',
subtitle: '标签',
type: 'Data Display',
title: 'Tag',
components: {
Basic,
Checkable,
Colorful,
Control,
HotTags,
render () {
return (
<div>
<md cn={md.cn} us={md.us}/>
<Basic />
<Checkable />
<Colorful />
<Control />
<HotTags />
<api>
<template slot='cn'>
<CN/>
</template>
<US/>
</api>
</div>
)
},
}
</script>

27
components/tag/index.en-US.md Normal file
View File

@ -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 |

27
components/tag/index.zh-CN.md Normal file
View File

@ -0,0 +1,27 @@
## API
### Tag
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| afterClose | 关闭动画完成后的回调 | () => void | - |
| closable | 标签是否可以关闭 | boolean | false |
| color | 标签色 | string | - |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| close | 关闭时的回调 | (e) => void |
### Tag.CheckableTag
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| checked | 设置标签的选中状态 | boolean | false |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| change | 点击标签时触发的回调 | (checked) => void |

15
webpack.base.config.js
View File

@ -7,10 +7,12 @@ const babelConfig = getBabelCommonConfig(false)
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 })
if (!tag) return str
if (tag === 'style') {
return scoped ? $(`${tag}[scoped]`).html() : $(`${tag}`).not(`${tag}[scoped]`).html()
}
return $(tag).html()
}
@ -53,6 +55,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
let template = ''
let script = ''
let style = ''
let scopedStyle = ''
let code = ''
tokens.forEach(token => {
if (token.type === 'html_block') {
@ -70,6 +73,7 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
template = fetch(token.content, 'template')
script = fetch(token.content, 'script')
style = fetch(token.content, 'style')
scopedStyle = fetch(token.content, 'style', true)
token.content = ''
token.type = 'html_block'
}
@ -98,10 +102,15 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
</script>
` : ''
newContent += style ? `
<style scoped>
<style>
${style || ''}
</style>
` : ''
newContent += scopedStyle ? `
<style scoped>
${scopedStyle || ''}
</style>
` : ''
const t = new Token('html_block', '', 0)
t.content = newContent
tokens.push(t)