Skip to content

Commit 13ff471

Browse files
chioiochioio
committed
feat(tabs): 新增 flat 变体并调整样例 panel 间距
1 parent 027e695 commit 13ff471

9 files changed

Lines changed: 188 additions & 87 deletions

File tree

‎apps/sample-react/src/routes/tabs/route.tsx‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { Button, ButtonGroup } from '@srcube-ui/react';
2-
import { TabPanel, Tabs } from '@srcube-ui/react';
1+
import { Button, ButtonGroup, TabPanel, Tabs } from '@srcube-ui/react';
32
import { createFileRoute } from '@tanstack/react-router';
43
import type React from 'react';
54
import { useMemo, useState } from 'react';
@@ -31,7 +30,7 @@ const tabsColorGroups = [
3130
] as const;
3231

3332
type TabsColor = (typeof tabsColorGroups)[number][number]['value'];
34-
type TabsVariant = 'default' | 'outline' | 'twotone' | 'underline';
33+
type TabsVariant = 'default' | 'outline' | 'twotone' | 'flat' | 'underline';
3534
type TabsPlacement = 'top' | 'start' | 'end' | 'bottom';
3635

3736
function Section({
@@ -110,22 +109,13 @@ function TabsDemo() {
110109
setBasicValue(next as DemoTabValue);
111110
}}
112111
>
113-
<TabPanel
114-
value="tab-1"
115-
className="rounded-2xl border border-slate-200 bg-white p-4"
116-
>
112+
<TabPanel value="tab-1" className="mt-2 rounded-2xl bg-white p-4">
117113
Panel for Tab 1
118114
</TabPanel>
119-
<TabPanel
120-
value="tab-2"
121-
className="rounded-2xl border border-slate-200 bg-white p-4"
122-
>
115+
<TabPanel value="tab-2" className="mt-2 rounded-2xl bg-white p-4">
123116
Panel for Tab 2
124117
</TabPanel>
125-
<TabPanel
126-
value="tab-3"
127-
className="rounded-2xl border border-slate-200 bg-white p-4"
128-
>
118+
<TabPanel value="tab-3" className="mt-2 rounded-2xl bg-white p-4">
129119
Panel for Tab 3
130120
</TabPanel>
131121
</Tabs>
@@ -189,26 +179,29 @@ function TabsDemo() {
189179
>
190180
<TabPanel
191181
value="tab-a"
192-
className="h-full rounded-2xl border border-slate-200 bg-white p-4 text-sm"
182+
className="mt-2 h-full rounded-2xl bg-white p-4 text-sm"
193183
>
194184
Panel for Tab A
195185
</TabPanel>
196186
<TabPanel
197187
value="tab-b"
198-
className="h-full rounded-2xl border border-slate-200 bg-white p-4 text-sm"
188+
className="mt-2 h-full rounded-2xl bg-white p-4 text-sm"
199189
>
200190
Panel for Tab B
201191
</TabPanel>
202192
<TabPanel
203193
value="tab-c"
204-
className="h-full rounded-2xl border border-slate-200 bg-white p-4 text-sm"
194+
className="mt-2 h-full rounded-2xl bg-white p-4 text-sm"
205195
>
206196
Panel for Tab C (disabled tab)
207197
</TabPanel>
208198
</Tabs>
209199
</Section>
210200

211-
<Section title="Variant / Color" description="default / outline / twotone / underline">
201+
<Section
202+
title="Variant / Color"
203+
description="default / outline / twotone / flat / underline"
204+
>
212205
<ButtonGroup size="sm" isBlock>
213206
<Button
214207
color={activeVariant === 'default' ? 'primary' : 'default'}
@@ -237,6 +230,15 @@ function TabsDemo() {
237230
>
238231
twotone
239232
</Button>
233+
<Button
234+
color={activeVariant === 'flat' ? 'primary' : 'default'}
235+
variant={activeVariant === 'flat' ? 'solid' : 'flat'}
236+
onTap={() => {
237+
setActiveVariant('flat');
238+
}}
239+
>
240+
flat
241+
</Button>
240242
<Button
241243
color={activeVariant === 'underline' ? 'primary' : 'default'}
242244
variant={activeVariant === 'underline' ? 'solid' : 'flat'}
@@ -259,7 +261,9 @@ function TabsDemo() {
259261
{group.map((item) => (
260262
<Button
261263
key={item.value}
262-
color={activeColor === item.value ? item.value : 'default'}
264+
color={
265+
activeColor === item.value ? item.value : 'default'
266+
}
263267
variant={activeColor === item.value ? 'solid' : 'flat'}
264268
onTap={() => {
265269
setActiveColor(item.value);
@@ -284,7 +288,8 @@ function TabsDemo() {
284288
/>
285289

286290
<div className="mt-2 text-xs text-slate-500">
287-
Variant: {activeVariant} / Color: {activeColor} / Selected: {colorValue}
291+
Variant: {activeVariant} / Color: {activeColor} / Selected:{' '}
292+
{colorValue}
288293
</div>
289294
</div>
290295
</Section>

‎apps/sample-weapp/src/packages/tabs/pages/sample/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const tabsColorGroups = [
1414
] as const;
1515

1616
type TabsColor = (typeof tabsColorGroups)[number][number]['value'];
17-
type TabsVariant = 'default' | 'outline' | 'twotone' | 'underline';
17+
type TabsVariant = 'default' | 'outline' | 'twotone' | 'flat' | 'underline';
1818
type TabsPlacement = 'top' | 'start' | 'end' | 'bottom';
1919

2020
Page({

‎apps/sample-weapp/src/packages/tabs/pages/sample/index.wxml‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,21 @@
2323
<sr-tab-panel
2424
value="tab-1"
2525
activeValue="{{basicValue}}"
26-
className="rounded-2xl border border-slate-200 bg-white p-4"
26+
className="mt-2 rounded-2xl bg-white p-4"
2727
>
2828
Panel for Tab 1
2929
</sr-tab-panel>
3030
<sr-tab-panel
3131
value="tab-2"
3232
activeValue="{{basicValue}}"
33-
className="rounded-2xl border border-slate-200 bg-white p-4"
33+
className="mt-2 rounded-2xl bg-white p-4"
3434
>
3535
Panel for Tab 2
3636
</sr-tab-panel>
3737
<sr-tab-panel
3838
value="tab-3"
3939
activeValue="{{basicValue}}"
40-
className="rounded-2xl border border-slate-200 bg-white p-4"
40+
className="mt-2 rounded-2xl bg-white p-4"
4141
>
4242
Panel for Tab 3
4343
</sr-tab-panel>
@@ -106,21 +106,21 @@
106106
<sr-tab-panel
107107
value="tab-a"
108108
activeValue="{{verticalValue}}"
109-
className="h-full rounded-2xl border border-slate-200 bg-white p-4 text-sm"
109+
className="mt-2 h-full rounded-2xl bg-white p-4 text-sm"
110110
>
111111
Panel for Tab A
112112
</sr-tab-panel>
113113
<sr-tab-panel
114114
value="tab-b"
115115
activeValue="{{verticalValue}}"
116-
className="h-full rounded-2xl border border-slate-200 bg-white p-4 text-sm"
116+
className="mt-2 h-full rounded-2xl bg-white p-4 text-sm"
117117
>
118118
Panel for Tab B
119119
</sr-tab-panel>
120120
<sr-tab-panel
121121
value="tab-c"
122122
activeValue="{{verticalValue}}"
123-
className="h-full rounded-2xl border border-slate-200 bg-white p-4 text-sm"
123+
className="mt-2 h-full rounded-2xl bg-white p-4 text-sm"
124124
>
125125
Panel for Tab C (disabled tab)
126126
</sr-tab-panel>
@@ -129,7 +129,7 @@
129129

130130
<view class="rounded-2xl bg-white p-4 shadow-sm">
131131
<view class="text-sm font-semibold">Variant / Color</view>
132-
<view class="mt-1 text-xs text-slate-500">default / outline / twotone / underline</view>
132+
<view class="mt-1 text-xs text-slate-500">default / outline / twotone / flat / underline</view>
133133

134134
<view class="mt-3">
135135
<sr-button-group size="sm" isBlock>
@@ -160,6 +160,15 @@
160160
>
161161
twotone
162162
</sr-button>
163+
<sr-button
164+
class="flex-1"
165+
color="{{activeVariant === 'flat' ? 'primary' : 'default'}}"
166+
variant="{{activeVariant === 'flat' ? 'solid' : 'flat'}}"
167+
data-variant="flat"
168+
bind:tap="handleVariantTap"
169+
>
170+
flat
171+
</sr-button>
163172
<sr-button
164173
class="flex-1"
165174
color="{{activeVariant === 'underline' ? 'primary' : 'default'}}"

‎packages/mini/__tests__/tabs/tabs.test.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { beforeAll, expect, it, vi } from 'vitest';
33
// @ts-expect-error -- raw wxml import for tests
44
import template from '../../src/components/tabs/index.wxml?raw';
55
import { tabsMiniProps } from '../../src/components/tabs/props';
6+
67
let definition: Record<string, unknown> | undefined;
78

89
vi.doMock('miniprogram-computed', () => ({
@@ -58,6 +59,33 @@ it('uses default variant and placement in mini props', () => {
5859
expect(tabsMiniProps.placement.value).toBe(null);
5960
});
6061

62+
it('supports flat variant with twotone-like fill and no border', () => {
63+
const computed = (
64+
definition as {
65+
computed?: {
66+
$classNames?: (data: Record<string, unknown>) => {
67+
indicator?: string;
68+
};
69+
};
70+
}
71+
)?.computed;
72+
const classNames = computed?.$classNames?.({
73+
orientation: 'x',
74+
placement: null,
75+
color: 'primary',
76+
variant: 'flat',
77+
size: 'md',
78+
radius: 'md',
79+
isDisabled: false,
80+
className: '',
81+
classNames: {},
82+
});
83+
84+
expect(classNames?.indicator).toContain('bg-primary/10');
85+
expect(classNames?.indicator).toContain('border-0');
86+
expect(classNames?.indicator.includes('border-primary')).toBe(false);
87+
});
88+
6189
it('updates uncontrolled value and emits change on tap', async () => {
6290
const comp = renderTabs({
6391
items: [

‎packages/mini/docs/components/tabs.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
| defaultValue | 非受控默认值 | `string \| number \| null` | 首个可用项 | 全平台 |
1616
| onValueChange / change | 值变化回调（Mini 为 `bind:change`，`e.detail.value`） | React: `(value) => void`；Mini: `CustomEvent` | - | 全平台 |
1717
| color | 主题色 | `"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "danger"` | `"default"` | 全平台 |
18-
| variant | 样式变体 | `"default" \| "outline" \| "twotone" \| "underline"` | `"default"` | 全平台 |
18+
| variant | 样式变体 | `"default" \| "outline" \| "twotone" \| "flat" \| "underline"` | `"default"` | 全平台 |
1919
| placement | 标签头位置 | `"top" \| "start" \| "end" \| "bottom"` | `"top"` | 全平台 |
2020
| size | 尺寸 | `"sm" \| "md" \| "lg"` | `"md"` | 全平台 |
2121
| radius | 圆角 | `"none" \| "sm" \| "md" \| "lg" \| "full"` | `"md"` | 全平台 |

0 commit comments

Comments
 (0)