Descriptions 描述列表 ​

<template>
  <u-descriptions title="User Info">
    <u-descriptions-item label="Username">kooriookami</u-descriptions-item>
    <u-descriptions-item label="Telephone">18100000000</u-descriptions-item>
    <u-descriptions-item label="Place">Suzhou</u-descriptions-item>
    <u-descriptions-item label="Remarks">
      <u-tag size="small">School</u-tag>
    </u-descriptions-item>
    <u-descriptions-item label="Address">
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </u-descriptions-item>
  </u-descriptions>
</template>

<template>
  <u-radio-group v-model="size">
    <u-radio value="large">Large</u-radio>
    <u-radio value="default">Default</u-radio>
    <u-radio value="small">Small</u-radio>
  </u-radio-group>

  <u-descriptions
    class="margin-top"
    title="With border"
    :column="3"
    :size="size"
    border
  >
    <template #extra>
      <u-button type="primary">Operation</u-button>
    </template>
    <u-descriptions-item>
      <template #label>
        <div class="cell-item">
          <u-icon :style="iconStyle">
            <user />
          </u-icon>
          Username
        </div>
      </template>
      kooriookami
    </u-descriptions-item>
    <u-descriptions-item>
      <template #label>
        <div class="cell-item">
          <u-icon :style="iconStyle">
            <iphone />
          </u-icon>
          Telephone
        </div>
      </template>
      18100000000
    </u-descriptions-item>
    <u-descriptions-item>
      <template #label>
        <div class="cell-item">
          <u-icon :style="iconStyle">
            <location />
          </u-icon>
          Place
        </div>
      </template>
      Suzhou
    </u-descriptions-item>
    <u-descriptions-item>
      <template #label>
        <div class="cell-item">
          <u-icon :style="iconStyle">
            <tickets />
          </u-icon>
          Remarks
        </div>
      </template>
      <u-tag size="small">School</u-tag>
    </u-descriptions-item>
    <u-descriptions-item>
      <template #label>
        <div class="cell-item">
          <u-icon :style="iconStyle">
            <office-building />
          </u-icon>
          Address
        </div>
      </template>
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </u-descriptions-item>
  </u-descriptions>

  <u-descriptions
    class="margin-top"
    title="Without border"
    :column="3"
    :size="size"
    :style="blockMargin"
  >
    <template #extra>
      <u-button type="primary">Operation</u-button>
    </template>
    <u-descriptions-item label="Username">kooriookami</u-descriptions-item>
    <u-descriptions-item label="Telephone">18100000000</u-descriptions-item>
    <u-descriptions-item label="Place">Suzhou</u-descriptions-item>
    <u-descriptions-item label="Remarks">
      <u-tag size="small">School</u-tag>
    </u-descriptions-item>
    <u-descriptions-item label="Address">
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </u-descriptions-item>
  </u-descriptions>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from '@uniboot/icons-vue'

import type { ComponentSize } from 'uniboot-ui'

const size = ref<ComponentSize>('default')

const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px',
  }
  return {
    marginTop: marginMap[size.value] || marginMap.default,
  }
})
</script>

<style scoped>
.u-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>

<template>
  <u-radio-group v-model="size">
    <u-radio value="large">Large</u-radio>
    <u-radio value="default">Default</u-radio>
    <u-radio value="small">Small</u-radio>
  </u-radio-group>

  <u-descriptions
    title="Vertical list with border"
    direction="vertical"
    :column="4"
    :size="size"
    border
  >
    <u-descriptions-item label="Username">kooriookami</u-descriptions-item>
    <u-descriptions-item label="Telephone">18100000000</u-descriptions-item>
    <u-descriptions-item label="Place" :span="2">Suzhou</u-descriptions-item>
    <u-descriptions-item label="Remarks">
      <u-tag size="small">School</u-tag>
    </u-descriptions-item>
    <u-descriptions-item label="Address">
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </u-descriptions-item>
  </u-descriptions>

  <u-descriptions
    title="Vertical list without border"
    :column="4"
    :size="size"
    direction="vertical"
    :style="blockMargin"
  >
    <u-descriptions-item label="Username">kooriookami</u-descriptions-item>
    <u-descriptions-item label="Telephone">18100000000</u-descriptions-item>
    <u-descriptions-item label="Place" :span="2">Suzhou</u-descriptions-item>
    <u-descriptions-item label="Remarks">
      <u-tag size="small">School</u-tag>
    </u-descriptions-item>
    <u-descriptions-item label="Address">
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </u-descriptions-item>
  </u-descriptions>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

import type { ComponentSize } from 'uniboot-ui'

const size = ref<ComponentSize>('default')

const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px',
  }
  return {
    marginTop: marginMap[size.value] || marginMap.default,
  }
})
</script>

<style scoped>
.u-descriptions {
  margin-top: 20px;
}
</style>

<template>
  <u-descriptions title="Width horizontal list" border>
    <u-descriptions-item
      :rowspan="2"
      :width="140"
      label="Photo"
      align="center"
    >
      <u-image
        style="width: 100px; height: 100px"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
    </u-descriptions-item>
    <u-descriptions-item label="Username">kooriookami</u-descriptions-item>
    <u-descriptions-item label="Telephone">18100000000</u-descriptions-item>
    <u-descriptions-item label="Place">Suzhou</u-descriptions-item>
    <u-descriptions-item label="Remarks">
      <u-tag size="small">School</u-tag>
    </u-descriptions-item>
    <u-descriptions-item label="Address">
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </u-descriptions-item>
  </u-descriptions>

  <u-descriptions
    title="Width vertical list"
    direction="vertical"
    border
    style="margin-top: 20px"
  >
    <u-descriptions-item
      :rowspan="2"
      :width="140"
      label="Photo"
      align="center"
    >
      <u-image
        style="width: 100px; height: 100px"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
    </u-descriptions-item>
    <u-descriptions-item label="Username">kooriookami</u-descriptions-item>
    <u-descriptions-item label="Telephone">18100000000</u-descriptions-item>
    <u-descriptions-item label="Place">Suzhou</u-descriptions-item>
    <u-descriptions-item label="Remarks">
      <u-tag size="small">School</u-tag>
    </u-descriptions-item>
    <u-descriptions-item label="Address">
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </u-descriptions-item>
  </u-descriptions>
</template>

<template>
  <u-descriptions title="Customized style list" :column="3" border>
    <u-descriptions-item
      label="Username"
      label-align="right"
      align="center"
      label-class-name="my-label"
      class-name="my-content"
      width="150px"
    >
      kooriookami
    </u-descriptions-item>
    <u-descriptions-item label="Telephone" label-align="right" align="center">
      18100000000
    </u-descriptions-item>
    <u-descriptions-item label="Place" label-align="right" align="center">
      Suzhou
    </u-descriptions-item>
    <u-descriptions-item label="Remarks" label-align="right" align="center">
      <u-tag size="small">School</u-tag>
    </u-descriptions-item>
    <u-descriptions-item label="Address" label-align="right" align="center">
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </u-descriptions-item>
  </u-descriptions>
</template>

<style scoped>
:deep(.my-label) {
  background: var(--u-color-success-light-9) !important;
}
:deep(.my-content) {
  background: var(--u-color-danger-light-9);
}
</style>

<template>
  <div class="label-align-demo">
    <div style="margin-bottom: 24px">
      <p style="margin-bottom: 8px; color: #606266; font-size: 14px">
        无边框模式 - 标签左对齐（默认）
      </p>
      <u-descriptions title="用户信息" :column="1">
        <u-descriptions-item label="用户名" label-align="left"
          >张三</u-descriptions-item
        >
        <u-descriptions-item label="手机号" label-align="left"
          >138****8888</u-descriptions-item
        >
        <u-descriptions-item label="地址" label-align="left">
          江苏省苏州市吴中区吴中大道1188号
        </u-descriptions-item>
      </u-descriptions>
    </div>

    <div style="margin-bottom: 24px">
      <p style="margin-bottom: 8px; color: #606266; font-size: 14px">
        无边框模式 - 标签右对齐
      </p>
      <u-descriptions title="用户信息" :column="1">
        <u-descriptions-item label="用户名" label-align="right"
          >张三</u-descriptions-item
        >
        <u-descriptions-item label="手机号" label-align="right"
          >138****8888</u-descriptions-item
        >
        <u-descriptions-item label="地址" label-align="right">
          江苏省苏州市吴中区吴中大道1188号
        </u-descriptions-item>
      </u-descriptions>
    </div>

    <div style="margin-bottom: 24px">
      <p style="margin-bottom: 8px; color: #606266; font-size: 14px">
        有边框模式 - 标签左/右对齐混合使用
      </p>
      <u-descriptions title="订单详情" :column="1" border>
        <u-descriptions-item label="订单编号（标签右对齐）" label-align="right"
          >ORD-20240315-001</u-descriptions-item
        >
        <u-descriptions-item label="商品名称（标签左对齐）" label-align="left"
          >高端商务笔记本</u-descriptions-item
        >
        <u-descriptions-item label="收货地址（标签右对齐）" label-align="right"
          >江苏省苏州市吴中区吴中大道1188号</u-descriptions-item
        >
        <u-descriptions-item label="备注（标签左对齐）" label-align="left"
          >请尽快发货，谢谢</u-descriptions-item
        >
      </u-descriptions>
    </div>

    <div>
      <p style="margin-bottom: 8px; color: #606266; font-size: 14px">
        动态切换标签对齐方式
      </p>
      <u-descriptions title="动态控制" :column="1" :border="showBorder">
        <u-descriptions-item label="操作">
          <u-button size="small" style="margin-right: 8px" @click="toggleAlign">
            切换为{{ currentAlign === 'left' ? '右对齐' : '左对齐' }}
          </u-button>
          <u-switch
            v-model="showBorder"
            active-text="边框"
            inactive-text="无边框"
          />
        </u-descriptions-item>
        <u-descriptions-item label="用户名" :label-align="currentAlign"
          >张三</u-descriptions-item
        >
        <u-descriptions-item label="手机号" :label-align="currentAlign"
          >138****8888</u-descriptions-item
        >
        <u-descriptions-item label="地址" :label-align="currentAlign"
          >江苏省苏州市吴中区吴中大道1188号</u-descriptions-item
        >
      </u-descriptions>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const currentAlign = ref<'left' | 'right'>('right')
const showBorder = ref(false)

const toggleAlign = () => {
  currentAlign.value = currentAlign.value === 'left' ? 'right' : 'left'
}
</script>

<template>
  <div class="ellipsis-demo">
    <div style="margin-bottom: 24px">
      <p style="margin-bottom: 8px; color: #606266; font-size: 14px">
        开启文本省略（默认宽度截断）
      </p>
      <u-descriptions title="用户信息" :column="1" border>
        <u-descriptions-item label="用户名">张三</u-descriptions-item>
        <u-descriptions-item label="简介" :text-ellipsis="true">
          这是一段很长的个人简介文字，当开启 text-ellipsis
          后，超出容器宽度的内容将以省略号形式显示。
        </u-descriptions-item>
      </u-descriptions>
    </div>

    <div style="margin-bottom: 24px">
      <p style="margin-bottom: 8px; color: #606266; font-size: 14px">
        自定义省略宽度（通过 text-ellipsis-width 设置最大显示宽度）
      </p>
      <u-descriptions title="订单详情" :column="1" border>
        <u-descriptions-item label="订单号"
          >ORD-20240315-001</u-descriptions-item
        >
        <u-descriptions-item
          label="商品描述"
          :text-ellipsis="true"
          :text-ellipsis-width="200"
        >
          高端商务笔记本电脑，搭载最新一代处理器，16GB内存，512GB固态硬盘，2K高清屏幕，超长续航，适合办公与娱乐。
        </u-descriptions-item>
      </u-descriptions>
    </div>

    <div style="margin-bottom: 24px">
      <p style="margin-bottom: 8px; color: #606266; font-size: 14px">
        无边框模式下使用（同时展示不同宽度的省略效果）
      </p>
      <u-descriptions title="项目信息" :column="1">
        <u-descriptions-item label="项目名称">智能数据平台</u-descriptions-item>
        <u-descriptions-item
          label="项目概述"
          :text-ellipsis="true"
          :text-ellipsis-width="260"
        >
          本项目旨在构建一套完整的企业级数据分析与管理平台，支持多维度数据可视化、实时监控预警、自动化报表生成等功能模块。
        </u-descriptions-item>
        <u-descriptions-item label="负责人">李四</u-descriptions-item>
      </u-descriptions>
    </div>

    <div>
      <p style="margin-bottom: 8px; color: #606266; font-size: 14px">
        动态切换省略状态
      </p>
      <u-descriptions title="动态控制" :column="1" border>
        <u-descriptions-item label="操作">
          <u-button
            size="small"
            style="margin-right: 8px"
            @click="toggleEllipsis"
          >
            {{ ellipsisEnabled ? '关闭省略' : '开启省略' }}
          </u-button>
          <u-input-number
            v-model="maxWidth"
            :min="50"
            :max="500"
            :step="10"
            size="small"
            placeholder="省略宽度"
            style="width: 120px"
          />
        </u-descriptions-item>
        <u-descriptions-item
          label="动态内容"
          :text-ellipsis="ellipsisEnabled"
          :text-ellipsis-width="maxWidth || undefined"
        >
          这是一段可动态控制的文本内容，你可以通过上方按钮开关省略功能，并通过数字输入框调整触发省略的最大宽度值。
        </u-descriptions-item>
      </u-descriptions>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const ellipsisEnabled = ref(true)
const maxWidth = ref(200)

const toggleEllipsis = () => {
  ellipsisEnabled.value = !ellipsisEnabled.value
}
</script>