DescriptionList

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

Git

Demo

We are still updating this page

Some data may be missing here — we will complete it shortly.

Items

Use the items prop as an array of objects with the following properties:

• label?: string
• icon?: FunctionalComponent<HTMLAttributes & VNodeProps>
• avatar?: AvatarProps
• slot?: string
• description?: string
• orientation?: "horizontal" | "vertical"
• actions?: ButtonProps[]
• class?: any
• b24ui?: { labelWrapper?: ClassNameValue, icon?: ClassNameValue, avatar?: ClassNameValue, label?: ClassNameValue, descriptionWrapper?: ClassNameValue, description?: ClassNameValue, actions?: ClassNameValue }

Usage

Simple

Details

<script setup lang="ts">
const itemsSimple = [
  {
    label: 'Full name',
    description: 'Michael Foster'
  },
  {
    label: 'Event',
    description: 'Payment is made through Atol online'
  },
  {
    label: 'Line 1.3',
    description: 'Description 1.3',
    class: 'text-ai-500'
  },
  {
    label: 'Line 1.4',
    description: 'Description 1.4',
    b24ui: {
      description: 'font-semibold'
    }
  }
]
</script>

<template>
  <B24DescriptionList
    legend="Applicant Information"
    text="Personal details and application."
    :items="itemsSimple"
  />
</template>

Icons

Details

<script setup lang="ts">
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'
import PersonIcon from '@bitrix24/b24icons-vue/main/PersonIcon'

const itemsIcons = [
  {
    label: 'Line 1.1',
    description: 'Description 1.1',
    avatar: {
      src: '/b24ui/avatar/employee.png'
    }
  },
  {
    label: 'Line 1.2',
    description: 'Description 1.2',
    icon: SignIcon
  },
  {
    label: 'Line 1.3',
    description: 'Description 1.3',
    avatar: {
      icon: PersonIcon
    }
  },
  {
    description: 'Description 1.4',
    icon: SignIcon
  }
]
</script>

<template>
  <B24DescriptionList
    legend="Applicant Information"
    text="Personal details and application."
    :items="itemsIcons"
  />
</template>

Actions

Details

<script setup lang="ts">
import type { ButtonProps } from '@bitrix24/b24ui-nuxt/types/index.ts'
import type { DescriptionListItem } from '@bitrix24/b24ui-nuxt/components/DescriptionList.vue'
import SignIcon from '@bitrix24/b24icons-vue/main/SignIcon'
import DotsIcon from '@bitrix24/b24icons-vue/button/DotsIcon'

const action = (color: string): ButtonProps[] => [
  {
    icon: DotsIcon,
    color: color as any,
    depth: 'light',
    onClick() {
      console.log('Action clicked')
    }
  }
]

const multipleActions = (color: string): ButtonProps[] => [
  {
    label: 'Action',
    color: color as any,
    onClick() {
      console.log('Action clicked')
    }
  },
  {
    label: 'Another action',
    color: color as any,
    onClick() {
      console.log('Another action clicked')
    }
  },
  {
    label: 'One more action',
    color: color as any,
    onClick() {
      console.log('One more action clicked')
    }
  },
  {
    label: 'And one more',
    color: color as any,
    icon: SignIcon,
    onClick() {
      console.log('And one more clicked')
    }
  },
  {
    label: 'Last one',
    color: color as any,
    icon: DotsIcon,
    onClick() {
      console.log('Last one clicked')
    }
  }
]

const itemsActions: DescriptionListItem[] = [
  {
    label: 'Line 2.1',
    description: 'Description 2.1',
    actions: action('link'),
    orientation: 'horizontal' as const
  },
  {
    label: 'Line 2.2',
    description: 'Description 2.2',
    actions: action('primary'),
    orientation: 'horizontal' as const
  },
  {
    label: 'Line 2.3',
    description: 'Description 2.3',
    actions: action('link'),
    orientation: 'horizontal' as const
  },
  {
    label: 'Line 2.4',
    description: '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.',
    actions: multipleActions('default')
  }
]
</script>

<template>
  <B24DescriptionList
    legend="Applicant Information"
    text="Personal details and application."
    :items="itemsActions"
  />
</template>

Custom

Details

<script setup lang="ts">
import type { DescriptionListItem } from '@bitrix24/b24ui-nuxt/components/DescriptionList.vue'
import DownloadDoubleIcon from '@bitrix24/b24icons-vue/actions/DownloadDoubleIcon'
import PersonIcon from '@bitrix24/b24icons-vue/main/PersonIcon'
import Calendar1Icon from '@bitrix24/b24icons-vue/main/Calendar1Icon'
import CreditDebitCardIcon from '@bitrix24/b24icons-vue/main/CreditDebitCardIcon'

const itemsCustom: (DescriptionListItem & { value?: Date | string })[] = [
  {
    label: 'Amount',
    value: 'Paid',
    description: '$10,560.00',
    b24ui: {
      label: 'font-semibold text-md leading-6 text-base-900 dark:text-base-150',
      description: 'font-semibold text-lg block w-full'
    }
  },
  {
    label: 'Client',
    avatar: {
      icon: PersonIcon
    },
    description: 'Employee Name',
    b24ui: {
      description: 'font-semibold'
    }
  },
  {
    label: 'Due date',
    icon: Calendar1Icon,
    value: new Date('2023-01-31T03:24:00')
  },
  {
    label: 'Payment method',
    icon: CreditDebitCardIcon,
    description: 'Paid with MasterCard'
  }
]
</script>

<template>
  <B24DescriptionList
    legend="Applicant Information"
    text="Personal details and application."
    class="pt-4 ring rounded-md bg-base-30 ring-base-200 dark:bg-base-800 dark:ring-base-600"
    :items="itemsCustom"
    :b24ui="{
      legend: 'sr-only',
      text: 'sr-only',
      labelWrapper: 'px-4',
      container: '',
      descriptionWrapper: 'px-4',
      footer: 'mt-4 px-4 py-6 flex flex-row flex-nowrap justify-end items-center'
    }"
  >
    <template #description="{ item }">
      <template v-if="item.label === 'Amount'">
        <div class="flex flex-wrap flex-row items-start justify-between gap-4">
          <div>
            {{ item.description }}
          </div>
          <B24Badge
            :label="item?.value?.toString()"
            class="font-semibold"
            color="success"
            depth="light"
            use-fill
            size="lg"
          />
        </div>
      </template>
      <template v-else-if="item.label === 'Due date'">
        <time :datetime="(item?.value as Date)?.toISOString()">{{ (item?.value as Date)?.toDateString() }}</time>
      </template>
      <template v-else>
        {{ item.description }}
      </template>
    </template>
    <template #footer>
      <B24Button
        color="primary"
        label="Download receipt"
        :icon="DownloadDoubleIcon"
        rounded
      />
    </template>
  </B24DescriptionList>
</template>

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; ... 7 more ...; footer?: ClassNameValue; }

Slots

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