arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Divider): new component (#757)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Haytham A. Salama
2023-10-05 15:43:58 +03:00
committed by Benjamin Canac
parent 0c807db005
commit eb9ce6a0dd
6 changed files with 384 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
docs/components/content/examples/DividerExampleDefaultSlot.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<UDivider>
<Logo class="w-28 h-6" />
</UDivider>
</template>

47
docs/components/content/examples/DividerExampleOrientation.vue Normal file
View File

@@ -0,0 +1,47 @@
<script setup>
const form = reactive({ email: 'mail@example.com', password: 'password' })
</script>
<template>
<div class="w-full flex flex-col gap-y-4">
<UCard :ui="{ body: { base: 'grid grid-cols-3' } }">
<div class="space-y-4">
<UFormGroup label="Email" name="email">
<UInput v-model="form.email" />
</UFormGroup>
<UFormGroup label="Password" name="password">
<UInput v-model="form.password" type="password" />
</UFormGroup>
<UButton label="Login" color="gray" block />
</div>
<UDivider label="OR" color="gray" orientation="vertical" />
<div class="space-y-4 flex flex-col justify-center">
<UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
<UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
</div>
</UCard>
<UCard>
<div class="space-y-4">
<UFormGroup label="Email" name="email">
<UInput v-model="form.email" />
</UFormGroup>
<UFormGroup label="Password" name="password">
<UInput v-model="form.password" type="password" />
</UFormGroup>
<UButton label="Login" color="gray" block />
<UDivider label="OR" color="gray" />
<UButton color="black" label="Login with GitHub" icon="i-simple-icons-github" block />
<UButton color="black" label="Login with Google" icon="i-simple-icons-google" block />
</div>
</UCard>
</div>
</template>