v2.1.8
/
Use our Nuxt starter

DescriptionList

For instances requiring the conversion of a table row into its own table to enhance page completeness.
GitHub
Demo

Usage

Use the items prop as an array of objects to control the value of the DescriptionList:

Full name
Michael Foster
Event
Payment is made through Atol online
{
  "wait": "Loading client-side content..."
}

Legend

Use the legend prop to set the legend of the DescriptionList.

Applicant Information

Full name
Michael Foster
Event
Payment is made through Atol online
{
  "wait": "Loading client-side content..."
}

Text

Use the text prop to set the description of the DescriptionList.

Applicant Information

Personal details and application.

Full name
Michael Foster
Event
Payment is made through Atol online
{
  "wait": "Loading client-side content..."
}

Label Key

You can change the property that is used to set the label by using the label-key prop. Defaults to label.

Applicant Information

Personal details and application.

Full name
Michael Foster
Event
Payment is made through Atol online
{
  "wait": "Loading client-side content..."
}

Description Key

You can change the property that is used to set the description by using the description-key prop. Defaults to description.

Applicant Information

Personal details and application.

Full name
Michael Foster
Event
Payment is made through Atol online
{
  "wait": "Loading client-side content..."
}

Size

Use the size prop to change the size of the DescriptionList.

Applicant Information

Personal details and application.

Full name
Michael Foster
Event
Payment is made through Atol online
{
  "wait": "Loading client-side content..."
}

Examples

With icon in items

You can use the icon property to display an Icon inside the items.

Applicant Information

Personal details and application.

Line 1.1
Description 1.1
Line 1.2
Description 1.2
Description 1.3
{
  "wait": "Loading client-side content..."
}

With avatar in items

You can use the avatar property to display an Avatar inside the items.

Applicant Information

Personal details and application.

Line 1.1
Description 1.1
Line 1.2
Description 1.2
Description 1.3
{
  "wait": "Loading client-side content..."
}

With actions in items

Use the actions property to add some Button actions to the items of the DescriptionList.

Use the orientation property to change the orientation actions of the items.

Applicant Information

Personal details and application.

Line 1.1
Description 1.1
Line 1.2
Description 1.2
Line 1.3
Description 1.3
Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur qui ipsum aliquip consequat sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.
{
  "wait": "Loading client-side content..."
}

With custom slot

Use the slot property to customize a specific item.

You will have access to the following slots:

  • #{{ item.slot }}

Applicant Information

Personal details and application.

Amount

$10,560.00
Paid
Client
Employee Name
Due date
Payment method
Paid with MasterCard
{
  "wait": "Loading client-side content..."
}

API

Props

Prop Default Type
legend string
text string
labelKey'label' string

The key used to get the label from the item.

descriptionKey'description' string

The key used to get the description from the item.

items DescriptionListItem[]
size'md' "md" | "sm"
b24ui { root?: ClassNameValue; legend?: ClassNameValue; text?: ClassNameValue; container?: ClassNameValue; labelWrapper?: ClassNameValue; icon?: ClassNameValue; avatar?: ClassNameValue; avatarSize?: ClassNameValue; label?: ClassNameValue; descriptionWrapper?: ClassNameValue; description?: ClassNameValue; actions?: ClassNameValue; footer?: ClassNameValue; }

Slots

Slot Type
legend{}
text{}
leading{ item: DescriptionListItem; index: number; b24ui: object; }
label{ item: DescriptionListItem; index: number; }
description{ item: DescriptionListItem; index: number; }
actions{ item: DescriptionListItem; index: number; b24ui: object; }
content-top{ item: DescriptionListItem; index: number; b24ui: object; }
content{ item: DescriptionListItem; index: number; b24ui: object; }
content-bottom{ item: DescriptionListItem; index: number; b24ui: object; }
footer{ b24ui: object; }

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    descriptionList: {
      slots: {
        root: 'w-full shrink-0',
        legend: 'font-(--ui-font-weight-semi-bold) text-(--b24ui-typography-label-color)',
        text: 'text-(--b24ui-typography-description-color)',
        container: 'grid grid-cols-1 sm:grid-cols-[min(50%,theme(spacing.80))_auto]',
        labelWrapper: 'col-start-1 border-t first:border-none sm:border-t flex flex-nowrap flex-row items-center justify-start gap-1.5 border-(--ui-color-divider-vibrant-default) sm:border-(--ui-color-divider-vibrant-default) text-(--b24ui-typography-description-color)',
        icon: 'shrink-0 size-6 text-(--b24ui-typography-description-color)',
        avatar: 'shrink-0',
        avatarSize: '',
        label: '',
        descriptionWrapper: 'sm:border-t sm:[&:nth-child(2)]:border-none sm:border-(--ui-color-divider-vibrant-default) text-(--b24ui-typography-label-color)',
        description: '',
        actions: 'flex flex-wrap gap-1.5 shrink-0',
        footer: 'border-t border-(--ui-color-divider-vibrant-default)'
      },
      variants: {
        size: {
          sm: {
            legend: 'text-md',
            text: 'mt-1 max-w-2/3 text-(length:--ui-font-size-sm)',
            container: 'mt-2.5 text-md',
            labelWrapper: 'pt-3 sm:py-3',
            avatarSize: 'xs',
            label: '',
            descriptionWrapper: 'pb-3 pt-1 sm:py-3',
            description: '',
            footer: 'mt-2 p-2'
          },
          md: {
            legend: 'text-xl',
            text: 'mt-2 max-w-2/3 text-(length:--ui-font-size-lg) leading-5',
            container: 'mt-3 text-(length:--ui-font-size-lg)',
            labelWrapper: 'pt-3 sm:py-3',
            avatarSize: 'xs',
            label: '',
            descriptionWrapper: 'pb-3 pt-1 sm:py-3',
            description: '',
            footer: 'mt-4 p-4'
          }
        },
        orientation: {
          horizontal: {
            descriptionWrapper: 'w-full flex flex-row items-center justify-between gap-4',
            actions: 'items-center'
          },
          vertical: {
            descriptionWrapper: '',
            actions: 'items-start mt-2.5'
          }
        },
        title: {
          true: {
            description: 'mt-1'
          }
        }
      },
      compoundVariants: [],
      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: {
        descriptionList: {
          slots: {
            root: 'w-full shrink-0',
            legend: 'font-(--ui-font-weight-semi-bold) text-(--b24ui-typography-label-color)',
            text: 'text-(--b24ui-typography-description-color)',
            container: 'grid grid-cols-1 sm:grid-cols-[min(50%,theme(spacing.80))_auto]',
            labelWrapper: 'col-start-1 border-t first:border-none sm:border-t flex flex-nowrap flex-row items-center justify-start gap-1.5 border-(--ui-color-divider-vibrant-default) sm:border-(--ui-color-divider-vibrant-default) text-(--b24ui-typography-description-color)',
            icon: 'shrink-0 size-6 text-(--b24ui-typography-description-color)',
            avatar: 'shrink-0',
            avatarSize: '',
            label: '',
            descriptionWrapper: 'sm:border-t sm:[&:nth-child(2)]:border-none sm:border-(--ui-color-divider-vibrant-default) text-(--b24ui-typography-label-color)',
            description: '',
            actions: 'flex flex-wrap gap-1.5 shrink-0',
            footer: 'border-t border-(--ui-color-divider-vibrant-default)'
          },
          variants: {
            size: {
              sm: {
                legend: 'text-md',
                text: 'mt-1 max-w-2/3 text-(length:--ui-font-size-sm)',
                container: 'mt-2.5 text-md',
                labelWrapper: 'pt-3 sm:py-3',
                avatarSize: 'xs',
                label: '',
                descriptionWrapper: 'pb-3 pt-1 sm:py-3',
                description: '',
                footer: 'mt-2 p-2'
              },
              md: {
                legend: 'text-xl',
                text: 'mt-2 max-w-2/3 text-(length:--ui-font-size-lg) leading-5',
                container: 'mt-3 text-(length:--ui-font-size-lg)',
                labelWrapper: 'pt-3 sm:py-3',
                avatarSize: 'xs',
                label: '',
                descriptionWrapper: 'pb-3 pt-1 sm:py-3',
                description: '',
                footer: 'mt-4 p-4'
              }
            },
            orientation: {
              horizontal: {
                descriptionWrapper: 'w-full flex flex-row items-center justify-between gap-4',
                actions: 'items-center'
              },
              vertical: {
                descriptionWrapper: '',
                actions: 'items-start mt-2.5'
              }
            },
            title: {
              true: {
                description: 'mt-1'
              }
            }
          },
          compoundVariants: [],
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})

Accordion

This is a stacked set of collapsible panels

Empty

An empty state component.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24