卡片列表 ProCardList
栅格式卡片列表
作为普通列表使用
vue
<script lang="ts" setup>
import {
ProCardList,
ProCardMeta,
SearchLayout,
SearchLayoutContent,
} from '@vrx-arco/pro-components'
import { Avatar, Button, Card } from '@arco-design/web-vue'
import { IconEdit, IconEye, IconMore, IconUser } from '@vrx-arco/icons-vue'
</script>
<template>
<Card>
<div style="height: 700px;background-color: var(--color-fill-2);padding: 20px">
<SearchLayout>
<SearchLayoutContent>
<ProCardList
:data="
Array(20)
.fill(1)
.map((item, index) => index + 1)
"
:column="2"
>
<template #item="{ item }">
<ProCardMeta title="title" description="description">
<template #avatar>
<Avatar>{{ item }}</Avatar>
</template>
</ProCardMeta>
</template>
</ProCardList>
</SearchLayoutContent>
</SearchLayout>
</div>
</Card>
</template>使用分页组件
vue
<script lang="ts" setup>
import {
ProCardList,
ProCardMeta,
SearchLayout,
SearchLayoutContent,
} from '@vrx-arco/pro-components'
import { Avatar, Button, Card } from '@arco-design/web-vue'
import { IconEdit, IconEye, IconMore, IconUser } from '@vrx-arco/icons-vue'
</script>
<template>
<Card>
<div style="height: 700px;background-color: var(--color-fill-2);padding: 20px">
<SearchLayout>
<SearchLayoutContent>
<ProCardList
pagination
:data="
Array(20)
.fill(1)
.map((item, index) => index + 1)
"
:column="2"
>
<template #item="{ item }">
<ProCardMeta title="title" description="description">
<template #avatar>
<Avatar>{{ item }}</Avatar>
</template>
</ProCardMeta>
</template>
</ProCardList>
</SearchLayoutContent>
</SearchLayout>
</div>
</Card>
</template>栅格布局
vue
<script lang="ts" setup>
import {
ProCardList,
ProCardMeta,
SearchLayout,
SearchLayoutContent,
} from '@vrx-arco/pro-components'
import { Avatar, Button, Card } from '@arco-design/web-vue'
import { IconEdit, IconEye, IconMore, IconUser } from '@vrx-arco/icons-vue'
</script>
<template>
<Card>
<div style="height: 700px;background-color: var(--color-fill-2);padding: 20px">
<SearchLayout>
<SearchLayoutContent>
<ProCardList
:data="
Array(20)
.fill(1)
.map((item, index) => index + 1)
"
:column="{
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1,
xxl: 2,
}"
>
<template #item="{ item }">
<ProCardMeta title="title" description="description">
<template #avatar>
<Avatar>{{ item }}</Avatar>
</template>
</ProCardMeta>
</template>
</ProCardList>
</SearchLayoutContent>
</SearchLayout>
</div>
</Card>
</template>API
<pro-card-list> Props
<pro-card-list> Events
<pro-card-list> Slots