update List

examples/main.js

@@ -233,6 +233,10 @@ const router = new VueRouter({
         {
             path: '/icon',
             component: (resolve) => require(['./routers/icon.vue'], resolve)
+        },
+        {
+            path: '/list',
+            component: (resolve) => require(['./routers/list.vue'], resolve)
         }
     ]
 });

examples/routers/list.vue

@@ -1,5 +1,26 @@
 <template>
     <div>
+        <h2>small size</h2>
+        <List header="Header" footer="Footer" size="small" :split="false">
+            <ListItem v-for="item in data1" :key="item">
+                {{ item }}
+            </ListItem>
+        </List>
+        <h2>default size</h2>
+        <List header="Header" footer="Footer">
+            <ListItem v-for="item in data1" :key="item">
+                {{ item }}
+            </ListItem>
+        </List>
+        <h2>large size</h2>
+        <List header="Header" footer="Footer" border size="large">
+            <ListItem v-for="item in data1" :key="item">
+                {{ item }}
+            </ListItem>
+        </List>
+
+        <Divider></Divider>
+
 
     </div>
 </template>
@@ -7,8 +28,14 @@
     export default {
         data () {
             return {
-
-            }
+                data1: [
+                    '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>

src/components/list/list.vue

@@ -16,7 +16,7 @@
     export default {
         name: 'List',
         props: {
-            bordered: {
+            border: {
                 type: Boolean,
                 default: false
             },
@@ -70,7 +70,7 @@
                     `${prefixCls}-${this.size}`,
                     `${prefixCls}-${this.itemLayout}`,
                     {
-                        [`${prefixCls}-bordered`]: this.bordered,
+                        [`${prefixCls}-bordered`]: this.border,
                         [`${prefixCls}-split`]: this.split
                     }
                 ];

src/styles/components/list.less

@@ -105,6 +105,9 @@
     &-split &-header {
         border-bottom: 1px solid @border-color-split;
     }
+    &-split &-footer{
+        border-top: 1px solid @border-color-split;
+    }
 
     &-large &-item {
         padding-top: 16px;
@@ -152,3 +155,45 @@
         }
     }
 }
+
+.@{list-prefix-cls}-bordered {
+    border: 1px solid @border-color-base;
+    border-radius: @border-radius-base;
+    .@{list-prefix-cls}-header {
+        padding-right: 24px;
+        padding-left: 24px;
+    }
+
+    .@{list-prefix-cls}-footer {
+        padding-right: 24px;
+        padding-left: 24px;
+    }
+
+    .@{list-prefix-cls}-item {
+        padding-right: 24px;
+        padding-left: 24px;
+        border-bottom: 1px solid @border-color-split;
+    }
+
+    .@{list-prefix-cls}-pagination {
+        margin: 16px 24px;
+    }
+
+    &.@{list-prefix-cls}-small {
+        .@{list-prefix-cls}-item {
+            padding-right: 16px;
+            padding-left: 16px;
+        }
+        .@{list-prefix-cls}-header,
+        .@{list-prefix-cls}-footer {
+            padding: 8px 16px;
+        }
+    }
+
+    &.@{list-prefix-cls}-large {
+        .@{list-prefix-cls}-header,
+        .@{list-prefix-cls}-footer {
+            padding: 16px 24px;
+        }
+    }
+}