opentiny
/
tiny-vue
2
0
Fork 29
Code Issues Pull Requests 7 Packages Projects Releases Wiki Activity

docs(button): [button] optimize button demo (#999)

This commit is contained in:
gimmyhehe 2023-12-03 09:51:49 +08:00 committed by GitHub
parent 81c8c3da62
commit 22ebca0563
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template>
<tiny-layout>
<tiny-row>
<tiny-button>按钮</tiny-button>
<tiny-button>默认按钮</tiny-button>
<tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
<tiny-button type="success"> 成功按钮 </tiny-button>
<tiny-button type="info"> 信息按钮 </tiny-button>

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

@ -1,7 +1,7 @@
<template>
<tiny-layout>
<tiny-row>
<tiny-button>按钮</tiny-button>
<tiny-button>默认按钮</tiny-button>
<tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
<tiny-button type="success"> 成功按钮 </tiny-button>
<tiny-button type="info"> 信息按钮 </tiny-button>

1
examples/sites/demos/pc/app/button/dynamic-disabled-composition-api.vue
View File

@ -2,7 +2,6 @@
<tiny-layout>
<tiny-row> 是否禁用：<tiny-switch v-model="disabled"></tiny-switch> </tiny-row>
<tiny-row>
<tiny-button :icon="IconSearch" type="text" size="mini" :disabled="disabled"></tiny-button>
<tiny-button :disabled="disabled">默认按钮</tiny-button>
<tiny-button type="primary" :disabled="disabled">主要按钮</tiny-button>
<tiny-button type="success" :disabled="disabled">成功按钮</tiny-button>

3
examples/sites/demos/pc/app/button/dynamic-disabled.spec.js
View File

@ -9,6 +9,9 @@ test('测试禁用状态是否生效', async ({ page }) => {
await switchBtn.click()
await expect(demo.locator('.tiny-button').first()).toBeDisabled()
await expect(demo.locator('.tiny-button').first()).toHaveCSS('background-color', 'rgb(245, 245, 246)')
await expect(demo.locator('.tiny-button').first()).toHaveCSS('color', 'rgb(173, 176, 184)')
await expect(demo.locator('.tiny-button').first()).toHaveCSS('border-bottom-color', 'rgb(223, 225, 230)')
await expect(demo.getByRole('button', { name: '默认按钮' }).first()).toBeDisabled()
await expect(demo.getByRole('button', { name: '主要按钮' }).first()).toBeDisabled()
await expect(demo.getByRole('button', { name: '成功按钮' }).first()).toBeDisabled()

1
examples/sites/demos/pc/app/button/dynamic-disabled.vue
View File

@ -2,7 +2,6 @@
<tiny-layout>
<tiny-row> 是否禁用：<tiny-switch v-model="disabled"></tiny-switch> </tiny-row>
<tiny-row>
<tiny-button :icon="IconSearch" type="text" size="mini" :disabled="disabled"></tiny-button>
<tiny-button :disabled="disabled">默认按钮</tiny-button>
<tiny-button type="primary" :disabled="disabled">主要按钮</tiny-button>
<tiny-button type="success" :disabled="disabled">成功按钮</tiny-button>

3
examples/sites/demos/pc/app/button/icon-composition-api.vue
View File

@ -2,7 +2,7 @@
<div>
<tiny-layout>
<tiny-row>
<tiny-button :icon="TinyIconSearch" type="text"> </tiny-button>
<tiny-button :icon="TinyIconSearch"> 图标按钮 </tiny-button>
<tiny-button type="primary" :icon="TinyIconEdit"> 图标按钮 </tiny-button>
<tiny-button type="success" :icon="TinyIconYes"> 图标按钮 </tiny-button>
<tiny-button type="info" :icon="TinyIconMail"> 图标按钮 </tiny-button>
@ -10,6 +10,7 @@
<tiny-button type="danger" :icon="TinyIconDel"> 图标按钮 </tiny-button>
</tiny-row>
<tiny-row>
<tiny-button :icon="TinyIconSearch"> </tiny-button>
<tiny-button type="primary" :icon="TinyIconEdit"> </tiny-button>
<tiny-button type="success" :icon="TinyIconYes"> </tiny-button>
<tiny-button type="info" :icon="TinyIconMail"></tiny-button>

3
examples/sites/demos/pc/app/button/icon.vue
View File

@ -2,7 +2,7 @@
<div>
<tiny-layout>
<tiny-row>
<tiny-button :icon="IconSearch" type="text"> </tiny-button>
<tiny-button :icon="IconSearch"> 图标按钮 </tiny-button>
<tiny-button type="primary" :icon="IconEdit"> 图标按钮 </tiny-button>
<tiny-button type="success" :icon="IconYes"> 图标按钮 </tiny-button>
<tiny-button type="info" :icon="IconMail"> 图标按钮 </tiny-button>
@ -10,6 +10,7 @@
<tiny-button type="danger" :icon="IconDel"> 图标按钮 </tiny-button>
</tiny-row>
<tiny-row>
<tiny-button :icon="IconSearch"> </tiny-button>
<tiny-button type="primary" :icon="IconEdit"> </tiny-button>
<tiny-button type="success" :icon="IconYes"> </tiny-button>
<tiny-button type="info" :icon="IconMail"></tiny-button>