mirror of
https://gitee.com/vant-contrib/vant.git
synced 2026-07-13 01:11:07 +08:00
Compare commits
5 Commits
9e0b10309f
...
1f6faa93cb
| Author | SHA1 | Date | |
|---|---|---|---|
|
1f6faa93cb | ||
|
|
55303595af | ||
|
|
fa5e4e2591 | ||
|
|
4e8ad01cfc | ||
|
1f772ad232 |
@ -96,7 +96,7 @@ Vant 3 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).
|
||||
| Project | Description |
|
||||
| --- | --- |
|
||||
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant |
|
||||
| [mxdi9i7/vant-react](https://github.com/mxdi9i7/vant-react) | Mobile UI Components built on React and TS, inspired by Vant |
|
||||
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | React mobile UI Components based on Vant |
|
||||
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
|
||||
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
|
||||
| [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
|
||||
|
||||
@ -104,7 +104,7 @@ Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致
|
||||
| 项目 | 描述 |
|
||||
| --- | --- |
|
||||
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | 参照 Vant 打造的 React 框架移动端组件库 |
|
||||
| [mxdi9i7/vant-react](https://github.com/mxdi9i7/vant-react) | 基于 React 和 TS 构建的移动端组件库 |
|
||||
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | 参照 Vant 打造的 React 框架移动端组件库 |
|
||||
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Vant 支付宝小程序版 |
|
||||
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
|
||||
| [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vant/cli",
|
||||
"version": "4.0.0-rc.4",
|
||||
"version": "4.0.0-rc.5",
|
||||
"type": "module",
|
||||
"main": "lib/index.js",
|
||||
"typings": "lib/index.d.ts",
|
||||
|
||||
@ -3,7 +3,9 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title><%= title %></title>
|
||||
<% if (description) { %>
|
||||
<meta name="description" content="<%= description %>" />
|
||||
<% } %>
|
||||
<link rel="icon" type="image/png" href="<%= logo %>" />
|
||||
<meta
|
||||
name="viewport"
|
||||
|
||||
@ -3,7 +3,9 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title><%- title %></title>
|
||||
<% if (description) { %>
|
||||
<meta name="description" content="<%- description %>" />
|
||||
<% } %>
|
||||
<link rel="icon" type="image/png" href="<%- logo %>" />
|
||||
<meta
|
||||
name="viewport"
|
||||
|
||||
@ -136,6 +136,9 @@ export function getViteConfigForSiteDev(): InlineConfig {
|
||||
data: {
|
||||
...siteConfig,
|
||||
title,
|
||||
// `description` is used by the HTML ejs template,
|
||||
// so it needs to be written explicitly here to avoid error: description is not defined
|
||||
description: siteConfig.description,
|
||||
baiduAnalytics,
|
||||
enableVConsole,
|
||||
meta: getHTMLMeta(vantConfig),
|
||||
|
||||
@ -48,7 +48,7 @@ Vant 3 supports modern browsers and Chrome >= 51、iOS >= 10.0 (same as Vue 3).
|
||||
| Project | Description |
|
||||
| --- | --- |
|
||||
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | React mobile UI Components based on Vant |
|
||||
| [mxdi9i7/vant-react](https://github.com/mxdi9i7/vant-react) | Mobile UI Components built on React and TS, inspired by Vant |
|
||||
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | React mobile UI Components based on Vant |
|
||||
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Alipay MiniProgram UI |
|
||||
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro |
|
||||
| [vant-theme](https://github.com/Aisen60/vant-theme) | Online theme preview built on Vant UI |
|
||||
|
||||
@ -62,7 +62,7 @@ Vant 3 支持现代浏览器以及 Chrome >= 51、iOS >= 10.0（与 Vue 3 一致
|
||||
| 项目 | 描述 |
|
||||
| --- | --- |
|
||||
| [3lang3/react-vant](https://github.com/3lang3/react-vant) | 参照 Vant 打造的 React 移动端组件库 |
|
||||
| [mxdi9i7/vant-react](https://github.com/mxdi9i7/vant-react) | 基于 React 和 TS 构建的移动端组件库 |
|
||||
| [rc-ui-lib](https://github.com/rancui/rc-ui-lib) | 参照 Vant 打造的 React 框架移动端组件库 |
|
||||
| [vant-aliapp](https://github.com/ant-move/Vant-Aliapp) | Vant 支付宝小程序版 |
|
||||
| [taroify](https://gitee.com/mallfoundry/taroify) | Vant Taro 版 |
|
||||
| [vant-theme](https://github.com/Aisen60/vant-theme) | Vant 在线主题预览工具 |
|
||||
|
||||
@ -82,7 +82,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-cascader__tab"
|
||||
class="van-tab van-tab--line van-cascader__tab"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
>
|
||||
@ -92,7 +92,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active van-cascader__tab van-cascader__tab--unselected"
|
||||
class="van-tab van-tab--line van-tab--active van-cascader__tab van-cascader__tab--unselected"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
>
|
||||
|
||||
@ -33,7 +33,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -44,7 +44,7 @@ exports[`should be the sames as the last snapshot when render coupon list 1`] =
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -325,7 +325,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -336,7 +336,7 @@ exports[`should have two "van-coupon-list__empty" classes when render coupon lis
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -437,7 +437,7 @@ exports[`should render list-footer slot correctly 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -448,7 +448,7 @@ exports[`should render list-footer slot correctly 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -551,7 +551,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -562,7 +562,7 @@ exports[`should use custom src when using empty-image prop 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
|
||||
@ -20,7 +20,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -31,7 +31,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -42,7 +42,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
|
||||
@ -11,7 +11,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -22,7 +22,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -33,7 +33,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -44,7 +44,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-3"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
|
||||
@ -9,7 +9,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -20,7 +20,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
|
||||
@ -9,7 +9,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -20,7 +20,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -31,7 +31,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
|
||||
@ -9,7 +9,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -20,7 +20,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -31,7 +31,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
|
||||
@ -124,7 +124,7 @@ export default {
|
||||
|
||||
### Sticky
|
||||
|
||||
In sticky mode, the tab will be fixed to top when scroll to top.
|
||||
In sticky mode, the tab nav will be fixed to top when scroll to top.
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" sticky>
|
||||
@ -134,6 +134,18 @@ In sticky mode, the tab will be fixed to top when scroll to top.
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
### Shrink
|
||||
|
||||
In shrink mode, the tabs will be shrinked to the left.
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" shrink>
|
||||
<van-tab v-for="index in 4" :title="'tab ' + index">
|
||||
content {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
### Custom title
|
||||
|
||||
Use title slot to custom tab title.
|
||||
@ -236,6 +248,7 @@ export default {
|
||||
| border | Whether to show border when `type="line"` | _boolean_ | `false` |
|
||||
| ellipsis | Whether to ellipsis too long title | _boolean_ | `true` |
|
||||
| sticky | Whether to use sticky mode | _boolean_ | `false` |
|
||||
| shrink `v3.2.8` | Whether to shrink the the tabs to the left | _boolean_ | `false` |
|
||||
| swipeable | Whether to enable gestures to slide left and right | _boolean_ | `false` |
|
||||
| lazy-render | Whether to enable tab content lazy render | _boolean_ | `true` |
|
||||
| scrollspy | Whether to use scrollspy mode | _boolean_ | `false` |
|
||||
|
||||
@ -143,6 +143,18 @@ export default {
|
||||
|
||||
> Tips: 如果页面顶部有其他内容，可以通过 offset-top 属性设置吸顶时与顶部的距离。
|
||||
|
||||
### 收缩布局
|
||||
|
||||
通过 `shrink` 属性可以开启收缩布局，开启后，所有的标签会向左侧收缩对齐。
|
||||
|
||||
```html
|
||||
<van-tabs v-model:active="active" shrink>
|
||||
<van-tab v-for="index in 4" :title="'选项 ' + index">
|
||||
内容 {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
```
|
||||
|
||||
### 自定义标签
|
||||
|
||||
通过 `title` 插槽可以自定义标签内容。
|
||||
@ -249,6 +261,7 @@ export default {
|
||||
| border | 是否显示标签栏外边框，仅在 `type="line"` 时有效 | _boolean_ | `false` |
|
||||
| ellipsis | 是否省略过长的标题文字 | _boolean_ | `true` |
|
||||
| sticky | 是否使用粘性布局 | _boolean_ | `false` |
|
||||
| shrink `v3.2.8` | 是否开启左侧收缩布局 | _boolean_ | `false` |
|
||||
| swipeable | 是否开启手势左右滑动切换 | _boolean_ | `false` |
|
||||
| lazy-render | 是否开启延迟渲染（首次切换到标签时才触发内容渲染） | _boolean_ | `true` |
|
||||
| scrollspy | 是否开启滚动导航 | _boolean_ | `false` |
|
||||
|
||||
41
packages/vant/src/tab/demo/Shrink.vue
Normal file
41
packages/vant/src/tab/demo/Shrink.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import VanTabs from '../../tabs';
|
||||
import VanTab from '..';
|
||||
import { useTranslate } from '../../../docs/site/use-translate';
|
||||
|
||||
const t = useTranslate({
|
||||
'zh-CN': {
|
||||
tab: '标签 ',
|
||||
shrink: '收缩布局',
|
||||
},
|
||||
'en-US': {
|
||||
tab: 'Tab ',
|
||||
shrink: 'Shrink',
|
||||
},
|
||||
});
|
||||
|
||||
const tabs = [1, 2, 3, 4];
|
||||
const active1 = ref(0);
|
||||
const active2 = ref(0);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<demo-block :title="t('shrink')">
|
||||
<van-tabs v-model:active="active1" shrink>
|
||||
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
|
||||
{{ t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
<van-tabs
|
||||
v-model:active="active2"
|
||||
type="card"
|
||||
shrink
|
||||
style="margin-top: var(--van-padding-lg)"
|
||||
>
|
||||
<van-tab :title="t('tab') + index" v-for="index in tabs" :key="index">
|
||||
{{ t('content') }} {{ index }}
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
</template>
|
||||
@ -5,6 +5,7 @@ import VanIcon from '../../icon';
|
||||
import { ref } from 'vue';
|
||||
import { useTranslate } from '../../../docs/site/use-translate';
|
||||
import { Toast } from '../../toast';
|
||||
import Shrink from './Shrink.vue';
|
||||
|
||||
const t = useTranslate({
|
||||
'zh-CN': {
|
||||
@ -131,6 +132,8 @@ const beforeChange = (name: number) => {
|
||||
</van-tabs>
|
||||
</demo-block>
|
||||
|
||||
<shrink />
|
||||
|
||||
<demo-block :title="t('title7')">
|
||||
<van-tabs v-model:active="active7">
|
||||
<van-tab v-for="index in 2" :key="index">
|
||||
|
||||
@ -10,7 +10,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -21,7 +21,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -32,7 +32,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -43,7 +43,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-3"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -104,7 +104,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -115,7 +115,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -126,7 +126,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -179,7 +179,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -190,7 +190,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -201,7 +201,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -212,7 +212,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-3"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -223,7 +223,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-4"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -234,7 +234,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-5"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -245,7 +245,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-6"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -256,7 +256,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-7"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -349,7 +349,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -360,7 +360,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--disabled"
|
||||
class="van-tab van-tab--line van-tab--disabled"
|
||||
aria-selected="false"
|
||||
aria-disabled="true"
|
||||
aria-controls="van-tab"
|
||||
@ -371,7 +371,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -424,7 +424,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--card van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -435,7 +435,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--card"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -446,7 +446,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--card"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -495,7 +495,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -506,7 +506,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -553,7 +553,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -564,7 +564,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -575,7 +575,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -586,7 +586,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-3"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -640,6 +640,188 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
class="van-tabs__nav van-tabs__nav--line van-tabs__nav--shrink"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--line van-tab--shrink van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Tab 1
|
||||
</span>
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--line van-tab--shrink"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Tab 2
|
||||
</span>
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab van-tab--line van-tab--shrink"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Tab 3
|
||||
</span>
|
||||
</div>
|
||||
<div id="van-tabs-3"
|
||||
role="tab"
|
||||
class="van-tab van-tab--line van-tab--shrink"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Tab 4
|
||||
</span>
|
||||
</div>
|
||||
<div class="van-tabs__line"
|
||||
style="transform: translateX(50px) translateX(-50%);"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
Content 1
|
||||
</div>
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-3"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs van-tabs--card">
|
||||
<div class="van-tabs__wrap">
|
||||
<div role="tablist"
|
||||
class="van-tabs__nav van-tabs__nav--card van-tabs__nav--shrink"
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--card van-tab--shrink van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Tab 1
|
||||
</span>
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--card van-tab--shrink"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Tab 2
|
||||
</span>
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab van-tab--card van-tab--shrink"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Tab 3
|
||||
</span>
|
||||
</div>
|
||||
<div id="van-tabs-3"
|
||||
role="tab"
|
||||
class="van-tab van-tab--card van-tab--shrink"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
>
|
||||
<span class="van-tab__text van-tab__text--ellipsis">
|
||||
Tab 4
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-tabs__content">
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="0"
|
||||
aria-labelledby="van-tabs-0"
|
||||
style
|
||||
>
|
||||
Content 1
|
||||
</div>
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-1"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-2"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
<div id="van-tab"
|
||||
role="tabpanel"
|
||||
class="van-tab__panel"
|
||||
tabindex="-1"
|
||||
aria-labelledby="van-tabs-3"
|
||||
style="display: none;"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-tabs van-tabs--line">
|
||||
<div class="van-tabs__wrap">
|
||||
@ -649,7 +831,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -662,7 +844,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -709,7 +891,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
>
|
||||
@ -719,7 +901,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
>
|
||||
@ -729,7 +911,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
>
|
||||
@ -739,7 +921,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-3"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
>
|
||||
@ -814,7 +996,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
>
|
||||
@ -824,7 +1006,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
>
|
||||
@ -834,7 +1016,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
>
|
||||
@ -844,7 +1026,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-3"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
>
|
||||
@ -921,7 +1103,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -932,7 +1114,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -943,7 +1125,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -954,7 +1136,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-3"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -965,7 +1147,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-4"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -976,7 +1158,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-5"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -987,7 +1169,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-6"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -998,7 +1180,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-7"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -1092,7 +1274,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -1103,7 +1285,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -1114,7 +1296,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -1125,7 +1307,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-3"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
|
||||
@ -53,7 +53,7 @@ exports[`should allow to set name prop 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -64,7 +64,7 @@ exports[`should allow to set name prop 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -75,7 +75,7 @@ exports[`should allow to set name prop 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab van-tab--disabled"
|
||||
class="van-tab van-tab--line van-tab--disabled"
|
||||
aria-selected="false"
|
||||
aria-disabled="true"
|
||||
aria-controls="van-tab"
|
||||
@ -140,7 +140,7 @@ exports[`should not render empty tab 1`] = `
|
||||
exports[`should render badge prop correctly 1`] = `
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -164,7 +164,7 @@ exports[`should render nav-left、nav-right slot correctly 1`] = `
|
||||
Custom nav left
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -191,7 +191,7 @@ exports[`should switch tab after click the tab title 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -202,7 +202,7 @@ exports[`should switch tab after click the tab title 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -213,7 +213,7 @@ exports[`should switch tab after click the tab title 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab van-tab--disabled"
|
||||
class="van-tab van-tab--line van-tab--disabled"
|
||||
aria-selected="false"
|
||||
aria-disabled="true"
|
||||
aria-controls="van-tab"
|
||||
@ -267,7 +267,7 @@ exports[`should switch tab after click the tab title 2`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -278,7 +278,7 @@ exports[`should switch tab after click the tab title 2`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -289,7 +289,7 @@ exports[`should switch tab after click the tab title 2`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab van-tab--disabled"
|
||||
class="van-tab van-tab--line van-tab--disabled"
|
||||
aria-selected="false"
|
||||
aria-disabled="true"
|
||||
aria-controls="van-tab"
|
||||
@ -344,7 +344,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
>
|
||||
@ -354,7 +354,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
>
|
||||
@ -364,7 +364,7 @@ exports[`swipe switch tab after swiping tab content 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab van-tab--disabled"
|
||||
class="van-tab van-tab--line van-tab--disabled"
|
||||
aria-selected="false"
|
||||
aria-disabled="true"
|
||||
>
|
||||
@ -431,7 +431,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
>
|
||||
@ -441,7 +441,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
>
|
||||
@ -451,7 +451,7 @@ exports[`swipe switch tab after swiping tab content 2`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab van-tab--disabled"
|
||||
class="van-tab van-tab--line van-tab--disabled"
|
||||
aria-selected="false"
|
||||
aria-disabled="true"
|
||||
>
|
||||
@ -521,7 +521,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
>
|
||||
@ -531,7 +531,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
>
|
||||
@ -541,7 +541,7 @@ exports[`swipe switch tab after swiping tab content 3`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab van-tab--disabled"
|
||||
class="van-tab van-tab--line van-tab--disabled"
|
||||
aria-selected="false"
|
||||
aria-disabled="true"
|
||||
>
|
||||
|
||||
@ -9,7 +9,7 @@ exports[`should render Tab inside a component correctly 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -20,7 +20,7 @@ exports[`should render Tab inside a component correctly 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -31,7 +31,7 @@ exports[`should render Tab inside a component correctly 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -85,7 +85,7 @@ exports[`should render correctly after inserting a tab 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -96,7 +96,7 @@ exports[`should render correctly after inserting a tab 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
@ -107,7 +107,7 @@ exports[`should render correctly after inserting a tab 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-2"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -163,7 +163,7 @@ exports[`should render correctly after inserting a tab with name 1`] = `
|
||||
>
|
||||
<div id="van-tabs-0"
|
||||
role="tab"
|
||||
class="van-tab"
|
||||
class="van-tab van-tab--line"
|
||||
tabindex="-1"
|
||||
aria-selected="false"
|
||||
aria-controls="van-tab"
|
||||
@ -174,7 +174,7 @@ exports[`should render correctly after inserting a tab with name 1`] = `
|
||||
</div>
|
||||
<div id="van-tabs-1"
|
||||
role="tab"
|
||||
class="van-tab van-tab--active"
|
||||
class="van-tab van-tab--line van-tab--active"
|
||||
tabindex="0"
|
||||
aria-selected="true"
|
||||
aria-controls="van-tab"
|
||||
|
||||
@ -65,6 +65,7 @@ const tabsProps = {
|
||||
color: String,
|
||||
border: Boolean,
|
||||
sticky: Boolean,
|
||||
shrink: Boolean,
|
||||
active: makeNumericProp(0),
|
||||
duration: makeNumericProp(0.3),
|
||||
animated: Boolean,
|
||||
@ -361,16 +362,17 @@ export default defineComponent({
|
||||
const renderNav = () =>
|
||||
children.map((item, index) => (
|
||||
<TabsTitle
|
||||
v-slots={{ title: item.$slots.title }}
|
||||
id={`${id}-${index}`}
|
||||
ref={setTitleRefs(index)}
|
||||
type={props.type}
|
||||
color={props.color}
|
||||
style={item.titleStyle}
|
||||
class={item.titleClass}
|
||||
shrink={props.shrink}
|
||||
isActive={index === state.currentIndex}
|
||||
controls={item.id}
|
||||
scrollable={scrollable.value}
|
||||
renderTitle={item.$slots.title}
|
||||
activeColor={props.titleActiveColor}
|
||||
inactiveColor={props.titleInactiveColor}
|
||||
onClick={(event: MouseEvent) => onClickTab(item, index, event)}
|
||||
@ -403,7 +405,10 @@ export default defineComponent({
|
||||
<div
|
||||
ref={navRef}
|
||||
role="tablist"
|
||||
class={bem('nav', [type, { complete: scrollable.value }])}
|
||||
class={bem('nav', [
|
||||
type,
|
||||
{ shrink: props.shrink, complete: scrollable.value },
|
||||
])}
|
||||
style={navStyle.value}
|
||||
aria-orientation="horizontal"
|
||||
>
|
||||
|
||||
@ -14,17 +14,17 @@ export default defineComponent({
|
||||
color: String,
|
||||
title: String,
|
||||
badge: numericProp,
|
||||
shrink: Boolean,
|
||||
isActive: Boolean,
|
||||
disabled: Boolean,
|
||||
controls: String,
|
||||
scrollable: Boolean,
|
||||
activeColor: String,
|
||||
renderTitle: Function,
|
||||
inactiveColor: String,
|
||||
showZeroBadge: truthProp,
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
setup(props, { slots }) {
|
||||
const style = computed(() => {
|
||||
const style: CSSProperties = {};
|
||||
const { type, color, disabled, isActive, activeColor, inactiveColor } =
|
||||
@ -56,7 +56,7 @@ export default defineComponent({
|
||||
const renderText = () => {
|
||||
const Text = (
|
||||
<span class={bem('text', { ellipsis: !props.scrollable })}>
|
||||
{props.renderTitle ? props.renderTitle() : props.title}
|
||||
{slots.title ? slots.title() : props.title}
|
||||
</span>
|
||||
);
|
||||
|
||||
@ -80,10 +80,14 @@ export default defineComponent({
|
||||
id={props.id}
|
||||
role="tab"
|
||||
class={[
|
||||
bem({
|
||||
active: props.isActive,
|
||||
disabled: props.disabled,
|
||||
}),
|
||||
bem([
|
||||
props.type,
|
||||
{
|
||||
shrink: props.shrink,
|
||||
active: props.isActive,
|
||||
disabled: props.disabled,
|
||||
},
|
||||
]),
|
||||
]}
|
||||
style={style.value}
|
||||
tabindex={props.disabled ? undefined : props.isActive ? 0 : -1}
|
||||
|
||||
@ -38,6 +38,30 @@
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&--shrink {
|
||||
flex: none;
|
||||
padding: 0 var(--van-padding-xs);
|
||||
}
|
||||
|
||||
&--card {
|
||||
color: var(--van-tabs-default-color);
|
||||
border-right: var(--van-border-width-base) solid
|
||||
var(--van-tabs-default-color);
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.van-tab--active {
|
||||
color: var(--van-white);
|
||||
background-color: var(--van-tabs-default-color);
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: var(--van-tab-disabled-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
&--ellipsis {
|
||||
display: -webkit-box;
|
||||
@ -93,6 +117,7 @@
|
||||
padding-bottom: 15px; /* 15px padding to hide scrollbar in mobile safari */
|
||||
}
|
||||
|
||||
&--line&--shrink,
|
||||
&--line&--complete {
|
||||
padding-right: var(--van-padding-xs);
|
||||
padding-left: var(--van-padding-xs);
|
||||
@ -104,25 +129,10 @@
|
||||
margin: 0 var(--van-padding-md);
|
||||
border: var(--van-border-width-base) solid var(--van-tabs-default-color);
|
||||
border-radius: var(--van-border-radius-sm);
|
||||
}
|
||||
|
||||
.van-tab {
|
||||
color: var(--van-tabs-default-color);
|
||||
border-right: var(--van-border-width-base) solid
|
||||
var(--van-tabs-default-color);
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
&.van-tab--active {
|
||||
color: var(--van-white);
|
||||
background-color: var(--van-tabs-default-color);
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
color: var(--van-tab-disabled-text-color);
|
||||
}
|
||||
}
|
||||
&--card&--shrink {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user