From 2eea08af23ded4ba141d34af4209823b11c26986 Mon Sep 17 00:00:00 2001 From: baiyaaaaa Date: Thu, 22 Dec 2016 00:02:51 +0800 Subject: [PATCH] fix tabs initial with bug & improve docs --- examples/docs/en-US/tabs.md | 38 ++++-- examples/docs/zh-CN/tabs.md | 67 ++++++++--- package.json | 2 +- packages/tabs/src/tab-pane.vue | 65 +++-------- packages/tabs/src/tabs.vue | 175 +++++++++++++++------------- packages/theme-default/src/tabs.css | 4 - test/unit/specs/tabs.spec.js | 10 +- yarn.lock | 6 +- 8 files changed, 198 insertions(+), 169 deletions(-) diff --git a/examples/docs/en-US/tabs.md b/examples/docs/en-US/tabs.md index 557390758..9a9b23d48 100644 --- a/examples/docs/en-US/tabs.md +++ b/examples/docs/en-US/tabs.md @@ -2,7 +2,18 @@ export default { data() { return { - activeName: 'first' + activeName: 'first', + activeName2: 'first', + tabs: [{ + title: 'Tab 1', + name: '1', + content: 'Tab 1 content' + }, { + title: 'Tab 2', + name: '2', + content: 'Tab 2 content' + }], + tabIndex: 2 } }, methods: { @@ -27,11 +38,11 @@ Divide data collections which are related yet belong to different types. Basic and concise tabs. -:::demo Tabs provide a selective card functionality and it can be achieved by just using `el-tabs` and child element `el-tab-pane`. In these two elements, we provide a list of attributes. The `label` in `el-tab-pane` determines the label of selective cards, and you can write content in the label. In this example, we add a `active-name` attribute indicating the active card in `el-tabs`, which can take a `String` value. In the `el-tab-pane` you can set corresponding `name` attribute, and if there is no `name`, the default sequence is `1`/`2`/`3`/`4`. In this example, the selected card is card 2. If `name` is omitted, setting `active-name` to `2` can reach the same goal. +:::demo Tabs provide a selective card functionality. By default the first tab is selected as active, and you can activate any tab by setting the `value` attribute. ```html