<template>
    <div class="ht-base-list-demo">
        <strong>Default Size:</strong>
        <br><br>
        <ht-base-list header="头部" footer="底部" border>
            <ht-base-list-item><span>★</span>新闻资讯类标题展示区</ht-base-list-item>
            <ht-base-list-item><span>★</span>新闻资讯类标题展示区</ht-base-list-item>
            <ht-base-list-item><span>★</span>新闻资讯类标题展示区</ht-base-list-item>
            <ht-base-list-item><span>★</span>新闻资讯类标题展示区</ht-base-list-item>
            <ht-base-list-item><span>★</span>新闻资讯类标题展示区</ht-base-list-item>
        </ht-base-list>
        <br>
        <strong>Small Size:</strong>
        <br><br>
        <ht-base-list header="头部" footer="底部" border size="small">
            <ht-base-list-item><span>★</span>新闻资讯类标题展示区</ht-base-list-item>
            <ht-base-list-item><span>★</span>新闻资讯类标题展示区</ht-base-list-item>
            <ht-base-list-item><span>★</span>新闻资讯类标题展示区</ht-base-list-item>
            <ht-base-list-item><span>★</span>新闻资讯类标题展示区</ht-base-list-item>
            <ht-base-list-item><span>★</span>新闻资讯类标题展示区</ht-base-list-item>
        </ht-base-list>
        <br>
        <strong>Large Size:</strong>
        <br><br>
        <ht-base-list header="头部" footer="底部" border size="large">
            <ht-base-list-item><span>★</span>新闻资讯类标题展示区</ht-base-list-item>
            <ht-base-list-item><span>★</span>新闻资讯类标题展示区</ht-base-list-item>
            <ht-base-list-item><span>★</span>新闻资讯类标题展示区</ht-base-list-item>
            <ht-base-list-item><span>★</span>新闻资讯类标题展示区</ht-base-list-item>
            <ht-base-list-item><span>★</span>新闻资讯类标题展示区</ht-base-list-item>
        </ht-base-list>
    </div>
</template>

<script>
    const data = [
        '新闻资讯类标题展示区',
        '新闻资讯类标题展示区',
        '新闻资讯类标题展示区',
        '新闻资讯类标题展示区',
        '新闻资讯类标题展示区',
    ]
    export default {
        name: 'HtBaseListDemo',
        data () {
            return {
                data:data,
            }
        },
    }
</script>
<style>
    .ht-base-list-demo {

    }
</style>

