Hi-kits

List 列表

7/11/2022 列表数据渲染

通用列表。

# 何时使用

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

import { HiList } from 'hi-kits/list'
1

# 简单列表

列表拥有大、中、小三种尺寸。 通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。

Small Size

content content button content content

默认 Size

content content button content content

Large Size

content content content content

自定义size

content content content content 
 <h-row gutter="10">
    <h-col span="24" >
        <h3>Small Size</h3>
        <h-list size="small">
            <h-list-item>
                content
            </h-list-item>
            <h-list-item>
                content
                <h-list-item-action>
                    <h-button type="flat">button</h-button>
                </h-list-item-action>
            </h-list-item>
            <h-list-item>
                content
                <h-list-item-action>
                    <h-tag noBorder text="333"></h-tag>
                </h-list-item-action>
            </h-list-item>
            <h-list-item>
                content
                <h-list-item-action>
                    <h-tag noBorder  text="333"></h-tag>
                </h-list-item-action>
            </h-list-item>
        </h-list>
    </h-col>
    <h-col span="24">
        <h3>默认 Size</h3>
        <h-list>
            <h-list-item>
                content
            </h-list-item>
            <h-list-item>
                content
                <h-list-item-action>
                    <h-button type="flat">button</h-button>
                </h-list-item-action>
            </h-list-item>
            <h-list-item>
                content
                <h-list-item-action>
                    <h-tag noBorder text="333"></h-tag>
                </h-list-item-action>
            </h-list-item>
            <h-list-item>
                content
                <h-list-item-action>
                    <h-tag noBorder  text="333"></h-tag>
                </h-list-item-action>
            </h-list-item>
        </h-list>
    </h-col>
    <h-col span="24">
        <h3>Large Size</h3>
        <h-list  size="large">
            <h-list-item>
                content
                <h-list-item-action>
                    <h-switch></h-switch>
                </h-list-item-action>
            </h-list-item>
            <h-list-item>
                content
                <h-list-item-action>
                    <h-switch></h-switch>
                </h-list-item-action>
            </h-list-item>
            <h-list-item>
                content
                <h-list-item-action>
                    <h-switch></h-switch>
                </h-list-item-action>
            </h-list-item>
            <h-list-item>
                content
                <h-list-item-action>
                    <h-switch></h-switch>
                </h-list-item-action>
            </h-list-item>
        </h-list>
    </h-col>
    <h-col span="24">
        <h3>自定义size</h3>
        <h-list size="50">
            <h-list-item>
                content
            </h-list-item>
            <h-list-item>
                content
            </h-list-item>
            <h-list-item>
                content
                <h-list-item-action>
                    <h-tag noBorder style="color: #FFF; background-color: #31d100fd; " text="333"></h-tag>
                </h-list-item-action>
            </h-list-item>
            <h-list-item>
                content
                <h-list-item-action>
                    <h-tag noBorder style="color: #FFF; background-color: #01bffd; " text="333"></h-tag>
                </h-list-item-action>
            </h-list-item>
        </h-list>
    </h-col>
</h-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
Expand Copy

# 基础列表

披头士乐队

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
披头士乐队

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt.

披头士乐队

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt.

带操作选项的列表
披头士乐队

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum,

edit more
披头士乐队

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt.

edit more
披头士乐队

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt.

edit more
<h-list>
    <h-list-item>
        <h-list-item-media>
            <h-avatar circle color="#42b983">
                <img src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
            </h-avatar>
        </h-list-item-media>

        <div>
            <div>披头士乐队</div>
            <p style="color: #aaa;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</p>
        </div>
    </h-list-item>
    <h-list-item>
        <h-list-item-media>
            <h-avatar circle color="#42b983">
                <img src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
            </h-avatar>
        </h-list-item-media>

        <div>
            <div>披头士乐队</div>
            <p style="color: #aaa;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt.  </p>
        </div>
    </h-list-item>
    <h-list-item>
        <h-list-item-media>
            <h-avatar circle color="#42b983">
                <img src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" />
            </h-avatar>
        </h-list-item-media>

        <div>
            <div>披头士乐队</div>
            <p style="color: #aaa;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt.  </p>
        </div>
    </h-list-item>
</h-list>
<h-divider dir="left">带操作选项的列表</h-divider>
<h-list>
    <h-list-item>
        <h-list-item-media>
            <h-avatar  size="64" color="#42b983">
                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" />
            </h-avatar>
        </h-list-item-media>

        <div>
            <div>披头士乐队</div>
            <p style="color: #aaa;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, </p>
        </div>

        <h-list-item-action>
            <a href="javascript:;">edit</a>
            <h-divider type="vertical"></h-divider>
            <a href="javascript:;">more</a>
        </h-list-item-action>
        
    </h-list-item>
    <h-list-item>
        <h-list-item-media>
            <h-avatar size="64" color="#42b983">
                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" />
            </h-avatar>
        </h-list-item-media>

        <div>
            <div>披头士乐队</div>
            <p style="color: #aaa;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt.  </p>
        </div>

        <h-list-item-action>
            <a href="javascript:;">edit</a>
            <h-divider type="vertical"></h-divider>
            <a href="javascript:;">more</a>
        </h-list-item-action>
    </h-list-item>
    <h-list-item>
        <h-list-item-media>
            <h-avatar size="64" color="#42b983">
                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" />
            </h-avatar>
        </h-list-item-media>

        <div>
            <div>披头士乐队</div>
            <p style="color: #aaa;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt.  </p>
        </div>

        <h-list-item-action>
            <a href="javascript:;">edit</a>
            <h-divider type="vertical"></h-divider>
            <a href="javascript:;">more</a>
        </h-list-item-action>
    </h-list-item>
</h-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
Expand Copy

# 竖排列表样式

披头士乐队

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt.

Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.

222 333
披头士乐队

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt.

Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.

222 333 
<h-list>
    <h-list-item>
        <h-list-item-inner>
            <h-list-item-media>
                <h-avatar circle color="#42b983">
                    <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
                </h-avatar>
            </h-list-item-media>

            <div>
                <div>披头士乐队</div>
                <p style="color: #aaa;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt.</p>
                <p> Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</p>
                <h-list-item-action style="color: #aaa; ">
                    <h-icon name="person" color="#42b983"></h-icon> 222
                    <h-divider type="vertical"></h-divider>
                    <h-icon name="heart" color="#F44336"></h-icon> 333
                </h-list-item-action>
            </div>
        </h-list-item-inner>
        <h-list-item-extra>
            <img width="180" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        </h-list-item-extra>
    </h-list-item>
    <h-list-item>
        <h-list-item-inner>
            <h-list-item-media>
                <h-avatar circle color="#42b983">
                    <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
                </h-avatar>
            </h-list-item-media>

            <div>
                <div>披头士乐队</div>
                <p style="color: #aaa;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt.</p>
                <p> Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</p>
                <h-list-item-action style="color: #aaa; ">
                    <h-icon name="person" color="#42b983"></h-icon> 222
                    <h-divider type="vertical"></h-divider>
                    <h-icon name="heart" color="#F44336"></h-icon> 333
                </h-list-item-action>
            </div>
        </h-list-item-inner>
        <h-list-item-extra>
            <img width="180" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        </h-list-item-extra>
    </h-list-item>
    
</h-list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
Expand Copy

# 参数说明

参数 说明 类型 可选值 默认值
size 列表大小 string small | large -
Last Updated: 4/25/2023, 16:14:30

Comment 评论