Preview
Variants and Examples #
Default #
<dt-description-list
gap="100"
:items="items"
direction="row"
/>Column Direction #
<dt-description-list
gap="100"
:items="items"
direction="column"
/>Long Text #
<dt-description-list
gap="100"
:items="longTextItems"
direction="row"
/>With Term and Description Styles #
<dt-description-list
gap="100"
:items="items"
direction="row"
:termClass="[`d-fc-critical`, `d-fw-bold`]"
:descriptionClass="[`d-fc-positive`]"
/>Vue API #
import { DtDescriptionList } from '@dialpad/dialtone-vue';Props
Name
|
Default
|
Type
|
|---|---|---|
items
required
| [] | array A list of items that represent the term and the description |
descriptionClass | '' | string|array|object Used to customize the description element |
direction | 'row' |
"row"
|
"column"
The direction for the list |
gap | '100' |
"0"
|
"1"
|
"25"
|
"50"
|
"75"
|
"100"
|
"125"
|
"150"
|
"175"
|
"200"
|
"250"
|
"300"
|
"350"
|
"400"
|
"450"
|
"500"
|
"525"
|
"550"
|
"600"
|
"650"
|
"700"
|
"750"
|
"800"
Set the space between the elements |
termClass | '' | string|array|object Used to customize the term element |