mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-15 04:29:37 +01:00
114 lines
1.8 KiB
Markdown
114 lines
1.8 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
|
|
---
|
|
|
|
## 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](/components/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{component="divider-example-orientation"}
|
|
|
|
### 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
|
|
|
|
Use the `size` prop to change the size of the divider.
|
|
|
|
::component-card
|
|
---
|
|
props:
|
|
label: Nuxt UI
|
|
size: sm
|
|
excludedProps:
|
|
- label
|
|
---
|
|
::
|
|
|
|
### 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{component="divider-example-default-slot"}
|
|
|
|
## Props
|
|
|
|
:component-props
|
|
|
|
## Config
|
|
|
|
:component-preset
|