drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add List

Browse source
This commit is contained in:
梁灏 2019-06-08 12:18:15 +08:00
parent ff71751caa
commit bc56534b90
10 changed files with 335 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
examples/app.vue
View file

@ -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>

14
examples/routers/list.vue Normal file
View file

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

8
src/components/list/index.js Normal file
View file

@ -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;

35
src/components/list/list-item-meta.vue Normal file
View file

@ -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>

13
src/components/list/list-item.vue Normal file
View file

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

83
src/components/list/list.vue Normal file
View file

@ -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>

4
src/index.js
View file

@ -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,

3
src/styles/components/index.less
View file

@ -50,4 +50,5 @@
@import "time";
@import "cell";
@import "drawer";
@import "breadcrumb";
@import "breadcrumb";
@import "list";

154
src/styles/components/list.less Normal file
View file

@ -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;
}
}
}
}
}

21
src/styles/custom.less
View file

@ -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;