List 列表
响应式列表组件。
行内 Tailwind/UnoCSS 用法
单元格
内容
单元格
内容
单元格
内容
单元格
描述信息
单元格
内容
单元格
内容
单元格
内容
单元格
查看代码
html
<template>
<div class="space-y-4">
<div class="flex flex-col">
<div class="flex items-center justify-between border-b border-gray-200 p-2">
<div class="text-base font-medium">
单元格
</div>
<div class="text-sm text-gray-500">
内容
</div>
</div>
<div class="flex items-center justify-between border-b border-gray-200 p-2">
<div class="text-base font-medium">
单元格
</div>
<div class="flex items-center text-sm text-gray-500">
内容
<svg class="ml-1 size-[18px] cursor-pointer text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
d="m19 12l12 12l-12 12" />
</svg>
</div>
</div>
<div class="flex items-center justify-between border-b border-gray-200 p-2">
<div class="flex items-center text-base font-medium">
<svg class="mr-1 size-[18px] text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
<path d="M12.56 20.82a.96.96 0 0 1-1.12 0C6.611 17.378 1.486 10.298 6.667 5.182A7.6 7.6 0 0 1 12 3c2 0 3.919.785 5.333 2.181c5.181 5.116.056 12.196-4.773 15.64" />
<path d="M12 12a2 2 0 1 0 0-4a2 2 0 0 0 0 4" />
</g>
</svg>
单元格
</div>
<div class="flex items-center text-sm text-gray-500">
内容
<svg class="ml-1 size-[18px] cursor-pointer text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
d="m19 12l12 12l-12 12" />
</svg>
</div>
</div>
<div class="flex items-center justify-between border-b border-gray-200 p-2">
<div class="text-base font-medium">
单元格
</div>
<div class="text-sm text-gray-500">
描述信息
</div>
</div>
</div>
<div class="flex flex-col rounded-lg border border-solid border-gray-200">
<div class="flex items-center justify-between border-b border-gray-200 p-2 active:bg-gray-100">
<div class="text-base font-medium">
单元格
</div>
<div class="text-sm text-gray-500">
内容
</div>
</div>
<div class="flex items-center justify-between border-b border-gray-200 p-2 active:bg-gray-100">
<div class="text-base font-medium">
单元格
</div>
<div class="flex items-center text-sm text-gray-500">
内容
<svg class="ml-1 size-[18px] cursor-pointer text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
d="m19 12l12 12l-12 12" />
</svg>
</div>
</div>
<div class="flex items-center justify-between border-b border-gray-200 p-2 active:bg-gray-100">
<div class="flex items-center text-base font-medium">
<svg class="mr-1 size-[18px] text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
<path d="M12.56 20.82a.96.96 0 0 1-1.12 0C6.611 17.378 1.486 10.298 6.667 5.182A7.6 7.6 0 0 1 12 3c2 0 3.919.785 5.333 2.181c5.181 5.116.056 12.196-4.773 15.64" />
<path d="M12 12a2 2 0 1 0 0-4a2 2 0 0 0 0 4" />
</g>
</svg>
单元格
</div>
<div class="flex items-center text-sm text-gray-500">
内容
<svg class="ml-1 size-[18px] cursor-pointer text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
d="m19 12l12 12l-12 12" />
</svg>
</div>
</div>
<div class="flex items-center justify-between p-2 active:bg-gray-100">
<div class="text-base font-medium">
单元格
</div>
<div class="text-sm text-gray-500">
<svg class="ml-1 size-[18px] cursor-pointer text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
d="m19 12l12 12l-12 12" />
</svg>
</div>
</div>
</div>
</div>
</template>