User

GitHub à
Afficher les informations de l

Utilisation

Nom

Utilisez la prop name pour afficher un nom pour l'utilisateur.

John Doe

<template>
  <UUser name="John Doe" />
</template>

Description

Utilisez le prop description pour afficher une description pour l'utilisateur.

John Doe

Software Engineer

<template>
  <UUser name="John Doe" description="Software Engineer" />
</template>

Avatars

Utilisez la prop avatar pour afficher un composant Avatar.

John Doe

John Doe

Software Engineer

<template>
  <UUser
    name="John Doe"
    description="Software Engineer"
    :avatar="{
      src: 'https://i.pravatar.cc/150?u=john-doe',
      loading: 'lazy',
      icon: 'i-lucide-image'
    }"
  />
</template>

Chip équipé

Utilisez le prop chip pour afficher un composant Chip.

John Doe

John Doe

Software Engineer

<template>
  <UUser
    name="John Doe"
    description="Software Engineer"
    :avatar="{
      src: 'https://i.pravatar.cc/150?u=john-doe'
    }"
    :chip="{
      color: 'primary',
      position: 'top-right'
    }"
  />
</template>

taille

Utilisez le prop size pour modifier la taille de l'avatar de l'utilisateur et du texte.

John Doe

John Doe

Software Engineer

<template>
  <UUser
    name="John Doe"
    description="Software Engineer"
    :avatar="{
      src: 'https://i.pravatar.cc/150?u=john-doe'
    }"
    chip
    size="xl"
  />
</template>

Définition

Utilisez la prop orientation pour modifier l'orientation. Par défaut à horizontal.

John Doe

John Doe

Software Engineer

<template>
  <UUser
    orientation="vertical"
    name="John Doe"
    description="Software Engineer"
    :avatar="{
      src: 'https://i.pravatar.cc/150?u=john-doe'
    }"
  />
</template>

Link équipé

Vous pouvez passer n'importe quelle propriété du composant <NuxtLink> telle que to, target, rel, etc.

Benjamin Canac

Benjamin Canac

Software Engineer

<template>
  <UUser
    to="https://github.com/benjamincanac"
    target="_blank"
    name="Benjamin Canac"
    description="Software Engineer"
    :avatar="{
      src: 'https://github.com/benjamincanac.png'
    }"
  />
</template>
Le composant NuxtLink héritera de tous les autres attributs que vous passez au composant User.

API

Props équipement

Prop Default Type
as
'div'
any

The element or component this component should render as.

name
string
description
string
avatar
Omit<AvatarProps, "size"> & { [key: string]: any; }
chip
boolean | Omit<ChipProps, "size" | "inset">
size
'md'
"md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl"
orientation
'horizontal'
"horizontal" | "vertical"

The orientation of the user.

to
string | it | et
target
null | "_blank" | "_parent" | "_self" | "_top" | string
ui
{ root?: SlotClass; wrapper?: SlotClass; name?: SlotClass; description?: SlotClass; avatar?: SlotClass; }

Slots

Slot Type
avatar
{ ui: object; }
name
{}
description
{}
default
{}

Thème

app.config.ts
export default defineAppConfig({
  ui: {
    user: {
      slots: {
        root: 'relative group/user',
        wrapper: '',
        name: 'font-medium',
        description: 'text-muted',
        avatar: 'shrink-0'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'flex items-center'
          },
          vertical: {
            root: 'flex flex-col'
          }
        },
        to: {
          true: {
            root: [
              'rounded-md outline-primary/25 has-focus-visible:outline-3',
              'transition'
            ],
            name: [
              'text-default peer-hover:text-highlighted peer-focus-visible:text-highlighted',
              'transition-colors'
            ],
            description: [
              'peer-hover:text-toned peer-focus-visible:text-toned',
              'transition-colors'
            ],
            avatar: 'transform transition-transform ease-out motion-reduce:transition-none group-hover/user:scale-115 group-has-focus-visible/user:scale-115'
          },
          false: {
            name: 'text-highlighted',
            description: ''
          }
        },
        size: {
          '3xs': {
            root: 'gap-1',
            wrapper: 'flex items-center gap-1',
            name: 'text-xs',
            description: 'text-xs'
          },
          '2xs': {
            root: 'gap-1.5',
            wrapper: 'flex items-center gap-1.5',
            name: 'text-xs',
            description: 'text-xs'
          },
          xs: {
            root: 'gap-1.5',
            wrapper: 'flex items-center gap-1.5',
            name: 'text-xs',
            description: 'text-xs'
          },
          sm: {
            root: 'gap-2',
            name: 'text-xs',
            description: 'text-xs'
          },
          md: {
            root: 'gap-2',
            name: 'text-sm',
            description: 'text-xs'
          },
          lg: {
            root: 'gap-2.5',
            name: 'text-sm',
            description: 'text-sm'
          },
          xl: {
            root: 'gap-2.5',
            name: 'text-base',
            description: 'text-sm'
          },
          '2xl': {
            root: 'gap-3',
            name: 'text-base',
            description: 'text-base'
          },
          '3xl': {
            root: 'gap-3',
            name: 'text-lg',
            description: 'text-base'
          }
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        user: {
          slots: {
            root: 'relative group/user',
            wrapper: '',
            name: 'font-medium',
            description: 'text-muted',
            avatar: 'shrink-0'
          },
          variants: {
            orientation: {
              horizontal: {
                root: 'flex items-center'
              },
              vertical: {
                root: 'flex flex-col'
              }
            },
            to: {
              true: {
                root: [
                  'rounded-md outline-primary/25 has-focus-visible:outline-3',
                  'transition'
                ],
                name: [
                  'text-default peer-hover:text-highlighted peer-focus-visible:text-highlighted',
                  'transition-colors'
                ],
                description: [
                  'peer-hover:text-toned peer-focus-visible:text-toned',
                  'transition-colors'
                ],
                avatar: 'transform transition-transform ease-out motion-reduce:transition-none group-hover/user:scale-115 group-has-focus-visible/user:scale-115'
              },
              false: {
                name: 'text-highlighted',
                description: ''
              }
            },
            size: {
              '3xs': {
                root: 'gap-1',
                wrapper: 'flex items-center gap-1',
                name: 'text-xs',
                description: 'text-xs'
              },
              '2xs': {
                root: 'gap-1.5',
                wrapper: 'flex items-center gap-1.5',
                name: 'text-xs',
                description: 'text-xs'
              },
              xs: {
                root: 'gap-1.5',
                wrapper: 'flex items-center gap-1.5',
                name: 'text-xs',
                description: 'text-xs'
              },
              sm: {
                root: 'gap-2',
                name: 'text-xs',
                description: 'text-xs'
              },
              md: {
                root: 'gap-2',
                name: 'text-sm',
                description: 'text-xs'
              },
              lg: {
                root: 'gap-2.5',
                name: 'text-sm',
                description: 'text-sm'
              },
              xl: {
                root: 'gap-2.5',
                name: 'text-base',
                description: 'text-sm'
              },
              '2xl': {
                root: 'gap-3',
                name: 'text-base',
                description: 'text-base'
              },
              '3xl': {
                root: 'gap-3',
                name: 'text-lg',
                description: 'text-base'
              }
            }
          },
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})

Changelog écrit

No recent changes

Tree

A tree view component to display and interact with hierarchical data structures.

Breadcrumb

A hierarchy of links to navigate through a website.