User
Usage
Name
Use the name prop to display a name for the user.
John Doe
<template>
<PUser name="John Doe" />
</template>
Description
Use the description prop to display a description for the user.
John Doe
Software Engineer
<template>
<PUser name="John Doe" description="Software Engineer" />
</template>
Avatar
Use the avatar prop to display an Avatar component.
John Doe
Software Engineer
<template>
<PUser
name="John Doe"
description="Software Engineer"
:avatar="{
src: 'https://i.pravatar.cc/150?u=john-doe',
icon: 'i-lucide:image'
}"
/>
</template>
| Prop | Default | Type |
|---|
Chip
Use the chip prop to display a Chip component.
John Doe
Software Engineer
<template>
<PUser
name="John Doe"
description="Software Engineer"
:avatar="{
src: 'https://i.pravatar.cc/150?u=john-doe'
}"
:chip="{
color: 'primary',
position: 'top-right'
}"
/>
</template>
| Prop | Default | Type |
|---|
Size
Use the size prop to change the size of the user avatar and text.
John Doe
Software Engineer
<template>
<PUser
name="John Doe"
description="Software Engineer"
:avatar="{
src: 'https://i.pravatar.cc/150?u=john-doe'
}"
chip
size="xl"
/>
</template>
Orientation
Use the orientation prop to change the orientation. Defaults to horizontal.
John Doe
Software Engineer
<template>
<PUser
orientation="vertical"
name="John Doe"
description="Software Engineer"
:avatar="{
src: 'https://i.pravatar.cc/150?u=john-doe'
}"
/>
</template>
Link
You can pass any property from the <NuxtLink> component such as to, target, rel, etc.
<template>
<PUser
to="https://github.com/praburangki"
target="_blank"
name="praburangki"
description="Software Engineer"
:avatar="{
src: 'https://github.com/praburangki.png'
}"
/>
</template>
NuxtLink component will inherit all other attributes you pass to the User component.API
Props
| Prop | Default | Type |
|---|
Slots
| Slot | Type |
|---|
Theme
Below is the theme configuration skeleton for the PUser. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
user: {
slots: {
root: '',
wrapper: '',
name: '',
description: '',
avatar: ''
},
variants: {
orientation: {
horizontal: {
root: ''
},
vertical: {
root: ''
}
},
to: {
true: {
name: '',
description: '',
avatar: ''
},
false: {
name: '',
description: ''
}
},
size: {
'3xs': {
root: '',
wrapper: '',
name: '',
description: ''
},
'2xs': {
root: '',
wrapper: '',
name: '',
description: ''
},
xs: {
root: '',
wrapper: '',
name: '',
description: ''
},
sm: {
root: '',
name: '',
description: ''
},
md: {
root: '',
name: '',
description: ''
},
lg: {
root: '',
name: '',
description: ''
},
xl: {
root: '',
name: '',
description: ''
},
'2xl': {
root: '',
name: '',
description: ''
},
'3xl': {
root: '',
name: '',
description: ''
}
}
},
defaultVariants: {
size: 'md'
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
user: {
slots: {
root: '',
wrapper: '',
name: '',
description: '',
avatar: ''
},
variants: {
orientation: {
horizontal: {
root: ''
},
vertical: {
root: ''
}
},
to: {
true: {
name: '',
description: '',
avatar: ''
},
false: {
name: '',
description: ''
}
},
size: {
'3xs': {
root: '',
wrapper: '',
name: '',
description: ''
},
'2xs': {
root: '',
wrapper: '',
name: '',
description: ''
},
xs: {
root: '',
wrapper: '',
name: '',
description: ''
},
sm: {
root: '',
name: '',
description: ''
},
md: {
root: '',
name: '',
description: ''
},
lg: {
root: '',
name: '',
description: ''
},
xl: {
root: '',
name: '',
description: ''
},
'2xl': {
root: '',
name: '',
description: ''
},
'3xl': {
root: '',
name: '',
description: ''
}
}
},
defaultVariants: {
size: 'md'
}
}
}
};