ant-design-vue/components/list/demo/resposive.md

51 lines
947 B
Markdown
Raw Normal View History

2018-06-16 13:30:41 +00:00
<cn>
#### 响应式的栅格列表
2019-12-10 09:28:57 +00:00
响应式的栅格列表。尺寸与 [Layout Grid](https://www.antdv.com/components/grid-cn/#Col) 保持一致。
2018-06-16 13:30:41 +00:00
</cn>
<us>
#### Responsive grid list
2019-12-10 09:28:57 +00:00
Responsive grid list. The size property is as same as [Layout Grid](https://www.antdv.com/components/grid/#Col).
2018-06-16 13:30:41 +00:00
</us>
2019-10-09 10:32:23 +00:00
```tpl
2018-06-16 13:30:41 +00:00
<template>
2019-09-28 12:45:07 +00:00
<a-list :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }" :dataSource="data">
2018-06-16 13:30:41 +00:00
<a-list-item slot="renderItem" slot-scope="item, index">
<a-card :title="item.title">Card content</a-card>
</a-list-item>
</a-list>
</template>
<script>
2019-09-28 12:45:07 +00:00
const data = [
{
title: 'Title 1',
},
{
title: 'Title 2',
},
{
title: 'Title 3',
},
{
title: 'Title 4',
},
{
title: 'Title 5',
},
{
title: 'Title 6',
},
];
2018-06-16 13:30:41 +00:00
2019-09-28 12:45:07 +00:00
export default {
data() {
return {
data,
};
},
};
2018-06-16 13:30:41 +00:00
</script>
2019-09-28 12:45:07 +00:00
<style></style>
2018-06-16 13:30:41 +00:00
```