User

GitHub también
Mostrar información del usuario con nombre, descripción y avatar.

xph0000xUso

Nombre

Utilice el prop name para mostrar un nombre para el usuario.

John Doe

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

Descripción

Utilice el prop description para mostrar una descripción para el usuario.

John Doe

Software Engineer

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

Avatar en Español

Utilice el prop avatar para mostrar un componente 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 (Edición española)

Utilice el prop chip para mostrar un componente 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>

Tamaño

Utilice el prop size para cambiar el tamaño del avatar del usuario y el texto.

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>

Orientación

Utilice el prop orientation para cambiar la orientación. Predeterminados a 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 (Edición española)

Puede pasar cualquier propiedad del componente <NuxtLink> como 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>
El componente NuxtLink heredará todos los demás atributos que pase al componente User.

API (Edición española)

Props (accesorios)

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 en línea

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

Temas

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 (Edición española)

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.