Advice

A couple of lines of text and an avatar

Usage

Description

Use the description prop to set the description of the Advice.

description

Let's signal the manager that the deal is not moving, the manager does not call the client back and does not respond to his messages. Let's assign a task to the manager on behalf of the manager

{
  "wait": "Loading client-side content..."
}

Icon

Use the icon prop to show an Icon.

Let's signal the manager that the deal is not moving, the manager does not call the client back and does not respond to his messages. Let's assign a task to the manager on behalf of the manager

{
  "wait": "Loading client-side content..."
}

Avatar

Use the avatar prop to show an Avatar.

Let's signal the manager that the deal is not moving, the manager does not call the client back and does not respond to his messages. Let's assign a task to the manager on behalf of the manager

{
  "wait": "Loading client-side content..."
}

Angle

Use the angle prop to change the color the position of the corner.

angle

Let's signal the manager that the deal is not moving, the manager does not call the client back and does not respond to his messages. Let's assign a task to the manager on behalf of the manager

{
  "wait": "Loading client-side content..."
}

With custom slot

Use the slot property to customize a description.

Typically, instructions on how to add a SAML application and add the ACS URL and SP Entity ID can be found in the Microsoft Azure technical documentation. Read more

Reference information

Typically, instructions on how to add a SAML application and add the ACS URL and SP Entity ID can be found in the Microsoft Azure technical documentation.

{
  "wait": "Loading client-side content..."
}

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`description`		`string`
`angle`	`'bottom'`	`"bottom" \| "top"`
`icon`		`IconComponent` Display an icon on the left side.
`avatar`		`AvatarProps` Display an avatar on the left side.
`b24ui`		`{ root?: ClassNameValue; descriptionWrapper?: ClassNameValue; descriptionBorder?: ClassNameValue; descriptionBg?: ClassNameValue; descriptionAngle?: ClassNameValue; description?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarIcon?: ClassNameValue; leadingAvatarSize?: ClassNameValue; }`

Slots

Slot	Type
`leading`	`{ b24ui: object; }`
`default`	`{}`

Theme

app.config.ts

export default defineAppConfig({
  b24ui: {
    advice: {
      slots: {
        root: 'light style-outline-accent-1 flex items-end',
        descriptionWrapper: 'relative',
        descriptionBorder: 'fill-(--b24ui-border-color)',
        descriptionBg: 'fill-(--b24ui-background) dark:fill-(--ui-color-base-6)',
        descriptionAngle: 'absolute w-[14px] h-[12px]',
        description: 'grow w-11/12 py-3 px-md2 ms-2 rounded-[23px] font-[family-name:var(--ui-font-family-secondary)] text-(length:--ui-font-size-md)/(--ui-font-line-height-md) font-(--ui-font-weight-normal) border-1 border-(--b24ui-border-color) bg-(--b24ui-background) text-(--b24ui-color) dark:bg-(--ui-color-base-6)',
        leading: 'me-1.5 ms-2 font-(--ui-font-weight-medium) text-(--ui-color-design-plain-content-icon-secondary)',
        leadingIcon: 'shrink-0 size-[42px]',
        leadingAvatar: 'shrink-0',
        leadingAvatarIcon: 'text-(--b24ui-typography-label-color) bg-(--ui-color-base-8)',
        leadingAvatarSize: 'lg'
      },
      variants: {
        angle: {
          top: {
            root: 'items-start',
            leading: 'mt-0.5',
            descriptionAngle: 'start-[0.8px] top-[9px] scale-x-100 -scale-y-100 rtl:-scale-x-100'
          },
          bottom: {
            root: 'items-end',
            descriptionAngle: 'start-[0.8px] bottom-[9px] rtl:-scale-x-100'
          }
        }
      },
      defaultVariants: {
        angle: 'bottom'
      }
    }
  }
})

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: {
        advice: {
          slots: {
            root: 'light style-outline-accent-1 flex items-end',
            descriptionWrapper: 'relative',
            descriptionBorder: 'fill-(--b24ui-border-color)',
            descriptionBg: 'fill-(--b24ui-background) dark:fill-(--ui-color-base-6)',
            descriptionAngle: 'absolute w-[14px] h-[12px]',
            description: 'grow w-11/12 py-3 px-md2 ms-2 rounded-[23px] font-[family-name:var(--ui-font-family-secondary)] text-(length:--ui-font-size-md)/(--ui-font-line-height-md) font-(--ui-font-weight-normal) border-1 border-(--b24ui-border-color) bg-(--b24ui-background) text-(--b24ui-color) dark:bg-(--ui-color-base-6)',
            leading: 'me-1.5 ms-2 font-(--ui-font-weight-medium) text-(--ui-color-design-plain-content-icon-secondary)',
            leadingIcon: 'shrink-0 size-[42px]',
            leadingAvatar: 'shrink-0',
            leadingAvatarIcon: 'text-(--b24ui-typography-label-color) bg-(--ui-color-base-8)',
            leadingAvatarSize: 'lg'
          },
          variants: {
            angle: {
              top: {
                root: 'items-start',
                leading: 'mt-0.5',
                descriptionAngle: 'start-[0.8px] top-[9px] scale-x-100 -scale-y-100 rtl:-scale-x-100'
              },
              bottom: {
                root: 'items-end',
                descriptionAngle: 'start-[0.8px] bottom-[9px] rtl:-scale-x-100'
              }
            }
          },
          defaultVariants: {
            angle: 'bottom'
          }
        }
      }
    })
  ]
})

SidebarLayout

You incorporate a sidebar in the slider and CRM entity tab embedding. Overall, it's stylish, trendy, and youthful

Alert

An alert designed to capture the user's attention.