Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(tabs): support space-evenly property #965

Merged
merged 5 commits into from
Nov 1, 2022
Merged

feat(tabs): support space-evenly property #965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5363922
feat(tabs): support space-evenly property
LeeJim Nov 1, 2022
a68fc10
test(tabs): update snapshot
LeeJim Nov 1, 2022
f47a33a
feat(tabs): style upgrade
LeeJim Nov 1, 2022
e3817fc
docs(tabs): update document
LeeJim Nov 1, 2022
d505960
test(tabs): update snapshot
LeeJim Nov 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/tabs/README.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { dura
external-classes | Array | - | `['t-class', 't-class-item', 't-class-active', 't-class-track']` | N
placement | String | top | options：left/top | N
show-bottom-line | Boolean | true | \- | N
space-evenly | Boolean | true | \- | N
sticky | Boolean | false | \- | N
sticky-props | Object | - | Typescript：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
swipeable | Boolean | true | \- | N
Expand All @@ -28,7 +29,7 @@ scroll | `(scrollTop: number, isFixed: boolean)` | \-

name | type | default | description | required
-- | -- | -- | -- | --
badge-props | Object | {} | \- | N
badge-props | Object | null | \- | N
destroy-on-hide | Boolean | true | \- | N
disabled | Boolean | false | \- | N
label | String | - | \- | N
Expand Down
25 changes: 17 additions & 8 deletions src/tabs/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,24 +37,32 @@ CSS 变量名|说明

{{ base }}

### 超过屏幕滚动
### 等距选项卡

{{ scroll }}

### 无下划线
{{ unline }}
### 带徽章选项卡

{{ with-badge }}

### 动画时间可调整
{{ adjust-time }}
### 带内容区选项卡

{{ with-content }}

### 选项卡状态

{{ status }}

### 竖向选项卡
{{ vertical }}
### 选项卡尺寸

### 选中态文字尺寸规格
{{ size }}

### 选项卡样式

使用 theme 属性可以变换风格，支持 line = 线条（默认）；tag = 标签；card = 卡片

{{ theme }}

<!-- 横向选项卡支持超过屏幕滑动 -->

<img src="https://tdesign.gtimg.com/miniprogram/readme/tabs-3.png" width="375px" height="50%">
Expand Down Expand Up @@ -118,6 +126,7 @@ animation | Object | - | 动画效果设置。其中 duration 表示动画时长
external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、选项卡单项、选项卡激活态、滚动条样式类名 等类名。`['t-class', 't-class-item', 't-class-active', 't-class-track']` | N
placement | String | top | 选项卡位置。可选项：left/top | N
show-bottom-line | Boolean | true | 是否展示底部激活线条 | N
space-evenly | Boolean | true | 选项卡头部空间是否均分 | N
sticky | Boolean | false | 是否开启粘性布局 | N
sticky-props | Object | - | 透传至 Sticky 组件。TS 类型：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tabs/type.ts) | N
swipeable | Boolean | true | 是否可以滑动切换 | N
Expand Down
99 changes: 91 additions & 8 deletions src/tabs/__test__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ exports[`Tabs Tabs scroll demo works fine 1`] = `
<scroll>
<t-tabs
defaultValue="{{0}}"
spaceEvenly="{{false}}"
bind:change="onTabsChange"
bind:click="onTabsClick"
>
Expand Down Expand Up @@ -193,19 +194,60 @@ exports[`Tabs Tabs theme demo works fine 1`] = `
>
<t-tab-panel
label="选项"
value="0"
value="{{0}}"
/>
<t-tab-panel
label="选项"
value="1"
value="{{1}}"
/>
<t-tab-panel
label="选项"
value="2"
value="{{2}}"
/>
<t-tab-panel
label="选项"
value="3"
value="{{3}}"
/>
</t-tabs>
<wx-view
style="height: 16px"
/>
<t-tabs
defaultValue="{{0}}"
spaceEvenly="{{false}}"
theme="tag"
>
<t-tab-panel
label="选项"
value="{{0}}"
/>
<t-tab-panel
label="选项"
value="{{1}}"
/>
<t-tab-panel
label="选项"
value="{{2}}"
/>
<t-tab-panel
label="选项"
value="{{3}}"
/>
<t-tab-panel
label="选项"
value="{{4}}"
/>
<t-tab-panel
label="选项"
value="{{5}}"
/>
<t-tab-panel
label="选项"
value="{{6}}"
/>
<t-tab-panel
label="选项"
value="{{7}}"
/>
</t-tabs>
<wx-view
Expand All @@ -217,19 +259,60 @@ exports[`Tabs Tabs theme demo works fine 1`] = `
>
<t-tab-panel
label="选项"
value="0"
value="{{0}}"
/>
<t-tab-panel
label="选项"
value="1"
value="{{1}}"
/>
<t-tab-panel
label="选项"
value="2"
value="{{2}}"
/>
<t-tab-panel
label="选项"
value="3"
value="{{3}}"
/>
</t-tabs>
<wx-view
style="height: 16px"
/>
<t-tabs
defaultValue="{{0}}"
spaceEvenly="{{false}}"
theme="card"
>
<t-tab-panel
label="选项"
value="{{0}}"
/>
<t-tab-panel
label="选项"
value="{{1}}"
/>
<t-tab-panel
label="选项"
value="{{2}}"
/>
<t-tab-panel
label="选项"
value="{{3}}"
/>
<t-tab-panel
label="选项"
value="{{4}}"
/>
<t-tab-panel
label="选项"
value="{{5}}"
/>
<t-tab-panel
label="选项"
value="{{6}}"
/>
<t-tab-panel
label="选项"
value="{{7}}"
/>
</t-tabs>
</theme>
Expand Down
16 changes: 8 additions & 8 deletions src/tabs/__test__/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,45 +34,45 @@ exports[`tabs :base 1`] = `
class="t-tabs__nav t-tabs__nav--left"
>
<wx-view
class="t-tabs__item t-tabs__item--line t-tabs__item--left t-class-item t-is-active t-class-active"
class="t-tabs__item t-tabs__item--line t-tabs__item--evenly t-tabs__item--left t-class-item t-is-active t-class-active"
data-index="{{0}}"
bind:tap="onTabTap"
>
<wx-view
class="t-tabs__item-inner t-tabs__item-inner--line"
class="t-tabs__item-inner t-tabs__item-inner--line t-tabs__item-inner--active"
>
标签页一
</wx-view>
</wx-view>
<wx-view
class="t-tabs__item t-tabs__item--line t-tabs__item--left t-class-item "
class="t-tabs__item t-tabs__item--line t-tabs__item--evenly t-tabs__item--left t-class-item "
data-index="{{1}}"
bind:tap="onTabTap"
>
<wx-view
class="t-tabs__item-inner t-tabs__item-inner--line"
class="t-tabs__item-inner t-tabs__item-inner--line t-tabs__item-inner--"
>
label1
</wx-view>
</wx-view>
<wx-view
class="t-tabs__item t-tabs__item--line t-tabs__item--left t-class-item "
class="t-tabs__item t-tabs__item--line t-tabs__item--evenly t-tabs__item--left t-class-item "
data-index="{{2}}"
bind:tap="onTabTap"
>
<wx-view
class="t-tabs__item-inner t-tabs__item-inner--line"
class="t-tabs__item-inner t-tabs__item-inner--line t-tabs__item-inner--"
>
label2
</wx-view>
</wx-view>
<wx-view
class="t-tabs__item t-tabs__item--line t-tabs__item--left t-class-item "
class="t-tabs__item t-tabs__item--line t-tabs__item--evenly t-tabs__item--left t-class-item "
data-index="{{3}}"
bind:tap="onTabTap"
>
<wx-view
class="t-tabs__item-inner t-tabs__item-inner--line"
class="t-tabs__item-inner t-tabs__item-inner--line t-tabs__item-inner--"
>
label3
</wx-view>
Expand Down
2 changes: 1 addition & 1 deletion src/tabs/_example/scroll/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<t-tabs defaultValue="{{0}}" bind:change="onTabsChange" bind:click="onTabsClick">
<t-tabs defaultValue="{{0}}" space-evenly="{{false}}" bind:change="onTabsChange" bind:click="onTabsClick">
<t-tab-panel wx:for="{{8}}" wx:key="index" label="选项" value="{{index}}" />
</t-tabs>
4 changes: 2 additions & 2 deletions src/tabs/_example/tabs.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<view class="demo">
<view class="demo-title">Tabs 选项卡</view>
<view class="demo-desc">用于内容分类后的展示切换。</view>
<t-demo title="01 组件类型" desc="横向选项卡">
<t-demo title="01 组件类型" desc="基础选项卡">
<base />
</t-demo>
<t-demo desc="超过屏幕滑动">
<t-demo desc="等距选项卡">
<scroll />
</t-demo>
<t-demo desc="带徽章选项卡">
Expand Down
22 changes: 14 additions & 8 deletions src/tabs/_example/theme/index.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,21 @@
<t-tabs defaultValue="{{0}}" theme="tag">
<t-tab-panel label="选项" value="0" />
<t-tab-panel label="选项" value="1" />
<t-tab-panel label="选项" value="2" />
<t-tab-panel label="选项" value="3" />
<t-tab-panel wx:for="{{4}}" wx:key="index" label="选项" value="{{index}}" />
</t-tabs>

<view style="height: 16px" />

<t-tabs defaultValue="{{0}}" theme="tag" space-evenly="{{false}}">
<t-tab-panel wx:for="{{8}}" wx:key="index" label="选项" value="{{index}}" />
</t-tabs>

<view style="height: 16px" />

<t-tabs defaultValue="{{0}}" theme="card">
<t-tab-panel label="选项" value="0" />
<t-tab-panel label="选项" value="1" />
<t-tab-panel label="选项" value="2" />
<t-tab-panel label="选项" value="3" />
<t-tab-panel wx:for="{{4}}" wx:key="index" label="选项" value="{{index}}" />
</t-tabs>

<view style="height: 16px" />

<t-tabs defaultValue="{{0}}" theme="card" space-evenly="{{false}}">
<t-tab-panel wx:for="{{8}}" wx:key="index" label="选项" value="{{index}}" />
</t-tabs>
5 changes: 5 additions & 0 deletions src/tabs/props.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@ const props: TdTabsProps = {
type: Boolean,
value: true,
},
/** 选项卡头部空间是否均分 */
spaceEvenly: {
type: Boolean,
value: true,
},
/** 是否开启粘性布局 */
sticky: {
type: Boolean,
Expand Down
Loading