mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-21 07:21:46 +01:00
185 lines
3.5 KiB
Markdown
185 lines
3.5 KiB
Markdown
---
|
|
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
|