Descriptions

Display multiple fields in list form

Basic usage

User Info

UsernameTom	Telephone18100000000	PlaceHefei
RemarksSchool	Address High tech District, Hefei, Anhui Province

Sizes

MiniSmallMediumLarge

With border

Username	Tom	Telephone	18100000000	Place	Hefei
Remarks	School	Address	High tech District, Hefei, Anhui Province

Without border

Username Tom	Telephone18100000000	PlaceHefei
RemarksSchool	Address High tech District, Hefei, Anhui Province

<template>
  <tu-radio-group v-model="size">
    <tu-radio label="mini">Mini</tu-radio>
    <tu-radio label="small">Small</tu-radio>
    <tu-radio label="medium">Medium</tu-radio>
    <tu-radio label="large">Large</tu-radio>
  </tu-radio-group>

  <tu-descriptions
    class="mt-2"
    title="With border"
    :column="3"
    :size="size"
    border
  >
    <template #extra>
      <tu-button :size="size">Operation</tu-button>
    </template>

    <tu-descriptions-item>
      <template #label>
        <div class="demo-descritions-cell-item">
          <tu-icon>
            <UserFilled />
          </tu-icon>
          Username
        </div>
      </template>
      Tom
    </tu-descriptions-item>
    <tu-descriptions-item label="Telephone">18100000000</tu-descriptions-item>
    <tu-descriptions-item label="Place">Hefei</tu-descriptions-item>
    <tu-descriptions-item label="Remarks">School</tu-descriptions-item>
    <tu-descriptions-item label="Address">
      High tech District, Hefei, Anhui Province
    </tu-descriptions-item>
  </tu-descriptions>

  <tu-descriptions class="mt-2" title="Without border" :column="3" :size="size">
    <template #extra>
      <tu-button :size="size">Operation</tu-button>
    </template>

    <tu-descriptions-item>
      <template #label>
        <div class="demo-descritions-cell-item">
          <tu-icon>
            <UserFilled />
          </tu-icon>
          Username
        </div>
      </template>
      Tom
    </tu-descriptions-item>
    <tu-descriptions-item label="Telephone">18100000000</tu-descriptions-item>
    <tu-descriptions-item label="Place">Hefei</tu-descriptions-item>
    <tu-descriptions-item label="Remarks">School</tu-descriptions-item>
    <tu-descriptions-item label="Address">
      High tech District, Hefei, Anhui Province
    </tu-descriptions-item>
  </tu-descriptions>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { UserFilled } from '@tu-view-plus/icons-vue';

const size = ref('medium');
</script>

<style lang="scss" scoped>
.demo-descritions-cell-item {
  display: inline-flex;
  align-items: center;
  > .tu-icon {
    margin-right: 6px;
  }
}
</style>

<template>
  <tu-radio-group v-model="size">
    <tu-radio label="mini">Mini</tu-radio>
    <tu-radio label="small">Small</tu-radio>
    <tu-radio label="medium">Medium</tu-radio>
    <tu-radio label="large">Large</tu-radio>
  </tu-radio-group>

  <tu-descriptions
    class="mt-2"
    title="With border"
    :column="3"
    :size="size"
    border
  >
    <template #extra>
      <tu-button :size="size">Operation</tu-button>
    </template>

    <tu-descriptions-item>
      <template #label>
        <div class="demo-descritions-cell-item">
          <tu-icon>
            <UserFilled />
          </tu-icon>
          Username
        </div>
      </template>
      Tom
    </tu-descriptions-item>
    <tu-descriptions-item label="Telephone">18100000000</tu-descriptions-item>
    <tu-descriptions-item label="Place">Hefei</tu-descriptions-item>
    <tu-descriptions-item label="Remarks">School</tu-descriptions-item>
    <tu-descriptions-item label="Address">
      High tech District, Hefei, Anhui Province
    </tu-descriptions-item>
  </tu-descriptions>

  <tu-descriptions class="mt-2" title="Without border" :column="3" :size="size">
    <template #extra>
      <tu-button :size="size">Operation</tu-button>
    </template>

    <tu-descriptions-item>
      <template #label>
        <div class="demo-descritions-cell-item">
          <tu-icon>
            <UserFilled />
          </tu-icon>
          Username
        </div>
      </template>
      Tom
    </tu-descriptions-item>
    <tu-descriptions-item label="Telephone">18100000000</tu-descriptions-item>
    <tu-descriptions-item label="Place">Hefei</tu-descriptions-item>
    <tu-descriptions-item label="Remarks">School</tu-descriptions-item>
    <tu-descriptions-item label="Address">
      High tech District, Hefei, Anhui Province
    </tu-descriptions-item>
  </tu-descriptions>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { UserFilled } from '@tu-view-plus/icons-vue';

const size = ref('medium');
</script>

<style lang="scss" scoped>
.demo-descritions-cell-item {
  display: inline-flex;
  align-items: center;
  > .tu-icon {
    margin-right: 6px;
  }
}
</style>

Vertical list

MiniSmallMediumLarge

With border

Username	Telephone	Place
Tom	18100000000	Hefei
Remarks	Address
School	High tech District, Hefei, Anhui Province

Without border

Username	Telephone	Place
Tom	18100000000	Hefei
Remarks	Address
School	High tech District, Hefei, Anhui Province

<template>
  <tu-radio-group v-model="size">
    <tu-radio label="mini">Mini</tu-radio>
    <tu-radio label="small">Small</tu-radio>
    <tu-radio label="medium">Medium</tu-radio>
    <tu-radio label="large">Large</tu-radio>
  </tu-radio-group>

  <tu-descriptions
    class="mt-2"
    title="With border"
    direction="vertical"
    border
    :column="4"
    :size="size"
  >
    <tu-descriptions-item label="Username">Tom</tu-descriptions-item>
    <tu-descriptions-item label="Telephone">18100000000</tu-descriptions-item>
    <tu-descriptions-item label="Place" :span="2">Hefei</tu-descriptions-item>
    <tu-descriptions-item label="Remarks">School</tu-descriptions-item>
    <tu-descriptions-item label="Address">
      High tech District, Hefei, Anhui Province
    </tu-descriptions-item>
  </tu-descriptions>

  <tu-descriptions
    class="mt-2"
    title="Without border"
    :column="4"
    :size="size"
    direction="vertical"
  >
    <tu-descriptions-item label="Username">Tom</tu-descriptions-item>
    <tu-descriptions-item label="Telephone">18100000000</tu-descriptions-item>
    <tu-descriptions-item label="Place" :span="2">Hefei</tu-descriptions-item>
    <tu-descriptions-item label="Remarks">School</tu-descriptions-item>
    <tu-descriptions-item label="Address">
      High tech District, Hefei, Anhui Province
    </tu-descriptions-item>
  </tu-descriptions>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const size = ref('medium');
</script>

<template>
  <tu-radio-group v-model="size">
    <tu-radio label="mini">Mini</tu-radio>
    <tu-radio label="small">Small</tu-radio>
    <tu-radio label="medium">Medium</tu-radio>
    <tu-radio label="large">Large</tu-radio>
  </tu-radio-group>

  <tu-descriptions
    class="mt-2"
    title="With border"
    direction="vertical"
    border
    :column="4"
    :size="size"
  >
    <tu-descriptions-item label="Username">Tom</tu-descriptions-item>
    <tu-descriptions-item label="Telephone">18100000000</tu-descriptions-item>
    <tu-descriptions-item label="Place" :span="2">Hefei</tu-descriptions-item>
    <tu-descriptions-item label="Remarks">School</tu-descriptions-item>
    <tu-descriptions-item label="Address">
      High tech District, Hefei, Anhui Province
    </tu-descriptions-item>
  </tu-descriptions>

  <tu-descriptions
    class="mt-2"
    title="Without border"
    :column="4"
    :size="size"
    direction="vertical"
  >
    <tu-descriptions-item label="Username">Tom</tu-descriptions-item>
    <tu-descriptions-item label="Telephone">18100000000</tu-descriptions-item>
    <tu-descriptions-item label="Place" :span="2">Hefei</tu-descriptions-item>
    <tu-descriptions-item label="Remarks">School</tu-descriptions-item>
    <tu-descriptions-item label="Address">
      High tech District, Hefei, Anhui Province
    </tu-descriptions-item>
  </tu-descriptions>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const size = ref('medium');
</script>

Customized style

Customized style list

Username	Tom	Telephone	18100000000	Place	Hefei
Remarks	School	Address	High tech District, Hefei, Anhui Province

Descriptions API

Descriptions Attributes

Name	Description	Type	Default
border	With or without border	`Boolean`	false
column	Numbers of Descriptions Item in one line	`Number`	3
direction	Sirection of list	`String`	horizontal
size	Size of list	`String`	medium
title	Title text, display on the top left	`String`	-
extra	Extra text, display on the top right	`String`	-

Descriptions Slots

Name	Description	Default
default	Customize default content	Descriptions Item
title	Custom title, display on the top left	-
extra	Custom extra area, display on the top right	-

DescriptionsItem API

DescriptionsItem Attributes

Name	Description	Type	Default
label	Label text	`String`	-
span	Colspan of column	`Number`	1
width	Column width, the width of the same column in different rows is set by the max value(If no border, width contains label and content)	`String` `Number`	-
min-width	Column minimum width, columns with width has a fixed width, while columns with min-width has a width that is distributed in proportion(If no border, width contains label and content)	`String` `Number`	-
align	Column content alignment(If no border, effective for both label and content)	`String`	left
label-align	Column label alignment, if omitted, the value of the above align attribute will be applied (If no border, please use align attribute)	`String`	-
class-name	Column content custom class name	`String`	-
label-class-name	Column label custom class name	`String`	-

DescriptionsItem Slots

Name	Description	Default
default	Customize default content	-
label	Custom label	-

Descriptions ​

Basic usage ​

Sizes ​

Vertical list ​

Customized style ​

Descriptions API ​

Descriptions Attributes ​

Descriptions Slots ​

DescriptionsItem API ​

DescriptionsItem Attributes ​

DescriptionsItem Slots ​

Descriptions

Basic usage

Sizes

Vertical list

Customized style

Descriptions API

Descriptions Attributes

Descriptions Slots

DescriptionsItem API

DescriptionsItem Attributes

DescriptionsItem Slots