From d806038ad3e78314610e1d0b496c19e0ccb40a0f Mon Sep 17 00:00:00 2001 From: taehoon <th.dev91@gmail.com> Date: Wed, 3 Apr 2019 23:45:45 -0400 Subject: [PATCH] add border-bottom style to the list component as well --- src/components/list/list.vue | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/components/list/list.vue b/src/components/list/list.vue index f361e3b1..d8c9f5a3 100644 --- a/src/components/list/list.vue +++ b/src/components/list/list.vue @@ -1,6 +1,8 @@ <template> <div class="list"> - <slot name="item" v-for="item in items" :item="item" /> + <div v-for="item in items" class="list-item" :key="getKey(item)"> + <slot name="item" :item="item" /> + </div> <div class="list-empty-content faint" v-if="items.length === 0"> <slot name="empty" /> </div> @@ -13,13 +15,26 @@ export default { items: { type: Array, default: () => [] + }, + getKey: { + type: Function, + default: item => item } } } </script> <style lang="scss"> +@import '../../_variables.scss'; + .list { + &-item { + display: flex; + border-bottom: 1px solid; + border-bottom-color: $fallback--border; + border-bottom-color: var(--border, $fallback--border); + } + &-empty-content { text-align: center; padding: 10px;