mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-21 07:21:46 +01:00
feat(Divider): new component (#757)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Haytham A. Salama
committed by
Benjamin Canac
Benjamin Canac
parent
0c807db005
commit
eb9ce6a0dd
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<UDivider>
|
||||
<Logo class="w-28 h-6" />
|
||||
</UDivider>
|
||||
</template>
|
||||
@@ -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>
|
||||
184
docs/content/7.layout/4.divider.md
Normal file
184
docs/content/7.layout/4.divider.md
Normal file
@@ -0,0 +1,184 @@
|
||||
---
|
||||
description: Display a separator between content.
|
||||
links:
|
||||
- label: GitHub
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/layout/Divider.vue
|
||||
navigation:
|
||||
badge: New
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
You can pass `label`, `icon` or `avatar` to the divider component.
|
||||
|
||||
### Label
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
label: OR
|
||||
---
|
||||
::
|
||||
|
||||
### Icon
|
||||
|
||||
Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
icon: 'i-simple-icons-github'
|
||||
excludedProps:
|
||||
- icon
|
||||
---
|
||||
::
|
||||
|
||||
### Avatar
|
||||
|
||||
Use the [avatar](/elements/avatar) prop as an `object` and configure it with any of its props.
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
avatar:
|
||||
src: https://avatars.githubusercontent.com/u/739984?v=4
|
||||
excludedProps:
|
||||
- avatar
|
||||
---
|
||||
::
|
||||
|
||||
### Orientation
|
||||
|
||||
You can change the orientation of the divider by setting the `orientation` prop to `horizontal` or `vertical`. Defaults to `horizontal`.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:divider-example-orientation
|
||||
|
||||
#code
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
::
|
||||
|
||||
### Type
|
||||
|
||||
You can change the type of the divider by setting the `type` prop to `solid`, `dotted` or `dashed`. Defaults to `solid`.
|
||||
|
||||
::component-card{class="w-full"}
|
||||
---
|
||||
props:
|
||||
label: Nuxt UI
|
||||
type: dashed
|
||||
excludedProps:
|
||||
- label
|
||||
---
|
||||
::
|
||||
|
||||
### Size
|
||||
|
||||
You can change the size of the divider by using the `ui` prop
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
label: Nuxt UI
|
||||
ui:
|
||||
border:
|
||||
size:
|
||||
horizontal: border-t-2
|
||||
excludedProps:
|
||||
- label
|
||||
- ui
|
||||
---
|
||||
::
|
||||
|
||||
### Color
|
||||
|
||||
You can change the color of the content by using the `ui` prop
|
||||
|
||||
::component-card
|
||||
---
|
||||
props:
|
||||
label: Nuxt UI
|
||||
ui:
|
||||
label: text-primary-500 dark:text-primary-400
|
||||
excludedProps:
|
||||
- label
|
||||
- ui
|
||||
---
|
||||
::
|
||||
|
||||
## Slots
|
||||
|
||||
### `default`
|
||||
|
||||
Use the `default` slot to add content to the divider.
|
||||
|
||||
::component-example
|
||||
#default
|
||||
:divider-example-default-slot
|
||||
#code
|
||||
```vue
|
||||
<template>
|
||||
<UDivider>
|
||||
<Logo class="w-28 h-6" />
|
||||
</UDivider>
|
||||
</template>
|
||||
```
|
||||
::
|
||||
|
||||
## Props
|
||||
|
||||
:component-props
|
||||
|
||||
## Preset
|
||||
|
||||
:component-preset
|
||||
@@ -5,7 +5,7 @@
|
||||
<UPageBody prose>
|
||||
<ContentRenderer v-if="page.body" :value="page" />
|
||||
|
||||
<UDivider v-if="surround?.length" />
|
||||
<hr v-if="surround?.length">
|
||||
|
||||
<UDocsSurround :surround="(surround as ParsedContent[])" />
|
||||
</UPageBody>
|
||||
@@ -14,7 +14,7 @@
|
||||
<UDocsToc :links="page.body.toc.links">
|
||||
<template #bottom>
|
||||
<div class="hidden lg:block space-y-6 !mt-6">
|
||||
<UDivider v-if="page.body?.toc?.links?.length" dashed />
|
||||
<UDivider v-if="page.body?.toc?.links?.length" type="dashed" />
|
||||
|
||||
<UPageLinks title="Community" :links="links" />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user