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

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
This commit is contained in:
东风使命必达 2024-09-09 05:02:39 -07:00 committed by GitHub
parent 8b743d0c39
commit cb69fa9e3f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 10 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
examples/sites/demos/pc/app/button/basic-usage-composition-api.vue
View File

@ -1,29 +1,23 @@
<template>
<tiny-layout>
<p>基本按钮</p>
<tiny-row>
<tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
<tiny-button>次要按钮</tiny-button>
<tiny-button> 次要按钮 </tiny-button>
<tiny-button type="success"> 成功按钮 </tiny-button>
<tiny-button type="info"> 信息按钮 </tiny-button>
<tiny-button type="warning"> 警告按钮 </tiny-button>
<tiny-button type="danger"> 危险按钮 </tiny-button>
</tiny-row>
<p>朴素按钮</p>
<tiny-row>
<tiny-button type="primary" plain> 主要按钮 </tiny-button>
<tiny-button plain>次要按钮 </tiny-button>
<tiny-button plain> 次要按钮 </tiny-button>
<tiny-button type="success" plain> 成功按钮 </tiny-button>
<tiny-button type="info" plain> 信息按钮 </tiny-button>
<tiny-button type="warning" plain> 警告按钮 </tiny-button>
<tiny-button type="danger" plain> 危险按钮 </tiny-button>
</tiny-row>
<tiny-row>
<tiny-button type="primary" round> 主要按钮 </tiny-button>
<tiny-button round> 圆角按钮 </tiny-button>
<tiny-button type="success" round> 成功按钮 </tiny-button>
<tiny-button type="info" round> 信息按钮 </tiny-button>
<tiny-button type="warning" round> 警告按钮 </tiny-button>
<tiny-button type="danger" round> 危险按钮 </tiny-button>
</tiny-row>
<tiny-row>
<tiny-button :icon="IconSearch" circle></tiny-button>
<tiny-button type="primary" :icon="IconEdit" circle></tiny-button>
@ -49,7 +43,7 @@ const IconSearch = iconSearch()
<style scoped>
.tiny-row {
margin-bottom: 20px;
margin: 20px 0;
}
.tiny-button {
margin-bottom: 10px;

22
examples/sites/demos/pc/app/button/basic-usage.spec.ts
View File

@ -21,25 +21,3 @@ test('测试朴素按钮', async ({ page }) => {
await expect(page.getByRole('button', { name: '警告按钮' }).nth(1)).toHaveClass(/tiny-button--warning is-plain/)
await expect(page.getByRole('button', { name: '危险按钮' }).nth(1)).toHaveClass(/tiny-button--danger is-plain/)
})
test('测试圆角按钮', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('button#base')
await expect(page.getByRole('button', { name: '圆角按钮' })).toHaveClass(/is-round/)
await expect(page.getByRole('button', { name: '主要按钮' }).nth(2)).toHaveClass(/tiny-button--primary is-round/)
await expect(page.getByRole('button', { name: '成功按钮' }).nth(2)).toHaveClass(/tiny-button--success is-round/)
await expect(page.getByRole('button', { name: '信息按钮' }).nth(2)).toHaveClass(/tiny-button--info is-round/)
await expect(page.getByRole('button', { name: '警告按钮' }).nth(2)).toHaveClass(/tiny-button--warning is-round/)
await expect(page.getByRole('button', { name: '危险按钮' }).nth(2)).toHaveClass(/tiny-button--danger is-round/)
})
test('测试是否是圆形按钮', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('button#base')
await expect(page.getByRole('button', { name: '圆角按钮' })).toHaveClass(/tiny-button--default/)
await expect(page.getByRole('button', { name: '主要按钮' }).nth(2)).toHaveClass(/tiny-button--primary/)
await expect(page.locator('button:nth-child(3)').first()).toHaveClass(/tiny-button--success/)
await expect(page.locator('button:nth-child(4)').first()).toHaveClass(/tiny-button--info/)
await expect(page.locator('button:nth-child(5)').first()).toHaveClass(/tiny-button--warning/)
await expect(page.locator('button:nth-child(6)').first()).toHaveClass(/tiny-button--danger/)
})

16
examples/sites/demos/pc/app/button/basic-usage.vue
View File

@ -1,29 +1,23 @@
<template>
<tiny-layout>
<p>基本按钮</p>
<tiny-row>
<tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
<tiny-button>次要按钮</tiny-button>
<tiny-button> 次要按钮 </tiny-button>
<tiny-button type="success"> 成功按钮 </tiny-button>
<tiny-button type="info"> 信息按钮 </tiny-button>
<tiny-button type="warning"> 警告按钮 </tiny-button>
<tiny-button type="danger"> 危险按钮 </tiny-button>
</tiny-row>
<p>朴素按钮</p>
<tiny-row>
<tiny-button type="primary" plain> 主要按钮 </tiny-button>
<tiny-button plain>次要按钮 </tiny-button>
<tiny-button plain> 次要按钮 </tiny-button>
<tiny-button type="success" plain> 成功按钮 </tiny-button>
<tiny-button type="info" plain> 信息按钮 </tiny-button>
<tiny-button type="warning" plain> 警告按钮 </tiny-button>
<tiny-button type="danger" plain> 危险按钮 </tiny-button>
</tiny-row>
<tiny-row>
<tiny-button type="primary" round> 主要按钮 </tiny-button>
<tiny-button round> 圆角按钮 </tiny-button>
<tiny-button type="success" round> 成功按钮 </tiny-button>
<tiny-button type="info" round> 信息按钮 </tiny-button>
<tiny-button type="warning" round> 警告按钮 </tiny-button>
<tiny-button type="danger" round> 危险按钮 </tiny-button>
</tiny-row>
<tiny-row>
<tiny-button :icon="IconSearch" circle></tiny-button>
<tiny-button type="primary" :icon="IconEdit" circle></tiny-button>
@ -60,7 +54,7 @@ export default {
<style scoped>
.tiny-row {
margin-bottom: 20px;
margin: 20px 0;
}
.tiny-button {
margin-bottom: 10px;