add List

examples/app.vue

@@ -69,6 +69,7 @@ nav {
                 <li><router-link to="/cell">Cell</router-link></li>
                 <li><router-link to="/drawer">Drawer</router-link></li>
                 <li><router-link to="/icon">Icon</router-link></li>
+                <li><router-link to="/list">List</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

examples/routers/list.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+
+            }
+        }
+    }
+</script>

src/components/list/index.js

@@ -0,0 +1,8 @@
+import List from './list.vue';
+import ListItem from './list-item.vue';
+import ListItemMeta from './list-item-meta.vue';
+
+List.Item = ListItem;
+List.Item.Meta = ListItemMeta;
+
+export default List;

src/components/list/list-item-meta.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="ivu-list-item-meta">
+        <div class="ivu-list-item-meta-avatar" v-if="avatar || $slots.avatar">
+            <slot name="avatar">
+                <Avatar :src="avatar" />
+            </slot>
+        </div>
+        <div class="ivu-list-item-meta-content">
+            <div v-if="title || $slots.title" class="ivu-list-item-meta-title"><slot name="title">{{ title }}</slot></div>
+            <div v-if="description || $slots.description" class="ivu-list-item-meta-description"><slot name="description">{{ description }}</slot></div>
+        </div>
+    </div>
+</template>
+<script>
+    import Avatar from '../../components/avatar/avatar.vue';
+
+    export default {
+        name: 'ListItemMeta',
+        components: { Avatar },
+        props: {
+            avatar: {
+                type: String,
+                default: ''
+            },
+            title: {
+                type: String,
+                default: ''
+            },
+            description: {
+                type: String,
+                default: ''
+            }
+        }
+    };
+</script>

src/components/list/list-item.vue

@@ -0,0 +1,13 @@
+<template>
+    <li class="ivu-list-item">
+        <slot></slot>
+    </li>
+</template>
+<script>
+    export default {
+        name: 'ListItem',
+        props: {
+
+        }
+    };
+</script>

src/components/list/list.vue

@@ -0,0 +1,83 @@
+<template>
+    <div :class="classes">
+        <div class="ivu-list-header" v-if="header || $slots.header"><slot name="header">{{ header }}</slot></div>
+        <div class="ivu-list-container">
+            <ul class="ivu-list-items"><slot></slot></ul>
+        </div>
+        <Spin v-if="loading"><slot name="spin"></slot></Spin>
+        <div class="ivu-list-footer" v-if="footer || $slots.footer"><slot name="footer">{{ footer }}</slot></div>
+    </div>
+</template>
+<script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-list';
+
+    export default {
+        name: 'List',
+        props: {
+            bordered: {
+                type: Boolean,
+                default: false
+            },
+            itemLayout: {
+                validator (value) {
+                    return oneOf(value, ['horizontal', 'vertical']);
+                },
+                default: 'horizontal'
+            },
+            // 或 slot
+            header: {
+                type: String,
+                default: ''
+            },
+            // 或 slot
+            footer: {
+                type: String,
+                default: ''
+            },
+            // 含 slot: spin
+            loading: {
+                type: Boolean,
+                default: false
+            },
+            page: {
+                type: [Boolean, Object],
+                default: false
+            },
+            size: {
+                validator (value) {
+                    return oneOf(value, ['small', 'large', 'default']);
+                },
+                default () {
+                    return !this.$IVIEW || this.$IVIEW.size === '' ? 'default' : this.$IVIEW.size;
+                }
+            },
+            split: {
+                type: Boolean,
+                default: true
+            }
+        },
+        data () {
+            return {
+
+            };
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    `${prefixCls}-${this.size}`,
+                    `${prefixCls}-${this.itemLayout}`,
+                    {
+                        [`${prefixCls}-bordered`]: this.bordered,
+                        [`${prefixCls}-split`]: this.split
+                    }
+                ];
+            },
+        },
+        methods: {
+
+        }
+    };
+</script>

src/index.js

@@ -30,6 +30,7 @@ import InputNumber from './components/input-number';
 import Scroll from './components/scroll';
 import Split from './components/split';
 import Layout from './components/layout';
+import List from './components/list';
 import LoadingBar from './components/loading-bar';
 import Menu from './components/menu';
 import Message from './components/message';
@@ -102,6 +103,9 @@ const components = {
     Split,
     Submenu: Menu.Sub,
     Layout: Layout,
+    List,
+    ListItem: List.Item,
+    ListItemMeta: List.Item.Meta,
     LoadingBar,
     Menu,
     MenuGroup: Menu.Group,

src/styles/components/index.less

@@ -51,3 +51,4 @@
 @import "cell";
 @import "drawer";
 @import "breadcrumb";
+@import "list";

src/styles/components/list.less

@@ -0,0 +1,154 @@
+@list-prefix-cls: ~"@{css-prefix}list";
+
+.@{list-prefix-cls} {
+    position: relative;
+
+    &-items {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    &-item{
+        display: flex;
+        align-items: center;
+        padding: @list-item-padding;
+
+        &-content {
+            color: @text-color;
+        }
+
+        &-meta{
+            display: flex;
+            flex: 1;
+            align-items: flex-start;
+            font-size: 0;
+
+            &-avatar {
+                margin-right: @list-item-meta-avatar-margin-right;
+            }
+            &-content {
+                flex: 1 0;
+            }
+            &-title {
+                margin-bottom: 4px;
+                color: @text-color;
+                font-size: @font-size-base;
+                line-height: 22px;
+                > a {
+                    color: @text-color;
+                    transition: all @transition-time;
+                    &:hover {
+                        color: @primary-color;
+                    }
+                }
+            }
+            &-description {
+                color: @text-color-secondary;
+                font-size: @font-size-base;
+                line-height: 22px;
+            }
+        }
+
+        &-action {
+            flex: 0 0 auto;
+            margin-left: 48px;
+            padding: 0;
+            font-size: 0;
+            list-style: none;
+            & > li {
+                position: relative;
+                display: inline-block;
+                padding: 0 8px;
+                color: @text-color-secondary;
+                font-size: @font-size-base;
+                line-height: 22px;
+                text-align: center;
+                cursor: pointer;
+            }
+            & > li:first-child {
+                padding-left: 0;
+            }
+            &-split {
+                position: absolute;
+                top: 50%;
+                right: 0;
+                width: 1px;
+                height: 14px;
+                margin-top: -7px;
+                background-color: @border-color-split;
+            }
+        }
+    }
+
+    &-header {
+        background: @list-header-background;
+    }
+
+    &-footer {
+        background: @list-footer-background;
+    }
+
+    &-header,
+    &-footer {
+        padding-top: 12px;
+        padding-bottom: 12px;
+    }
+
+    &-split &-item {
+        border-bottom: 1px solid @border-color-split;
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    &-split &-header {
+        border-bottom: 1px solid @border-color-split;
+    }
+
+    &-large &-item {
+        padding-top: 16px;
+        padding-bottom: 16px;
+    }
+
+    &-small &-item {
+        padding-top: 8px;
+        padding-bottom: 8px;
+    }
+
+    &-vertical &-item {
+        align-items: initial;
+
+        &-main {
+            display: block;
+            flex: 1;
+        }
+
+        &-extra {
+            margin-left: 40px;
+        }
+
+        &-meta {
+            margin-bottom: @list-item-meta-margin-bottom;
+
+            &-title {
+                margin-bottom: @list-item-meta-title-margin-bottom;
+                color: @heading-color;
+                font-size: @font-size-large;
+                line-height: 24px;
+            }
+        }
+
+        &-action {
+            margin-top: @padding-md;
+            margin-left: auto;
+
+            > li {
+                padding: 0 16px;
+                &:first-child {
+                    padding-left: 0;
+                }
+            }
+        }
+    }
+}

src/styles/custom.less

@@ -19,6 +19,8 @@
 @tooltip-color          : #fff;
 @subsidiary-color       : #808695;
 @rate-star-color        : #f5a623;
+@white: #fff;
+@black: #000;
 
 // Base
 @body-background        : #fff;
@@ -27,6 +29,9 @@
 @code-family            : Consolas,Menlo,Courier,monospace;
 @title-color            : #17233d;
 @text-color             : #515a6e;
+@text-color-secondary: fade(@black, 45%);
+@heading-color: fade(#000, 85%);
+@heading-color-dark: fade(@white, 100%);
 @font-size-base         : 14px;
 @font-size-small        : 12px;
 @font-size-large        : 16px;
@@ -36,6 +41,12 @@
 @border-radius-small    : 4px;
 @cursor-disabled        : not-allowed;
 
+// vertical paddings
+@padding-lg: 24px; // containers
+@padding-md: 16px; // small containers and buttons
+@padding-sm: 12px; // Form controls and items
+@padding-xs: 8px; // small items
+
 // Border color
 @border-color-base      : #dcdee2;  // outside
 @border-color-split     : #e8eaec;  // inside
@@ -211,3 +222,13 @@
 
 // Anchor
 @anchor-border-width: 2px;
+
+// List
+// ---
+@list-header-background: transparent;
+@list-footer-background: transparent;
+@list-empty-text-padding: @padding-md;
+@list-item-padding: @padding-sm 0;
+@list-item-meta-margin-bottom: @padding-md;
+@list-item-meta-avatar-margin-right: @padding-md;
+@list-item-meta-title-margin-bottom: @padding-sm;