-
Notifications
You must be signed in to change notification settings - Fork 138
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(comp:tabs): supoort dataSource, removable, onAdd
- Loading branch information
Showing
43 changed files
with
828 additions
and
768 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,11 @@ | ||
| <template> | ||
| <IxTabs v-model:selectedKey="selectedKey"> | ||
| <IxTab key="tab1" title="Tab 1"> Content of Tab 1 </IxTab> | ||
| <IxTab key="tab2" title="Tab 2"> Content of Tab 2 </IxTab> | ||
| <IxTab key="tab3" title="Tab 3"> Content of Tab 3 </IxTab> | ||
| <IxTabs :dataSource="dataSource"> | ||
| <template #content="{ key }"> Content of Tab {{ key }} </template> | ||
| </IxTabs> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { ref } from 'vue' | ||
| const selectedKey = ref('tab1') | ||
| const dataSource = Array.from({ length: 3 }).map((_, index) => { | ||
| return { key: index, title: `Tab ${index}` } | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,7 +2,7 @@ | |
| title: | ||
| zh: 自定义标签 | ||
| en: Custom tab | ||
| order: 5 | ||
| order: 12 | ||
| --- | ||
|
|
||
| ## zh | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,32 @@ | ||
| <template> | ||
| <IxTabs v-model:selectedKey="selectedKey" type="segment" mode="primary"> | ||
| <IxTab key="tab1"> | ||
| <template #title> | ||
| <IxIcon name="file"></IxIcon> | ||
| Tab 1 | ||
| </template> | ||
| Content of Tab 1 | ||
| </IxTab> | ||
| <IxTab key="tab2"> | ||
| <template #title> | ||
| <IxIcon name="file"></IxIcon> | ||
| Tab 2 | ||
| </template> | ||
| Content of Tab 2 | ||
| </IxTab> | ||
| <IxTab key="tab3"> | ||
| <template #title> | ||
| <IxIcon name="file"></IxIcon> | ||
| Tab 3 | ||
| </template> | ||
| Content of Tab 3 | ||
| </IxTab> | ||
| <IxTabs v-model:selectedKey="selectedKey" :dataSource="dataSource"> | ||
| <template #title="{ title }"> Default {{ title }}</template> | ||
| <template #content="{ key }"> Default content of Tab {{ key }} </template> | ||
| <template #customTitle="{ title }"> Custom {{ title }}</template> | ||
| <template #customContent="{ key }"> Custom content of Tab {{ key }} </template> | ||
| </IxTabs> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { ref } from 'vue' | ||
| const selectedKey = ref('tab1') | ||
| import { type TabsData } from '@idux/components/tabs' | ||
| const selectedKey = ref(0) | ||
| const dataSource: TabsData[] = [ | ||
| { | ||
| key: 0, | ||
| title: 'Tab 0', | ||
| }, | ||
| { | ||
| key: 1, | ||
| title: 'Tab 1', | ||
| }, | ||
| { | ||
| key: 2, | ||
| title: 'Tab 2', | ||
| customTitle: 'customTitle', | ||
| customContent: 'customContent', | ||
| }, | ||
| ] | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,22 @@ | ||
| <template> | ||
| <IxSpace vertical :size="40"> | ||
| <IxTabs v-model:selectedKey="selectedKey"> | ||
| <IxTab key="tab1" title="Tab 1"> Content of Tab 1 </IxTab> | ||
| <IxTab key="tab2" title="Tab 2" disabled> Content of Tab 2 </IxTab> | ||
| <IxTab key="tab3" title="Tab 3"> Content of Tab 3 </IxTab> | ||
| <IxSpace size="lg" vertical> | ||
| <IxTabs v-model:selectedKey="selectedKey" :dataSource="dataSource"> | ||
| <template #content="{ key }"> Content of Tab {{ key }} </template> | ||
| </IxTabs> | ||
| <IxTabs v-model:selectedKey="selectedKey" type="line"> | ||
| <IxTab key="tab1" title="Tab 1"> Content of Tab 1 </IxTab> | ||
| <IxTab key="tab2" title="Tab 2" disabled> Content of Tab 2 </IxTab> | ||
| <IxTab key="tab3" title="Tab 3"> Content of Tab 3 </IxTab> | ||
| <IxTabs v-model:selectedKey="selectedKey" :dataSource="dataSource" type="line"> | ||
| <template #content="{ key }"> Content of Tab {{ key }} </template> | ||
| </IxTabs> | ||
| <IxTabs v-model:selectedKey="selectedKey" type="segment"> | ||
| <IxTab key="tab1" title="Tab 1"> Content of Tab 1 </IxTab> | ||
| <IxTab key="tab2" title="Tab 2" disabled> Content of Tab 2 </IxTab> | ||
| <IxTab key="tab3" title="Tab 3"> Content of Tab 3 </IxTab> | ||
| <IxTabs v-model:selectedKey="selectedKey" :dataSource="dataSource" type="segment"> | ||
| <template #content="{ key }"> Content of Tab {{ key }} </template> | ||
| </IxTabs> | ||
| </IxSpace> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { ref } from 'vue' | ||
| const selectedKey = ref('tab1') | ||
| const selectedKey = ref(0) | ||
| const dataSource = Array.from({ length: 3 }).map((_, index) => { | ||
| return { key: index, title: `Tab ${index}` } | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| title: | ||
| zh: 新增和关闭 | ||
| en: Add and Close | ||
| order: 10 | ||
| --- | ||
|
|
||
| ## zh | ||
|
|
||
| 卡片类型标签页，默认为此类型 | ||
|
|
||
| ## en | ||
|
|
||
| The simplest usage. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <template> | ||
| <IxTabs v-model:selectedKey="selectedKey" :dataSource="dataSource" addable closable @add="onAdd"> | ||
| <template #content="{ key }"> Content of Tab {{ key }} </template> | ||
| </IxTabs> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { ref } from 'vue' | ||
| const selectedKey = ref(0) | ||
| const dataSource = ref( | ||
| Array.from({ length: 3 }).map((_, index) => { | ||
| return { key: index, title: `Tab ${index}` } | ||
| }), | ||
| ) | ||
| const onAdd = () => { | ||
| const newKey = dataSource.value.length | ||
| dataSource.value = [...dataSource.value, { key: newKey, title: `Tab ${newKey}` }] | ||
| selectedKey.value = newKey | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,7 +7,7 @@ order: 1 | |
|
|
||
| ## zh | ||
|
|
||
| 下划线类型标签页 | ||
| 通过设置 `type` 为 `line`, 展示下划线类型标签页 | ||
|
|
||
| ## en | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,11 @@ | ||
| <template> | ||
| <IxTabs v-model:selectedKey="selectedKey" type="line"> | ||
| <IxTab key="tab1" title="Tab 1"> Content of Tab 1 </IxTab> | ||
| <IxTab key="tab2" title="Tab 2"> Content of Tab 2 </IxTab> | ||
| <IxTab key="tab3" title="Tab 3"> Content of Tab 3 </IxTab> | ||
| <IxTabs :dataSource="dataSource" type="line"> | ||
| <template #content="{ key }"> Content of Tab {{ key }} </template> | ||
| </IxTabs> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { ref } from 'vue' | ||
| const selectedKey = ref('tab1') | ||
| const dataSource = Array.from({ length: 3 }).map((_, index) => { | ||
| return { key: index, title: `Tab ${index}` } | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,21 @@ | ||
| <template> | ||
| <IxRadioGroup v-model:value="placement"> | ||
| <IxRadio value="top">top</IxRadio> | ||
| <IxRadio value="start">start</IxRadio> | ||
| <IxRadio value="end">end</IxRadio> | ||
| <IxRadio value="bottom">bottom</IxRadio> | ||
| </IxRadioGroup> | ||
| <IxTabs v-model:selectedKey="selectedKey" type="line" :placement="placement"> | ||
| <IxTab key="tab1" title="Tab 1"> Content of Tab 1 </IxTab> | ||
| <IxTab key="tab2" title="Tab 2"> Content of Tab 2 </IxTab> | ||
| <IxTab key="tab3" title="Tab 3"> Content of Tab 3 </IxTab> | ||
| </IxTabs> | ||
| <IxSpace size="lg" vertical> | ||
| <IxRadioGroup v-model:value="placement" :dataSource="placements"> </IxRadioGroup> | ||
| <IxTabs v-model:selectedKey="selectedKey" :dataSource="dataSource" :placement="placement" type="line"> | ||
| <template #content="{ key }"> Content of Tab {{ key }} </template> | ||
| </IxTabs> | ||
| </IxSpace> | ||
| </template> | ||
| <script setup lang="ts"> | ||
| import type { TabsPlacement } from '@idux/components/tabs' | ||
| import { ref } from 'vue' | ||
| const placement = ref<TabsPlacement>('top') | ||
| const selectedKey = ref('tab1') | ||
| const placements = ['top', 'start', 'end', 'bottom'].map(item => ({ key: item, label: item })) | ||
| const selectedKey = ref(0) | ||
| const dataSource = Array.from({ length: 3 }).map((_, index) => { | ||
| return { key: index, title: `Tab ${index}` } | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,7 +2,7 @@ | |
| title: | ||
| zh: 滑动 | ||
| en: Basic usage | ||
| order: 6 | ||
| order: 10 | ||
| --- | ||
|
|
||
| ## zh | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,39 +1,26 @@ | ||
| <template> | ||
| <IxSpace vertical :size="40" block> | ||
| <IxTabs v-model:selectedKey="selectedKey" style="width: 410px"> | ||
| <IxTab v-for="panel in panels" :key="panel" :title="'Tab ' + panel"> Content of Tab {{ panel }} </IxTab> | ||
| <IxSpace block size="lg" vertical> | ||
| <IxTabs v-model:selectedKey="selectedKey" :dataSource="dataSource"> | ||
| <template #content="{ key }"> Content of Tab {{ key }} </template> | ||
| </IxTabs> | ||
| <IxTabs v-model:selectedKey="selectedKey" style="width: 410px" type="line"> | ||
| <IxTab v-for="panel in panels" :key="panel" :title="'Tab ' + panel"> Content of Tab {{ panel }} </IxTab> | ||
| <IxTabs v-model:selectedKey="selectedKey" :dataSource="dataSource" type="line"> | ||
| <template #content="{ key }"> Content of Tab {{ key }} </template> | ||
| </IxTabs> | ||
| <IxTabs v-model:selectedKey="selectedKey" style="height: 200px" type="line" placement="start"> | ||
| <IxTab v-for="panel in panels" :key="panel" :title="'Tab ' + panel"> Content of Tab {{ panel }} </IxTab> | ||
| </IxTabs> | ||
| <IxTabs v-model:selectedKey="selectedKey" style="width: 410px" type="segment"> | ||
| <IxTab v-for="panel in panels" :key="panel" :title="'Tab ' + panel"> Content of Tab {{ panel }} </IxTab> | ||
| <IxTabs v-model:selectedKey="selectedKey" :dataSource="dataSource" type="segment"> | ||
| <template #content="{ key }"> Content of Tab {{ key }} </template> | ||
| </IxTabs> | ||
| <IxSpace align="center"> | ||
| <IxButton @click="addTab">addTab</IxButton> | ||
| <IxButton @click="closeTab">closeTab</IxButton> | ||
| 移动到第几个：<IxInputNumber v-model:value="selectedKey" :max="20" :min="1"></IxInputNumber> | ||
| <IxInputNumber v-model:value="selectedKey" :max="98" :min="0"></IxInputNumber> | ||
| </IxSpace> | ||
| </IxSpace> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { ref } from 'vue' | ||
| const selectedKey = ref(7) | ||
| const selectedKey = ref(0) | ||
| const panels = ref([1, 2, 3, 4, 5, 6, 7]) | ||
| const addTab = () => { | ||
| const key = (panels.value[panels.value.length - 1] || 0) + 1 | ||
| panels.value.push(key) | ||
| selectedKey.value = key | ||
| } | ||
| const closeTab = () => { | ||
| panels.value.pop() | ||
| const key = panels.value[panels.value.length - 1] | ||
| selectedKey.value = key | ||
| } | ||
| const dataSource = Array.from({ length: 99 }).map((_, index) => { | ||
| return { key: index, title: `Tab ${index}` } | ||
| }) | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.