Skip to content

Commit cb69fa9

Browse files
Youyou-smilesYouyou-smiles
authored
feat(button): [button] Adapting to the SMB theme (#2079)
* feat(button): [button] Adapting to the SMB theme * feat(button): [button] Adapting to the SMB theme * feat(button): [button] Adapting to the SMB theme
1 parent 8b743d0 commit cb69fa9

File tree

3 files changed

+10
-44
lines changed

3 files changed

+10
-44
lines changed

‎examples/sites/demos/pc/app/button/basic-usage-composition-api.vue

+5-11
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,23 @@
11
<template>
22
<tiny-layout>
3+
<p>基本按钮</p>
34
<tiny-row>
45
<tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
5-
<tiny-button>次要按钮</tiny-button>
6+
<tiny-button> 次要按钮 </tiny-button>
67
<tiny-button type="success"> 成功按钮 </tiny-button>
78
<tiny-button type="info"> 信息按钮 </tiny-button>
89
<tiny-button type="warning"> 警告按钮 </tiny-button>
910
<tiny-button type="danger"> 危险按钮 </tiny-button>
1011
</tiny-row>
12+
<p>朴素按钮</p>
1113
<tiny-row>
1214
<tiny-button type="primary" plain> 主要按钮 </tiny-button>
13-
<tiny-button plain>次要按钮 </tiny-button>
15+
<tiny-button plain> 次要按钮 </tiny-button>
1416
<tiny-button type="success" plain> 成功按钮 </tiny-button>
1517
<tiny-button type="info" plain> 信息按钮 </tiny-button>
1618
<tiny-button type="warning" plain> 警告按钮 </tiny-button>
1719
<tiny-button type="danger" plain> 危险按钮 </tiny-button>
1820
</tiny-row>
19-
<tiny-row>
20-
<tiny-button type="primary" round> 主要按钮 </tiny-button>
21-
<tiny-button round> 圆角按钮 </tiny-button>
22-
<tiny-button type="success" round> 成功按钮 </tiny-button>
23-
<tiny-button type="info" round> 信息按钮 </tiny-button>
24-
<tiny-button type="warning" round> 警告按钮 </tiny-button>
25-
<tiny-button type="danger" round> 危险按钮 </tiny-button>
26-
</tiny-row>
2721
<tiny-row>
2822
<tiny-button :icon="IconSearch" circle></tiny-button>
2923
<tiny-button type="primary" :icon="IconEdit" circle></tiny-button>
@@ -49,7 +43,7 @@ const IconSearch = iconSearch()
4943

5044
<style scoped>
5145
.tiny-row {
52-
margin-bottom: 20px;
46+
margin: 20px 0;
5347
}
5448
.tiny-button {
5549
margin-bottom: 10px;

‎examples/sites/demos/pc/app/button/basic-usage.spec.ts

-22
Original file line numberDiff line numberDiff line change
@@ -21,25 +21,3 @@ test('测试朴素按钮', async ({ page }) => {
2121
await expect(page.getByRole('button', { name: '警告按钮' }).nth(1)).toHaveClass(/tiny-button--warning is-plain/)
2222
await expect(page.getByRole('button', { name: '危险按钮' }).nth(1)).toHaveClass(/tiny-button--danger is-plain/)
2323
})
24-
25-
test('测试圆角按钮', async ({ page }) => {
26-
page.on('pageerror', (exception) => expect(exception).toBeNull())
27-
await page.goto('button#base')
28-
await expect(page.getByRole('button', { name: '圆角按钮' })).toHaveClass(/is-round/)
29-
await expect(page.getByRole('button', { name: '主要按钮' }).nth(2)).toHaveClass(/tiny-button--primary is-round/)
30-
await expect(page.getByRole('button', { name: '成功按钮' }).nth(2)).toHaveClass(/tiny-button--success is-round/)
31-
await expect(page.getByRole('button', { name: '信息按钮' }).nth(2)).toHaveClass(/tiny-button--info is-round/)
32-
await expect(page.getByRole('button', { name: '警告按钮' }).nth(2)).toHaveClass(/tiny-button--warning is-round/)
33-
await expect(page.getByRole('button', { name: '危险按钮' }).nth(2)).toHaveClass(/tiny-button--danger is-round/)
34-
})
35-
36-
test('测试是否是圆形按钮', async ({ page }) => {
37-
page.on('pageerror', (exception) => expect(exception).toBeNull())
38-
await page.goto('button#base')
39-
await expect(page.getByRole('button', { name: '圆角按钮' })).toHaveClass(/tiny-button--default/)
40-
await expect(page.getByRole('button', { name: '主要按钮' }).nth(2)).toHaveClass(/tiny-button--primary/)
41-
await expect(page.locator('button:nth-child(3)').first()).toHaveClass(/tiny-button--success/)
42-
await expect(page.locator('button:nth-child(4)').first()).toHaveClass(/tiny-button--info/)
43-
await expect(page.locator('button:nth-child(5)').first()).toHaveClass(/tiny-button--warning/)
44-
await expect(page.locator('button:nth-child(6)').first()).toHaveClass(/tiny-button--danger/)
45-
})

‎examples/sites/demos/pc/app/button/basic-usage.vue

+5-11
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,23 @@
11
<template>
22
<tiny-layout>
3+
<p>基本按钮</p>
34
<tiny-row>
45
<tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
5-
<tiny-button>次要按钮</tiny-button>
6+
<tiny-button> 次要按钮 </tiny-button>
67
<tiny-button type="success"> 成功按钮 </tiny-button>
78
<tiny-button type="info"> 信息按钮 </tiny-button>
89
<tiny-button type="warning"> 警告按钮 </tiny-button>
910
<tiny-button type="danger"> 危险按钮 </tiny-button>
1011
</tiny-row>
12+
<p>朴素按钮</p>
1113
<tiny-row>
1214
<tiny-button type="primary" plain> 主要按钮 </tiny-button>
13-
<tiny-button plain>次要按钮 </tiny-button>
15+
<tiny-button plain> 次要按钮 </tiny-button>
1416
<tiny-button type="success" plain> 成功按钮 </tiny-button>
1517
<tiny-button type="info" plain> 信息按钮 </tiny-button>
1618
<tiny-button type="warning" plain> 警告按钮 </tiny-button>
1719
<tiny-button type="danger" plain> 危险按钮 </tiny-button>
1820
</tiny-row>
19-
<tiny-row>
20-
<tiny-button type="primary" round> 主要按钮 </tiny-button>
21-
<tiny-button round> 圆角按钮 </tiny-button>
22-
<tiny-button type="success" round> 成功按钮 </tiny-button>
23-
<tiny-button type="info" round> 信息按钮 </tiny-button>
24-
<tiny-button type="warning" round> 警告按钮 </tiny-button>
25-
<tiny-button type="danger" round> 危险按钮 </tiny-button>
26-
</tiny-row>
2721
<tiny-row>
2822
<tiny-button :icon="IconSearch" circle></tiny-button>
2923
<tiny-button type="primary" :icon="IconEdit" circle></tiny-button>
@@ -60,7 +54,7 @@ export default {
6054

6155
<style scoped>
6256
.tiny-row {
63-
margin-bottom: 20px;
57+
margin: 20px 0;
6458
}
6559
.tiny-button {
6660
margin-bottom: 10px;

0 commit comments

Comments
 (0)