examples/vue-ts-example
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

feat: 添加输入组件并更新 UI 组件页面布局
All checks were successful
/ depcheck (push) Successful in 2m31s
Details
/ lint-build-and-check (push) Successful in 2m34s
Details
/ build-and-deploy-to-vercel (push) Successful in 3m37s
Details
/ surge (push) Successful in 2m54s
Details
/ playwright (push) Successful in 5m22s
Details

Browse Source
This commit is contained in:
mini2024
2025-03-24 00:54:43 +08:00
parent 22d3eedea0
commit cf95ef7e8e
3 changed files with 58 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/pages/UI-components/Components/index.page.vue
View File

@ -1,35 +1,43 @@
<script setup lang="ts">
import { Button as ShadcnButton } from '@/shadcn/components/ui/button';
import { Input as ShaInput } from '@/shadcn/components/ui/input';
</script>
<template>
<div class="flex flex-col items-center justify-center space-y-4 bg-white p-4">
<div class="flex flex-wrap gap-4" b="1px solid red" p="4">
<a-button type="primary">Primary Button</a-button>
<a-button>Default Button</a-button>
<a-button type="dashed">Dashed Button</a-button>
<a-button type="text">Text Button</a-button>
<a-button type="link">Link Button</a-button>
<div class="flex flex-col items-start justify-center gap-4 bg-white p-4">
<div class="demo-block">
<div class="demo-block">
<a-button type="primary">Primary Button</a-button>
<a-button>Default Button</a-button>
<a-button type="dashed">Dashed Button</a-button>
<a-button type="text">Text Button</a-button>
<a-button type="link">Link Button</a-button>
</div>
<div class="demo-block">
<Button label="PrimevueButton" />
<Button variant="outlined" label="Outlined" />
<Button variant="text" label="Text" />
<Button variant="link" label="Link" />
</div>
<div class="demo-block">
<ShadcnButton>ShadcnButton</ShadcnButton>
<ShadcnButton variant="secondary">Secondary</ShadcnButton>
<ShadcnButton variant="destructive">Destructive</ShadcnButton>
<ShadcnButton variant="outline">Outline</ShadcnButton>
<ShadcnButton variant="ghost">Ghost</ShadcnButton>
<ShadcnButton variant="link">Link</ShadcnButton>
</div>
</div>
<div class="flex space-x-4" b="1px solid red" p="4">
<Button label="PrimevueButton" />
<Button variant="outlined" label="Outlined" />
<Button variant="text" label="Text" />
<Button variant="link" label="Link" />
</div>
<div class="flex space-x-4" b="1px solid red" p="4">
<ShadcnButton>ShadcnButton</ShadcnButton>
<ShadcnButton variant="secondary">Secondary</ShadcnButton>
<ShadcnButton variant="destructive">Destructive</ShadcnButton>
<ShadcnButton variant="outline">Outline</ShadcnButton>
<ShadcnButton variant="ghost">Ghost</ShadcnButton>
<ShadcnButton variant="link">Link</ShadcnButton>
</div>
<div class="flex space-x-4" b="1px solid red" p="4">
<a-input placeholder="Basic usage" />
<div class="demo-block">
<a-input placeholder="Ant Design" />
<InputText placeholder="Primevue" />
<ShaInput placeholder="Shadcn" />
</div>
</div>
</template>
<style scoped></style>
<style scoped>
.demo-block {
@apply flex flex-wrap gap-4 b b-solid b-red-500 p-4;
}
</style>