v2.4.1

User

A component to display user details, including their name, bio, and profile picture.
GitHub
Demo
Nuxt UI

Usage

Name

Use the name prop to display a name for the user.

John Doe

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

Description

Use the description prop to display a description for the user.

John Doe

Software Engineer

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

Avatar

Use the avatar prop to display an Avatar component.

John Doe

John Doe

Software Engineer

<template>
  <B24User
    name="John Doe"
    description="Software Engineer"
    :avatar="{
      src: '/b24ui/avatar/employee.png'
    }"
  />
</template>

Chip

Use the chip prop to display a Chip component.

John Doe

John Doe

Software Engineer

<template>
  <B24User
    name="John Doe"
    description="Software Engineer"
    :avatar="{
      src: '/b24ui/avatar/employee.png'
    }"
    :chip="{
      color: 'primary',
      position: 'top-right'
    }"
  />
</template>

Size

Use the size prop to change the size of the user avatar and text.

John Doe

John Doe

Software Engineer

<template>
  <B24User
    name="John Doe"
    description="Software Engineer"
    :avatar="{
      src: '/b24ui/avatar/employee.png'
    }"
    chip
    size="xl"
  />
</template>

Orientation

Use the orientation prop to change the orientation. Defaults to horizontal.

John Doe

John Doe

Software Engineer

<template>
  <B24User
    orientation="vertical"
    name="John Doe"
    description="Software Engineer"
    :avatar="{
      src: '/b24ui/avatar/employee.png'
    }"
  />
</template>

Link

You can pass any property from the <NuxtLink> component such as to, target, rel, etc.

Username

Username

User description

<template>
  <B24User
    to="https://github.com/bitrix24"
    target="_blank"
    name="Username"
    description="User description"
    :avatar="{
      src: 'https://github.com/bitrix24.png'
    }"
  />
</template>
The NuxtLink component will inherit all other attributes you pass to the User component.

API

Props

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; }
chipboolean | 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 | kt | Tt
target null | "_blank" | "_parent" | "_self" | "_top" | string & {}
b24ui { root?: ClassNameValue; wrapper?: ClassNameValue; name?: ClassNameValue; description?: ClassNameValue; avatar?: ClassNameValue; }

Slots

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

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    user: {
      slots: {
        root: 'relative group/user',
        wrapper: '',
        name: 'font-(--ui-font-weight-medium)',
        description: 'text-(--b24ui-typography-description-color)',
        avatar: 'shrink-0'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'flex items-center'
          },
          vertical: {
            root: 'flex flex-col'
          }
        },
        to: {
          true: {
            name: 'text-(--b24ui-typography-label-color) peer-hover:text-(--ui-color-design-selection-content) peer-focus-visible:text-(--ui-color-design-selection-content) transition-colors',
            description: 'peer-hover:text-(--ui-color-design-selection-content) peer-focus-visible:text-(--ui-color-design-selection-content) transition-colors',
            avatar: 'transform transition-transform duration-200 group-hover/user:scale-115 group-has-focus-visible/user:scale-115'
          },
          false: {
            name: 'text-(--b24ui-typography-label-color)',
            description: ''
          }
        },
        size: {
          '3xs': {
            root: 'gap-1',
            wrapper: 'flex items-center gap-1',
            name: 'text-(length:--ui-font-size-xs)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          '2xs': {
            root: 'gap-1.5',
            wrapper: 'flex items-center gap-1.5',
            name: 'text-(length:--ui-font-size-xs)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          xs: {
            root: 'gap-1.5',
            wrapper: 'flex items-center gap-1.5',
            name: 'text-(length:--ui-font-size-xs)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          sm: {
            root: 'gap-2',
            name: 'text-(length:--ui-font-size-xs)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          md: {
            root: 'gap-2',
            name: 'text-(length:--ui-font-size-sm)',
            description: 'text-(length:--ui-font-size-xs)'
          },
          lg: {
            root: 'gap-2.5',
            name: 'text-(length:--ui-font-size-sm)',
            description: 'text-(length:--ui-font-size-sm)'
          },
          xl: {
            root: 'gap-2.5',
            name: 'text-(length:--ui-font-size-md)',
            description: 'text-(length:--ui-font-size-sm)'
          },
          '2xl': {
            root: 'gap-3',
            name: 'text-(length:--ui-font-size-md)',
            description: 'text-(length:--ui-font-size-md)'
          },
          '3xl': {
            root: 'gap-3',
            name: 'text-(length:--ui-font-size-lg)',
            description: 'text-(length:--ui-font-size-md)'
          }
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        user: {
          slots: {
            root: 'relative group/user',
            wrapper: '',
            name: 'font-(--ui-font-weight-medium)',
            description: 'text-(--b24ui-typography-description-color)',
            avatar: 'shrink-0'
          },
          variants: {
            orientation: {
              horizontal: {
                root: 'flex items-center'
              },
              vertical: {
                root: 'flex flex-col'
              }
            },
            to: {
              true: {
                name: 'text-(--b24ui-typography-label-color) peer-hover:text-(--ui-color-design-selection-content) peer-focus-visible:text-(--ui-color-design-selection-content) transition-colors',
                description: 'peer-hover:text-(--ui-color-design-selection-content) peer-focus-visible:text-(--ui-color-design-selection-content) transition-colors',
                avatar: 'transform transition-transform duration-200 group-hover/user:scale-115 group-has-focus-visible/user:scale-115'
              },
              false: {
                name: 'text-(--b24ui-typography-label-color)',
                description: ''
              }
            },
            size: {
              '3xs': {
                root: 'gap-1',
                wrapper: 'flex items-center gap-1',
                name: 'text-(length:--ui-font-size-xs)',
                description: 'text-(length:--ui-font-size-xs)'
              },
              '2xs': {
                root: 'gap-1.5',
                wrapper: 'flex items-center gap-1.5',
                name: 'text-(length:--ui-font-size-xs)',
                description: 'text-(length:--ui-font-size-xs)'
              },
              xs: {
                root: 'gap-1.5',
                wrapper: 'flex items-center gap-1.5',
                name: 'text-(length:--ui-font-size-xs)',
                description: 'text-(length:--ui-font-size-xs)'
              },
              sm: {
                root: 'gap-2',
                name: 'text-(length:--ui-font-size-xs)',
                description: 'text-(length:--ui-font-size-xs)'
              },
              md: {
                root: 'gap-2',
                name: 'text-(length:--ui-font-size-sm)',
                description: 'text-(length:--ui-font-size-xs)'
              },
              lg: {
                root: 'gap-2.5',
                name: 'text-(length:--ui-font-size-sm)',
                description: 'text-(length:--ui-font-size-sm)'
              },
              xl: {
                root: 'gap-2.5',
                name: 'text-(length:--ui-font-size-md)',
                description: 'text-(length:--ui-font-size-sm)'
              },
              '2xl': {
                root: 'gap-3',
                name: 'text-(length:--ui-font-size-md)',
                description: 'text-(length:--ui-font-size-md)'
              },
              '3xl': {
                root: 'gap-3',
                name: 'text-(length:--ui-font-size-lg)',
                description: 'text-(length:--ui-font-size-md)'
              }
            }
          },
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})

Timeline

A component for displaying a chronological sequence of events, with dates, titles, and supporting icons or avatars.

Breadcrumb

A breadcrumb navigation component.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24