List 组件

通用列表。

何时使用

最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。

基础用法

基础列表。可通过设置bordered来展示边框，使用avatar来放置头像，使用actions来放置对列表的操作。

KL-Design Title 1
KL-Design, a design language for background applications, is refined by KL-Design Team
KL-Design Title 2
KL-Desig was founded by a group of creative people
KL-Design Title 3
KL-Design, a design language for background applications, is refined by KL-Design Team
KL-Design Title 4
KL-Design, a design language for background applications, is refined by KL-Design Team

<template>
    <kl-list :dataSource="data1" size="small" bordered>
        <template #renderItem="{ item }">
            <kl-list-item size="large">
                <template #content>
                    <kl-list-item-meta>
                        <template #avatar>
                            <img src="../../public/images/logo.jpg" alt="头像" class="avatar" />
                        </template>

                        <template #title>
                            <h4>
                                <a href="https://anixuil.github.io/">{{ item.title }}</a>
                            </h4>
                        </template>
                        <template #description>
                            {{ item.description }}
                        </template>
                    </kl-list-item-meta>
                </template>
                <template #actions>
                    <kl-button link type="primary">edit</kl-button>
                </template>
            </kl-list-item>
        </template>
    </kl-list>
</template>

<script setup lang="ts">
const data1: object[] = [
    {
        title: 'KL-Design Title 1',
        description:
            'KL-Design, a design language for background applications, is refined by KL-Design Team'
    },
    {
        title: 'KL-Design Title 2',
        description: 'KL-Desig  was founded by a group of creative people '
    },
    {
        title: 'KL-Design Title 3',
        description:
            'KL-Design, a design language for background applications, is refined by KL-Design Team'
    },
    {
        title: 'KL-Design Title 4',
        description:
            'KL-Design, a design language for background applications, is refined by KL-Design Team'
    }
]
</script>

<style scoped lang="scss">
.avatar {
    width: 10%;
    height: 10%;
    border-radius: 50%;
}

.vp-doc ul {
    list-style: none;
}
</style>

简单列表

列表拥有超大、大、中、小、迷你五种尺寸。

通过设置size为 xlarge、large、normal、small、mini 分别把列表尺寸设为超大、大、中、小、迷你。

若不设置 size,则列表尺寸为中。还可通过设置 header和 footer,来自定义列表头部和尾部。

Mini Size

Racing car sprays burning fuel into crowd.
Japanese princess to wed commoner.
Australian walks 100km after outback crash.
Man charged over missing wedding girl.
Los Angeles battles huge wildfires.

Small Size

Racing car sprays burning fuel into crowd.
Japanese princess to wed commoner.
Australian walks 100km after outback crash.
Man charged over missing wedding girl.
Los Angeles battles huge wildfires.

Normal Size

Racing car sprays burning fuel into crowd.
Japanese princess to wed commoner.
Australian walks 100km after outback crash.
Man charged over missing wedding girl.
Los Angeles battles huge wildfires.

Large Size

Racing car sprays burning fuel into crowd.
Japanese princess to wed commoner.
Australian walks 100km after outback crash.
Man charged over missing wedding girl.
Los Angeles battles huge wildfires.

Xlarge Size

Racing car sprays burning fuel into crowd.
Japanese princess to wed commoner.
Australian walks 100km after outback crash.
Man charged over missing wedding girl.
Los Angeles battles huge wildfires.

<template>
    <h3 :style="{ margin: '16px 0' }">Mini Size</h3>
    <kl-list :dataSource="data" size="mini" bordered header footer>
        <template #renderItem="{ item }">
            <kl-list-item>
                <template #content>
                    {{ item }}
                </template>
            </kl-list-item>
        </template>
        <template #header> header </template>
        <template #footer>
            <div>footer</div>
        </template>
    </kl-list>

    <h3 :style="{ margin: '16px 0' }">Small Size</h3>
    <kl-list :dataSource="data" size="small" bordered header footer>
        <template #renderItem="{ item }">
            <kl-list-item>
                <template #content>
                    {{ item }}
                </template>
            </kl-list-item>
        </template>
        <template #header> header </template>
        <template #footer>
            <div>footer</div>
        </template>
    </kl-list>

    <h3 :style="{ margin: '16px 0' }">Normal Size</h3>
    <kl-list :dataSource="data" size="normal" header footer bordered>
        <template #renderItem="{ item }">
            <kl-list-item>
                <template #content>
                    <p>{{ item }}</p>
                </template>
            </kl-list-item>
        </template>
        <template #header>
            <div>header</div>
        </template>
        <template #footer>
            <div>footer</div>
        </template>
    </kl-list>

    <h3 :style="{ margin: '16px 0' }">Large Size</h3>
    <kl-list :dataSource="data" size="large" header footer bordered>
        <template #renderItem="{ item }">
            <kl-list-item>
                <template #content>
                    <p>{{ item }}</p>
                </template>
            </kl-list-item>
        </template>
        <template #header>
            <div>header</div>
        </template>
        <template #footer>
            <div>footer</div>
        </template>
    </kl-list>

    <h3 :style="{ margin: '16px 0' }">Xlarge Size</h3>
    <kl-list :dataSource="data" size="xlarge" header footer bordered>
        <template #renderItem="{ item }">
            <kl-list-item>
                <template #content>
                    <p>{{ item }}</p>
                </template>
            </kl-list-item>
        </template>
        <template #header>
            <div>header</div>
        </template>
        <template #footer>
            <div>footer</div>
        </template>
    </kl-list>
</template>

<script setup lang="ts">
const data: string[] = [
    'Racing car sprays burning fuel into crowd.',
    'Japanese princess to wed commoner.',
    'Australian walks 100km after outback crash.',
    'Man charged over missing wedding girl.',
    'Los Angeles battles huge wildfires.'
]
</script>

<style scoped lang="scss"></style>

API

List

参数	说明	类型
bordered	是否展示边框	boolean
dataSource	列表数据源	any[]
footer	列表底部	slot
header	列表头部	slot
renderItem	列表单元内容使用 #renderItem="{item}"	slot
size	list 的尺寸	`xlarge` \| `large` \|`normal` \| `small` \| `mini`

List.Item

参数	说明	类型
content	列表单元内容，位置在最左边	slot
actions	列表操作组，位置在最右侧	slot
extra	额外内容, 展展示在列表元素最右侧	slot

List.Item.Meta

参数	说明	类型
avatar	列表元素的图标	slot
title	列表元素的标题	slot
description	列表元素的描述内容	slot

List 组件 #

何时使用 #

基础用法 #

KL-Design Title 1

KL-Design Title 2

KL-Design Title 3

KL-Design Title 4

简单列表 #