List component

Generic list.

When to use

The most basic list display, can carry text, list, pictures, paragraphs, often used for background data display page.

Basic usage

Base list. You can display the border by setting bordered, and use avatar to place the avatar,and actions to place actions on the list.

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>

Simple list

The list is available in five sizes: super, large, medium, small and mini.

By setting size to xlarge、large、normal 、 small、 mini make the list oversized, large, medium,small, and mini, respectively.

If size is not set, the size is medium. You can customize the header and tail of the list by setting header and 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>

Parameter description type

API

List

Parameters	description	type
bordered	Display border or not	boolean
dataSource	List data source	any[]
footer	Bottom of list	slot
header	List header	slot
renderItem	List cell content use #renderItem="{item}"	slot
size	Size of list	`xlarge` \| `large` \|`normal` \| `small` \| `mini`

List.Item

Parameters	description	type
content	The contents of the list cell, located on the far left	slot
actions	List operation group, located on the far right	slot
extra	Additional content is displayed on the far right of the list element	slot

List.Item.Meta

Parameters	description	type
avatar	The icon of the list element	slot
title	The title of the list element	slot
description	The description content of the list element	slot

List component #

When to use #

Basic usage #

KL-Design Title 1

KL-Design Title 2

KL-Design Title 3

KL-Design Title 4

Simple list #