Noospic
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(tabs): [tabs] Fix testing issues and documentation (#1018)

This commit is contained in:
chenxi-20 2023-12-04 19:19:51 +08:00 committed by GitHub
parent c917776bcf
commit 5a56dce8db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
70 changed files with 373 additions and 372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
examples/sites/demos/mobile-first/app/tabs/basic-usage.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

6
examples/sites/demos/mobile-first/app/tabs/before-leave.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName" :before-leave="beforeLeave" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

4
examples/sites/demos/mobile-first/app/tabs/change-title.vue
View File

@ -2,8 +2,8 @@
<div>
<tiny-button @click="handleClick"> 改变标题 </tiny-button>
<tiny-tabs v-model="activeName">
<tiny-tab-item :title="title" name="first"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="second"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item :title="title" name="first"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="second"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</div>
</template>

6
examples/sites/demos/mobile-first/app/tabs/custom-tab-content.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

6
examples/sites/demos/mobile-first/app/tabs/custom-tab-title.vue
View File

@ -16,10 +16,10 @@
<span class="inline-block">数据组件</span>
</div>
</template>
<div>数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等</div>
<div>数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。</div>
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

20
examples/sites/demos/mobile-first/app/tabs/position-bottom.vue
View File

@ -20,28 +20,28 @@ export default {
tabs3: [
{
name: 'navigation1',
title: 'Navigation1',
content: 'Navigation1'
title: 'Navigation 1',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
]
}

20
examples/sites/demos/mobile-first/app/tabs/position-left.vue
View File

@ -20,28 +20,28 @@ export default {
tabs3: [
{
name: 'navigation1',
title: 'Navigation1',
content: 'Navigation1'
title: 'Navigation 1',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
]
}

20
examples/sites/demos/mobile-first/app/tabs/position-right.vue
View File

@ -20,28 +20,28 @@ export default {
tabs3: [
{
name: 'navigation1',
title: 'Navigation1',
content: 'Navigation1'
title: 'Navigation 1',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
]
}

20
examples/sites/demos/mobile-first/app/tabs/position.vue
View File

@ -20,28 +20,28 @@ export default {
tabs3: [
{
name: 'navigation1',
title: 'Navigation1',
content: 'Navigation1'
title: 'Navigation 1',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
]
}

6
examples/sites/demos/mobile-first/app/tabs/prevent-tab-switching.vue
View File

@ -5,10 +5,10 @@
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</div>
</template>

6
examples/sites/demos/mobile-first/app/tabs/stretch-wh.vue
View File

@ -4,10 +4,10 @@
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

20
examples/sites/demos/mobile-first/app/tabs/tab-style-bordercard.vue
View File

@ -20,28 +20,28 @@ export default {
tabs3: [
{
name: 'navigation1',
title: 'Navigation1',
content: 'Navigation1'
title: 'Navigation 1',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
]
}

20
examples/sites/demos/mobile-first/app/tabs/tab-style-card.vue
View File

@ -20,28 +20,28 @@ export default {
tabs3: [
{
name: 'navigation1',
title: 'Navigation1',
content: 'Navigation1'
title: 'Navigation 1',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
]
}

8
examples/sites/demos/mobile-first/app/tabs/tabdata-title.vue
View File

@ -32,22 +32,22 @@ export default {
{
title: '数据组件',
name: 'second',
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'third',
content: ' 导航组件,帮助网站访问者浏览站点的组件.'
content: ' 导航组件,帮助网站访问者浏览站点的组件。'
},
{
title: '业务组件',
name: 'fourth',
content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
},
{
title: '其他组件',
name: 'fifth.',
content: '其他组件，更多种类组件'
content: '其他组件，更多种类组件。'
}
]

2
examples/sites/demos/mobile-first/app/tabs/tabs-draggable.vue
View File

@ -38,7 +38,7 @@ export default {
{
title: 'Tab 1',
name: '1',
content: 'Tab content '
content: 'Tab 1 content '
},
{
title: 'Tab 2',

6
examples/sites/demos/mobile-first/app/tabs/tabs-events-add.vue
View File

@ -25,17 +25,17 @@ export default {
{
title: '数据组件',
name: 'second',
content: '数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
content: '数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'third',
content: '导航组件,帮助网站访问者浏览站点的组件.'
content: '导航组件,帮助网站访问者浏览站点的组件。'
},
{
title: '业务组件',
name: 'fourth',
content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
}
],
activeName: 'second',

6
examples/sites/demos/mobile-first/app/tabs/tabs-events-click.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName" @click="click" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

8
examples/sites/demos/mobile-first/app/tabs/tabs-events-close.vue
View File

@ -26,22 +26,22 @@ export default {
{
title: '数据组件',
name: 'second',
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'third',
content: ' 导航组件,帮助网站访问者浏览站点的组件.'
content: ' 导航组件,帮助网站访问者浏览站点的组件。'
},
{
title: '业务组件',
name: 'fourth',
content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
},
{
title: '其他组件',
name: 'fifth',
content: '其他组件，更多种类组件'
content: '其他组件，更多种类组件。'
}
]
}

8
examples/sites/demos/mobile-first/app/tabs/tabs-events-edit.vue
View File

@ -26,22 +26,22 @@ export default {
{
title: '数据组件',
name: 'second',
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'third',
content: ' 导航组件,帮助网站访问者浏览站点的组件.'
content: ' 导航组件,帮助网站访问者浏览站点的组件。'
},
{
title: '业务组件',
name: 'fourth',
content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
},
{
title: '其他组件',
name: 'fifth',
content: '其他组件，更多种类组件'
content: '其他组件，更多种类组件。'
}
]
}

16
examples/sites/demos/mobile-first/app/tabs/tabs-separator.vue
View File

@ -11,10 +11,10 @@
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
<br /><br /><br /><br />
<tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" class="w-1/2" show-more-tabs>
@ -45,22 +45,22 @@ export default {
{
title: '数据组件',
name: 'second',
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'third',
content: ' 导航组件,帮助网站访问者浏览站点的组件.'
content: ' 导航组件,帮助网站访问者浏览站点的组件。'
},
{
title: '业务组件',
name: 'fourth',
content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
},
{
title: '其他组件',
name: 'fifth',
content: '其他组件，更多种类组件'
content: '其他组件，更多种类组件。'
}
],
activeName1: 'second',
@ -68,7 +68,7 @@ export default {
{
title: 'Tab 1',
name: '1',
content: 'Tab content '
content: 'Tab 1 content '
},
{
title: 'Tab 2',

6
examples/sites/demos/mobile-first/app/tabs/tabs-size.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName" size="small" :with-close="true" :with-add="true" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

4
examples/sites/demos/mobile-first/app/tabs/tabs-tabs.vue
View File

@ -41,12 +41,12 @@ export default {
{
title: '数据组件',
name: 'f2',
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'f3',
content: ' 导航组件,帮助网站访问者浏览站点的组件. '
content: ' 导航组件,帮助网站访问者浏览站点的组件。 '
}
]
}

2
examples/sites/demos/mobile-first/app/tabs/with-add.vue
View File

@ -20,7 +20,7 @@ export default {
{
title: 'Tab 1',
name: '1',
content: 'Tab content '
content: 'Tab 1 content '
},
{
title: 'Tab 2',

6
examples/sites/demos/mobile/app/tabs/before-leave.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName" :before-leave="beforeLeave" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

14
examples/sites/demos/mobile/app/tabs/tabs-events.vue
View File

@ -18,10 +18,10 @@
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</div>
</template>
@ -49,22 +49,22 @@ export default {
{
title: '数据组件',
name: 'second',
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'third',
content: ' 导航组件,帮助网站访问者浏览站点的组件.'
content: ' 导航组件,帮助网站访问者浏览站点的组件。'
},
{
title: '业务组件',
name: 'fourth',
content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
},
{
title: '其他组件',
name: 'fifth.',
content: '其他组件，更多种类组件'
content: '其他组件，更多种类组件。'
}
]
}

8
examples/sites/demos/pc/app/tabs/basic-usage-composition-api.vue
View File

@ -1,11 +1,11 @@
<template>
<tiny-tabs v-model="activeName">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。</tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。</tiny-tab-item>
</tiny-tabs>
</template>

8
examples/sites/demos/pc/app/tabs/basic-usage.vue
View File

@ -1,11 +1,11 @@
<template>
<tiny-tabs v-model="activeName">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。</tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。</tiny-tab-item>
</tiny-tabs>
</template>

6
examples/sites/demos/pc/app/tabs/before-leave-composition-api.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName" :before-leave="beforeLeave" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

6
examples/sites/demos/pc/app/tabs/before-leave.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName" :before-leave="beforeLeave" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

2
examples/sites/demos/pc/app/tabs/custom-more-icon-composition-api.vue
View File

@ -18,7 +18,7 @@ const Tabs = ref([
{
title: 'Tab 1',
name: '1',
content: 'Tab content '
content: 'Tab 1 content '
},
{
title: 'Tab 2',

2
examples/sites/demos/pc/app/tabs/custom-more-icon.vue
View File

@ -25,7 +25,7 @@ export default {
{
title: 'Tab 1',
name: '1',
content: 'Tab content '
content: 'Tab 1 content '
},
{
title: 'Tab 2',

6
examples/sites/demos/pc/app/tabs/custom-tab-content-composition-api.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

6
examples/sites/demos/pc/app/tabs/custom-tab-content.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

6
examples/sites/demos/pc/app/tabs/custom-tab-title-composition-api.vue
View File

@ -16,10 +16,10 @@
<span>数据组件</span>
</div>
</template>
<div>数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等</div>
<div>数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。</div>
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

6
examples/sites/demos/pc/app/tabs/custom-tab-title.vue
View File

@ -16,10 +16,10 @@
<span>数据组件</span>
</div>
</template>
<div>数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等</div>
<div>数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。</div>
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

8
examples/sites/demos/pc/app/tabs/lazy-composition-api.vue
View File

@ -4,10 +4,12 @@
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" lazy name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" lazy name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" lazy name="fourth">
业务组件,与业务紧密相关实现某种业务功能的组件集。
</tiny-tab-item>
<tiny-tab-item title="导航组件" lazy name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" lazy name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
</tiny-tabs>
</template>

8
examples/sites/demos/pc/app/tabs/lazy.vue
View File

@ -4,10 +4,12 @@
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" lazy name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" lazy name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" lazy name="fourth">
业务组件,与业务紧密相关实现某种业务功能的组件集。
</tiny-tab-item>
<tiny-tab-item title="导航组件" lazy name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" lazy name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
</tiny-tabs>
</template>

39
examples/sites/demos/pc/app/tabs/position-composition-api.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="tab-demo-position">
<div class="mb10">
<tiny-radio v-model="position" label="top">top显示</tiny-radio>
<tiny-radio v-model="position" label="bottom">bottom显示</tiny-radio>
<tiny-radio v-model="position" label="left">left显示</tiny-radio>
<tiny-radio v-model="position" label="right">right显示</tiny-radio>
</div>
<tiny-radio-group v-model="position" class="mb10">
<tiny-radio-button label="top">top 显示</tiny-radio-button>
<tiny-radio-button label="bottom">bottom 显示</tiny-radio-button>
<tiny-radio-button label="left">left 显示</tiny-radio-button>
<tiny-radio-button label="right">right 显示</tiny-radio-button>
</tiny-radio-group>
<tiny-tabs v-model="activeName4" tab-style="card" :position="position">
<tiny-tab-item v-for="item in tabs3" :key="item.name" :title="item.title" :name="item.name">
{{ item.content }}
@ -16,35 +16,40 @@
<script setup lang="jsx">
import { ref } from 'vue'
import { Tabs as TinyTabs, TabItem as TinyTabItem, Radio as TinyRadio } from '@opentiny/vue'
import {
Tabs as TinyTabs,
TabItem as TinyTabItem,
RadioGroup as TinyRadioGroup,
RadioButton as TinyRadioButton
} from '@opentiny/vue'
const activeName4 = ref('navigation1')
const position = ref('left')
const tabs3 = ref([
{
name: 'navigation1',
title: 'Navigation1',
content: 'Navigation1'
title: 'Navigation 1',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
])
</script>

8
examples/sites/demos/pc/app/tabs/position.spec.ts
View File

@ -11,7 +11,7 @@ test('位置：四种显示', async ({ page }) => {
// left 显示
const header = tabs.locator('.tiny-tabs__header')
const item2 = tabs.getByRole('tab').nth(1)
const item2 = tabs.getByRole('tab', { name: 'Navigation 2' })
const content = tabs.getByRole('tabpanel')
const { width, height } = await header.boundingBox()
@ -27,21 +27,21 @@ test('位置：四种显示', async ({ page }) => {
await expect(content).toHaveText(/2/)
// top显示
await page.getByRole('radio', { name: 'top显示' }).click()
await page.getByRole('radio', { name: 'top 显示' }).filter({ hasText: 'top 显示' }).click()
await expect(tabs).toHaveClass(/tiny-tabs--top/)
await expect(tabsList).toHaveCount(2)
await expect(top).toHaveClass(/tiny-tabs__header/)
await expect(bottom).toHaveClass('tiny-tabs__content')
// bottom显示
await page.getByRole('radio', { name: 'bottom显示' }).click()
await page.getByRole('radio', { name: 'bottom 显示' }).filter({ hasText: 'bottom 显示' }).click()
await expect(tabs).toHaveClass(/tiny-tabs--bottom/)
await expect(tabsList).toHaveCount(2)
await expect(top).toHaveClass('tiny-tabs__content')
await expect(bottom).toHaveClass(/tiny-tabs__header/)
// right显示
await page.getByRole('radio', { name: 'right显示' }).click()
await page.getByRole('radio', { name: 'right 显示' }).filter({ hasText: 'right 显示' }).click()
await expect(tabs).toHaveClass(/tiny-tabs--right/)
await expect(tabsList).toHaveCount(2)
await expect(top).toHaveClass(/tiny-tabs__header/)

37
examples/sites/demos/pc/app/tabs/position.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="tab-demo-position">
<div class="mb10">
<tiny-radio v-model="position" label="top">top显示</tiny-radio>
<tiny-radio v-model="position" label="bottom">bottom显示</tiny-radio>
<tiny-radio v-model="position" label="left">left显示</tiny-radio>
<tiny-radio v-model="position" label="right">right显示</tiny-radio>
</div>
<tiny-radio-group v-model="position" class="mb10">
<tiny-radio-button label="top">top 显示</tiny-radio-button>
<tiny-radio-button label="bottom">bottom 显示</tiny-radio-button>
<tiny-radio-button label="left">left 显示</tiny-radio-button>
<tiny-radio-button label="right">right 显示</tiny-radio-button>
</tiny-radio-group>
<tiny-tabs v-model="activeName4" tab-style="card" :position="position">
<tiny-tab-item v-for="item in tabs3" :key="item.name" :title="item.title" :name="item.name">
{{ item.content }}
@ -15,13 +15,14 @@
</template>
<script lang="jsx">
import { Tabs, TabItem, Radio } from '@opentiny/vue'
import { Tabs, TabItem, RadioGroup, RadioButton } from '@opentiny/vue'
export default {
components: {
TinyTabs: Tabs,
TinyTabItem: TabItem,
TinyRadio: Radio
TinyRadioGroup: RadioGroup,
TinyRadioButton: RadioButton
},
data() {
return {
@ -30,28 +31,28 @@ export default {
tabs3: [
{
name: 'navigation1',
title: 'Navigation1',
content: 'Navigation1'
title: 'Navigation 1',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
]
}

6
examples/sites/demos/pc/app/tabs/prevent-tab-switching-composition-api.vue
View File

@ -5,10 +5,10 @@
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</div>
</template>

6
examples/sites/demos/pc/app/tabs/prevent-tab-switching.vue
View File

@ -5,10 +5,10 @@
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</div>
</template>

6
examples/sites/demos/pc/app/tabs/stretch-wh-composition-api.vue
View File

@ -4,10 +4,10 @@
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

6
examples/sites/demos/pc/app/tabs/stretch-wh.vue
View File

@ -4,10 +4,10 @@
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

20
examples/sites/demos/pc/app/tabs/tab-style-bordercard-composition-api.vue
View File

@ -14,28 +14,28 @@ const activeName4 = ref('navigation1')
const tabs3 = ref([
{
name: 'navigation1',
title: 'Navigation1',
content: 'Navigation1'
title: 'Navigation 1',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
])
</script>

20
examples/sites/demos/pc/app/tabs/tab-style-bordercard.vue
View File

@ -20,28 +20,28 @@ export default {
tabs3: [
{
name: 'navigation1',
title: 'Navigation1',
content: 'Navigation1'
title: 'Navigation 1',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
]
}

2
examples/sites/demos/pc/app/tabs/tab-style-card-composition-api.vue
View File

@ -13,7 +13,7 @@ import { Tabs as TinyTabs, TabItem as TinyTabItem } from '@opentiny/vue'
const setTabs3 = () => {
const arr = []
for (let i = 1; i <= 5; i++) {
const text = `Navigation${i}`
const text = `Navigation ${i}`
arr.push({
name: `navigation${i}`,
title: text,

2
examples/sites/demos/pc/app/tabs/tab-style-card.vue
View File

@ -18,7 +18,7 @@ export default {
const setTabs3 = () => {
const arr = []
for (let i = 1; i <= 5; i++) {
const text = `Navigation${i}`
const text = `Navigation ${i}`
arr.push({
name: `navigation${i}`,
title: text,

2
examples/sites/demos/pc/app/tabs/tabs-draggable-composition-api.vue
View File

@ -29,7 +29,7 @@ const Tabs = ref([
{
title: 'Tab 1',
name: '1',
content: 'Tab content '
content: 'Tab 1 content '
},
{
title: 'Tab 2',

8
examples/sites/demos/pc/app/tabs/tabs-draggable.spec.ts
View File

@ -12,17 +12,11 @@ test('可拖拽', async ({ page }) => {
for (let i = 0; i < 3; ++i) {
await expect(items.nth(i)).toHaveText(`Tab ${i + 1}`)
}
await page.getByRole('tab', { name: 'Tab 1' }).hover()
await page.mouse.down()
await page.mouse.move(box2.x + box2.width / 2, box2.y + box2.height / 2)
await page.mouse.up()
await page.waitForTimeout(200)
await page.getByRole('tab', { name: 'Tab 1' }).hover()
await page.mouse.down()
await page.mouse.move(box3.x + box3.width / 2, box3.y + box3.height / 2)
await page.mouse.up()
await page.waitForTimeout(200)
for (let i = 0; i < 3; ++i) {
await expect(items.nth(i)).toHaveText(`Tab ${arr2[i]}`)
}

2
examples/sites/demos/pc/app/tabs/tabs-draggable.vue
View File

@ -35,7 +35,7 @@ export default {
{
title: 'Tab 1',
name: '1',
content: 'Tab content '
content: 'Tab 1 content '
},
{
title: 'Tab 2',

6
examples/sites/demos/pc/app/tabs/tabs-events-click-composition-api.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName" @click="click" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

6
examples/sites/demos/pc/app/tabs/tabs-events-click.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName" @click="click" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

8
examples/sites/demos/pc/app/tabs/tabs-events-close-composition-api.vue
View File

@ -20,22 +20,22 @@ const Tabs = ref([
{
title: '数据组件',
name: 'second',
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'third',
content: ' 导航组件,帮助网站访问者浏览站点的组件.'
content: ' 导航组件,帮助网站访问者浏览站点的组件。'
},
{
title: '业务组件',
name: 'fourth',
content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
},
{
title: '其他组件',
name: 'fifth',
content: '其他组件，更多种类组件'
content: '其他组件，更多种类组件。'
}
])
const instance = getCurrentInstance()

8
examples/sites/demos/pc/app/tabs/tabs-events-close.vue
View File

@ -26,22 +26,22 @@ export default {
{
title: '数据组件',
name: 'second',
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'third',
content: ' 导航组件,帮助网站访问者浏览站点的组件.'
content: ' 导航组件,帮助网站访问者浏览站点的组件。'
},
{
title: '业务组件',
name: 'fourth',
content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
},
{
title: '其他组件',
name: 'fifth',
content: '其他组件，更多种类组件'
content: '其他组件，更多种类组件。'
}
]
}

8
examples/sites/demos/pc/app/tabs/tabs-events-edit-composition-api.vue
View File

@ -20,22 +20,22 @@ const Tabs = ref([
{
title: '数据组件',
name: 'second',
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'third',
content: ' 导航组件,帮助网站访问者浏览站点的组件.'
content: ' 导航组件,帮助网站访问者浏览站点的组件。'
},
{
title: '业务组件',
name: 'fourth',
content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
},
{
title: '其他组件',
name: 'fifth',
content: '其他组件，更多种类组件'
content: '其他组件，更多种类组件。'
}
])
const instance = getCurrentInstance()

8
examples/sites/demos/pc/app/tabs/tabs-events-edit.vue
View File

@ -26,22 +26,22 @@ export default {
{
title: '数据组件',
name: 'second',
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等'
content: ' 数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。'
},
{
title: '导航组件',
name: 'third',
content: ' 导航组件,帮助网站访问者浏览站点的组件.'
content: ' 导航组件,帮助网站访问者浏览站点的组件。'
},
{
title: '业务组件',
name: 'fourth',
content: '业务组件,与业务紧密相关实现某种业务功能的组件集'
content: '业务组件,与业务紧密相关实现某种业务功能的组件集。'
},
{
title: '其他组件',
name: 'fifth',
content: '其他组件，更多种类组件'
content: '其他组件，更多种类组件。'
}
]
}

14
examples/sites/demos/pc/app/tabs/tabs-separator-composition-api.vue
View File

@ -5,10 +5,10 @@
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
<br /><br /><br /><br />
<tiny-tabs v-model="activeName2" separator>
@ -16,10 +16,10 @@
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
<br /><br /><br /><br />
<tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" style="width: 500px" show-more-tabs>
@ -41,7 +41,7 @@ const Tabs = reactive([
{
title: 'Tab 1',
name: '1',
content: 'Tab content '
content: 'Tab 1 content '
},
{
title: 'Tab 2',

14
examples/sites/demos/pc/app/tabs/tabs-separator.vue
View File

@ -5,10 +5,10 @@
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
<br /><br /><br /><br />
<tiny-tabs v-model="activeName2" separator>
@ -16,10 +16,10 @@
表单组件,具有与用户交互，并可完成数据采集功能的控件。
</tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
<br /><br /><br /><br />
<tiny-tabs separator :editable="false" :with-add="true" @add="handleadd" style="width: 500px" show-more-tabs>
@ -46,7 +46,7 @@ export default {
{
title: 'Tab 1',
name: '1',
content: 'Tab content '
content: 'Tab 1 content '
},
{
title: 'Tab 2',

6
examples/sites/demos/pc/app/tabs/tabs-size-composition-api.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName" size="small" :with-close="true" :with-add="true" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

6
examples/sites/demos/pc/app/tabs/tabs-size.vue
View File

@ -2,10 +2,10 @@
<tiny-tabs v-model="activeName" size="small" :with-close="true" :with-add="true" tab-style="card">
<tiny-tab-item title="表单组件" name="first"> 表单组件,具有与用户交互，并可完成数据采集功能的控件。 </tiny-tab-item>
<tiny-tab-item title="数据组件" name="second">
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等
数据组件,提供了非常强大数据表格功能，在Grid可以展示数据列表，可以对数据列表进行选择、编辑等。
</tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件. </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集 </tiny-tab-item>
<tiny-tab-item title="导航组件" name="third"> 导航组件,帮助网站访问者浏览站点的组件。 </tiny-tab-item>
<tiny-tab-item title="业务组件" name="fourth"> 业务组件,与业务紧密相关实现某种业务功能的组件集。 </tiny-tab-item>
</tiny-tabs>
</template>

30
examples/sites/demos/pc/app/tabs/tooltip-composition-api.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="tab-demo-position">
<div class="mb10">
<tiny-switch v-model="value" @change="handleChange"></tiny-switch> 当前tooltip-config是{{
<div class="mb10 tip">
<tiny-switch v-model="value" @change="handleChange" class="mr10"></tiny-switch>当前tooltip-config是{{
value ? 'tooltip配置' : '字符串title'
}}
}}。
</div>
<tiny-tabs v-model="activeName4" tab-style="card" position="left" :tooltip-config="tooltipConfig">
<tiny-tab-item v-for="item in tabs3" :key="item.name" :title="item.title" :name="item.name">
@ -23,28 +23,28 @@ const value = true
const tabs3 = ref([
{
name: 'navigation1',
title: 'Navigation1(蒸羊羔蒸熊掌蒸鹿尾，可以试着将tooltip-config设置为字符串title)',
content: 'Navigation1'
title: 'Navigation 1(蒸羊羔蒸熊掌蒸鹿尾，可以试着将tooltip-config设置为字符串title)',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
])
@ -59,4 +59,8 @@ const handleChange = (value) => {
.tab-demo-position {
min-height: 250px;
}
.tip {
display: flex;
align-items: center;
}
</style>

30
examples/sites/demos/pc/app/tabs/tooltip.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="tab-demo-position">
<div class="mb10">
<tiny-switch v-model="value" @change="handleChange"></tiny-switch> 当前tooltip-config是{{
<div class="mb10 tip">
<tiny-switch v-model="value" @change="handleChange" class="mr10"></tiny-switch>当前tooltip-config是{{
value ? 'tooltip配置' : '字符串title'
}}
}}。
</div>
<tiny-tabs v-model="activeName4" tab-style="card" position="left" :tooltip-config="tooltipConfig">
<tiny-tab-item v-for="item in tabs3" :key="item.name" :title="item.title" :name="item.name">
@ -29,28 +29,28 @@ export default {
tabs3: [
{
name: 'navigation1',
title: 'Navigation1(蒸羊羔蒸熊掌蒸鹿尾，可以试着将tooltip-config设置为字符串title)',
content: 'Navigation1'
title: 'Navigation 1(蒸羊羔蒸熊掌蒸鹿尾，可以试着将tooltip-config设置为字符串title)',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
]
}
@ -69,4 +69,8 @@ export default {
.tab-demo-position {
min-height: 250px;
}
.tip {
display: flex;
align-items: center;
}
</style>

70
examples/sites/demos/pc/app/tabs/webdoc/tabs.js
View File

@ -115,41 +115,6 @@ export default {
},
'codeFiles': ['stretch-wh.vue']
},
{
'demoId': 'tabs-draggable',
'name': { 'zh-CN': '拖拽', 'en-US': 'Drag' },
'desc': {
'zh-CN': `<div class="tip custom-block"><p class="custom-block-title"> 通过 <code>drop-config</code> 设置 <code>Sortable</code> 排序插件；<br/>
<code>tab-drag-start</code> 监听拖拽开始事件；<br/>
<code>tab-drag-over</code> 监听拖拽中事件；<br/>
<code>tab-drag-end</code> 监听拖拽结束事件，以此改变页签项顺序。</p></div>`,
'en-US': `<div class="tip custom-block"><p class="custom-block-title">Set the <code>Sortable</code> sorting plugin through <code>drop configuration</code> <br />
<code>tab-drag-start</code> Listen for drag start events<br />
<code>tab-drag-over</code> Listen for dragging events<br />
<code>tab-drag-end</code> Listen for drag end events to change the order of tags.</p></div>`
},
'codeFiles': ['tabs-draggable.vue']
},
{
'demoId': 'tabs-events-click',
'name': { 'zh-CN': '点击事件', 'en-US': 'Click Event' },
'desc': {
'zh-CN': '通过 <code>click</code> 监听单击页签项事件。',
'en-US': 'Listen for tag item click events through <code>click</code> .'
},
'codeFiles': ['tabs-events-click.vue']
},
{
'demoId': 'tabs-events-edit',
'name': { 'zh-CN': '编辑事件', 'en-US': 'Edit Event' },
'desc': {
'zh-CN':
'通过 <code>editable</code> 设置同时显示 <code>删除</code> 和 <code>添加</code> 按钮， <code>edit</code> 监听这两类按钮的点击事件。',
'en-US':
'By setting <code>edit</code> to display both <code>delete</code> and <code>add</code> buttons, <code>edit</code> listens for click events of these two types of buttons.'
},
'codeFiles': ['tabs-events-edit.vue']
},
{
'demoId': 'custom-tab-title',
'name': { 'zh-CN': '定义页签项标题', 'en-US': 'Custom Tab Item Title' },
@ -185,6 +150,41 @@ export default {
'The Grid component needs to set <code>:auto-resize="true"</code> to adapt to the corresponding changes of the parent element <code>TabItem</code> .'
},
'codeFiles': ['show-different-grid-data.vue']
},
{
'demoId': 'tabs-draggable',
'name': { 'zh-CN': '拖拽', 'en-US': 'Drag' },
'desc': {
'zh-CN': `<div class="tip custom-block"><p class="custom-block-title"> 通过 <code>drop-config</code> 设置 <code>Sortable</code> 排序插件；<br/>
<code>tab-drag-start</code> 监听拖拽开始事件；<br/>
<code>tab-drag-over</code> 监听拖拽中事件；<br/>
<code>tab-drag-end</code> 监听拖拽结束事件，以此改变页签项顺序。</p></div>`,
'en-US': `<div class="tip custom-block"><p class="custom-block-title">Set the <code>Sortable</code> sorting plugin through <code>drop configuration</code> <br />
<code>tab-drag-start</code> Listen for drag start events<br />
<code>tab-drag-over</code> Listen for dragging events<br />
<code>tab-drag-end</code> Listen for drag end events to change the order of tags.</p></div>`
},
'codeFiles': ['tabs-draggable.vue']
},
{
'demoId': 'tabs-events-click',
'name': { 'zh-CN': '点击事件', 'en-US': 'Click Event' },
'desc': {
'zh-CN': '通过 <code>click</code> 监听单击页签项事件。',
'en-US': 'Listen for tag item click events through <code>click</code> .'
},
'codeFiles': ['tabs-events-click.vue']
},
{
'demoId': 'tabs-events-edit',
'name': { 'zh-CN': '编辑事件', 'en-US': 'Edit Event' },
'desc': {
'zh-CN':
'通过 <code>editable</code> 设置同时显示 <code>删除</code> 和 <code>添加</code> 按钮， <code>edit</code> 监听这两类按钮的点击事件。',
'en-US':
'By setting <code>edit</code> to display both <code>delete</code> and <code>add</code> buttons, <code>edit</code> listens for click events of these two types of buttons.'
},
'codeFiles': ['tabs-events-edit.vue']
}
],
apis: [

2
examples/sites/demos/pc/app/tabs/with-add-composition-api.vue
View File

@ -21,7 +21,7 @@ const Tabs = ref([
{
title: 'Tab 1',
name: '1',
content: 'Tab content '
content: 'Tab 1 content '
},
{
title: 'Tab 2',

2
examples/sites/demos/pc/app/tabs/with-add.vue
View File

@ -27,7 +27,7 @@ export default {
{
title: 'Tab 1',
name: '1',
content: 'Tab content '
content: 'Tab 1 content '
},
{
title: 'Tab 2',

13
packages/theme/src/tabs/index.less
View File

@ -330,6 +330,7 @@
&__content {
position: relative;
margin: var(--ti-tabs-content-margin-vertical) var(--ti-tabs-content-margin-horizontal);
// aurora新增
font-size: var(--ti-tabs-content-font-size);
@ -483,14 +484,6 @@
border-top: 1px solid var(--ti-tabs-border-color);
box-shadow: none;
& > .@{tabs-prefix-cls}__content {
padding: 0px 24px 15px;
.@{tabs-prefix-cls}__content {
padding: 15px 0;
}
}
&.@{tabs-prefix-cls}--top {
& > .@{tabs-prefix-cls}__header {
background-color: var(--ti-tabs-header-dark-bg-color);
@ -1248,10 +1241,6 @@
}
}
.@{tab-pane-prefix-cls} {
padding: var(--ti-tabs-content-padding-vertical) var(--ti-tabs-content-padding-horizontal);
}
// 动效
.slideInLeft-transition,
.slideInRight-transition {

4
packages/theme/src/tabs/smb-theme.js
View File

@ -10,6 +10,6 @@ export const tinyTabsSmbTheme = {
'ti-tabs-more-icon-height': 'calc(var(--ti-common-space-base) * 13)',
'ti-tabs-more-left-box-height': 'calc(var(--ti-common-size-base) * 13)',
'ti-tabs-dropdown-more-margin-top': 'var(--ti-common-space-base)',
'ti-tabs-content-padding-vertical': 'var(--ti-common-space-8x)',
'ti-tabs-content-padding-horizontal': 'var(--ti-common-space-0)'
'ti-tabs-content-margin-vertical': 'var(--ti-common-space-8x)',
'ti-tabs-content-margin-horizontal': 'var(--ti-common-space-0)'
}

8
packages/theme/src/tabs/vars.less
View File

@ -141,10 +141,10 @@
--ti-tabs-more-left-box-height: var(--ti-common-size-10x, 40px);
// 头部更多按钮左侧盒子阴影
--ti-tabs-more-left-box-shadow: -3px 0px 4px 0px rgba(0, 0, 0, 0.08);
// 内容垂直内边距
--ti-tabs-content-padding-vertical: calc(var(--ti-common-space-base, 4px) * 3.75);
// 内容水平内边距
--ti-tabs-content-padding-horizontal: var(--ti-common-space-6x, 24px);
// 内容垂直外边距
--ti-tabs-content-margin-vertical: calc(var(--ti-common-space-base, 4px) * 3.75);
// 内容水平外边距
--ti-tabs-content-margin-horizontal: var(--ti-common-space-6x, 24px);
// buttoncard类型标签栏背景色
--ti-tabs-button-card-nav-bg-color: rgba(0, 0, 0, 0.05);
// buttoncard类型选项文本色

20
packages/vue/src/tabs/__tests__/tabs.test.tsx
View File

@ -8,28 +8,28 @@ const activeName = 'navigation1'
const data = reactive([
{
name: 'navigation1',
title: 'Navigation1',
content: 'Navigation1'
title: 'Navigation 1',
content: 'Navigation 1'
},
{
name: 'navigation2',
title: 'Navigation2',
content: 'Navigation2'
title: 'Navigation 2',
content: 'Navigation 2'
},
{
name: 'navigation3',
title: 'Navigation3',
content: 'Navigation3'
title: 'Navigation 3',
content: 'Navigation 3'
},
{
name: 'navigation4',
title: 'Navigation4',
content: 'Navigation4'
title: 'Navigation 4',
content: 'Navigation 4'
},
{
name: 'navigation5',
title: 'Navigation5',
content: 'Navigation5'
title: 'Navigation 5',
content: 'Navigation 5'
}
])