UserPRO

GitHub
显示包含姓名、描述和头像的用户信息。

用法

姓名

使用 name prop 显示用户姓名。

John Doe

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

描述

使用 description prop 显示用户的描述。

John Doe

软件工程师

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

Avatar

使用 avatar prop 显示 Avatar 组件。

John Doe

John Doe

软件工程师

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

Chip

使用 chip prop 显示 Chip 组件。

John Doe

John Doe

软件工程师

<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>

尺寸

使用 size prop 更改用户头像和文本的尺寸。

John Doe

John Doe

软件工程师

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

方向

使用 orientation prop 更改方向。默认为 horizontal。

John Doe

John Doe

软件工程师

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

Link

您可以传递来自<NuxtLink>组件的任何属性，例如 to、target、rel 等。

Nuxt UI Pro

Nuxt UI Pro

适用于 Vue 的高级组件

<template>
  <UUser
    to="https://github.com/nuxt/ui-pro"
    target="_blank"
    name="Nuxt UI Pro"
    description="Premium components for Vue"
    :avatar="{
      src: 'https://github.com/nuxt-ui-pro.png'
    }"
  />
</template>
NuxtLink 组件将继承您传递给 User 组件的所有其他属性。

API

属性

属性默认值类型
as

'div'

any

此组件应渲染为的元素或组件。

orientation

'horizontal'

"horizontal" | "vertical"

size

'md'

"md" | "xs" | "sm" | "lg" | "xl" | "3xs" | "2xs" | "2xl" | "3xl"

target

null | "_blank" | "_parent" | "_self" | "_top" | string & {}

to

string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

description

string

name

string

avatar

Omit<AvatarProps, "size"> & { [key: string]: any; }

chip

boolean | Omit<ChipProps, "size" | "inset">

ui

{ root?: ClassNameValue; wrapper?: ClassNameValue; name?: ClassNameValue; description?: ClassNameValue; avatar?: ClassNameValue; }

插槽

插槽类型
avatar

{}

name

{}

description

{}

default

{}

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    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: {
            name: [
              'text-default peer-hover:text-highlighted',
              'transition-colors'
            ],
            description: [
              'peer-hover:text-toned',
              'transition-colors'
            ],
            avatar: 'transform transition-transform duration-200 group-hover/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({
      uiPro: {
        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: {
                name: [
                  'text-default peer-hover:text-highlighted',
                  'transition-colors'
                ],
                description: [
                  'peer-hover:text-toned',
                  'transition-colors'
                ],
                avatar: 'transform transition-transform duration-200 group-hover/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 uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        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: {
                name: [
                  'text-default peer-hover:text-highlighted',
                  'transition-colors'
                ],
                description: [
                  'peer-hover:text-toned',
                  'transition-colors'
                ],
                avatar: 'transform transition-transform duration-200 group-hover/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'
          }
        }
      }
    })
  ]
})

Tree

一个用于显示和交互层次结构数据的树形视图组件。