docs(deps): update @nuxt/content and move content/ outside of app/

This commit is contained in:
Benjamin Canac
2024-06-20 10:39:10 +02:00
parent 11ef256db7
commit 0b8bfa887b
52 changed files with 61 additions and 89 deletions

View File

@@ -0,0 +1,132 @@
---
description: Display a chip indicator on any component.
links:
- label: GitHub
icon: i-simple-icons-github
to: https://github.com/nuxt/ui/blob/dev/src/runtime/components/elements/Chip.vue
---
## Usage
Wrap any component with the `Chip` component to display a chip indicator.
::component-card
---
code: >-
<UButton icon="i-heroicons-inbox" color="gray" />
---
#default
:u-button{icon="i-heroicons-inbox" color="gray"}
::
### Size
Use the `size` prop to change the size of the chip.
::component-card
---
props:
size: '2xl'
code: >-
<UButton icon="i-heroicons-inbox" color="gray" />
---
#default
:u-button{icon="i-heroicons-inbox" color="gray"}
::
### Color
Use the `color` prop to change the color of the chip.
::component-card
---
props:
color: 'red'
code: >-
<UButton icon="i-heroicons-inbox" color="gray" />
---
#default
:u-button{icon="i-heroicons-inbox" color="gray"}
::
### Position
Use the `position` prop to change the position of the chip.
::component-card
---
props:
position: 'bottom-right'
code: >-
<UButton icon="i-heroicons-inbox" color="gray" />
---
#default
:u-button{icon="i-heroicons-inbox" color="gray"}
::
### Text
Use the `text` prop to display text in the chip.
::component-card
---
props:
text: '3'
size: '2xl'
excludedProps:
- size
code: >-
<UButton icon="i-heroicons-inbox" color="gray" />
---
#default
:u-button{icon="i-heroicons-inbox" color="gray"}
::
### Show
Use the `show` prop to conditionally display the chip.
:component-example{component="chip-example-show"}
### Inset
Use the `inset` prop to display the chip inside the component. This is useful when dealing with rounded components.
::component-card
---
props:
inset: true
code: >-
<UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar" />
---
#default
:u-avatar{src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Avatar"}
::
## Slots
### `content`
Use the `#content` slot to fully customize the chip.
:component-example{component="chip-example-content-slot"}
## Props
:component-props
## Config
:component-preset