44 lines
1.5 KiB
Vue
44 lines
1.5 KiB
Vue
<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-start justify-center gap-4 bg-white p-4 dark:bg-gray-900">
|
|
<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="demo-block">
|
|
<a-input placeholder="Ant Design" />
|
|
<InputText placeholder="Primevue" />
|
|
<ShaInput placeholder="Shadcn" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.demo-block {
|
|
@apply flex flex-wrap gap-4 b b-solid b-red-500 p-4 dark:bg-gray-800;
|
|
}
|
|
</style>
|