<script type="text/x-template" id="my-list">
<div class="my-list">
<div class="title">{{ title }}</div>
<div class="list">
<slot></slot>
</div>
</div>
</script>
<div id="app">
<my-list title="Shapes">
<div class="list-item" v-for="shape in shapes">
<div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
</div>
</my-list>
<my-list title="Colors">
<div class="list-item" v-for="color in colors">
<div>
<div class="swatch" :style="{background: color.hex}"></div>
{{ color.name }}
</div>
</div>
</my-list>
</div>
body {
background: linear-gradient(270deg, #0E6251, #28B463);
}
#app {
display: flex;
}
.my-list {
flex: 1 1 50%;
font-family: Arial;
color: white;
$padding: 20px;
$radius: 4px;
margin: 20px;
.title {
background: #A93226;
padding: $padding;
font-weight: bold;
font-size: 22px;
border-top-left-radius: $radius;
border-top-right-radius: $radius;
}
.list {
background: #34495E;
padding: $padding;
font-size: 16px;
border-bottom-left-radius: $radius;
border-bottom-right-radius: $radius;
}
.list-item:not(:last-child) {
padding-bottom: $padding;
}
}
.swatch {
display: inline-block;
width: 15px;
height: 10px;
margin-right: 8px;
}
View Compiled
Vue.component('my-list', {
template: '#my-list',
props: ['title']
})
let app = new Vue({
el: '#app',
data () {
return {
shapes: [
{
name: 'Square',
sides: 4
},
{
name: 'Hexagon',
sides: 6
},
{
name: 'Triangle',
sides: 3
}
],
colors: [
{
name: 'Yellow',
hex: '#f4d03f'
},
{
name: 'Green',
hex: '#229954'
},
{
name: 'Purple',
hex: '#9b59b6'
}
]
}
}
})
View Compiled
This Pen doesn't use any external CSS resources.