Skip to content

Instantly share code, notes, and snippets.

@yann-yinn
Last active June 28, 2017 15:10
Show Gist options
  • Save yann-yinn/84258c41c40579bb45154d7ba63c6283 to your computer and use it in GitHub Desktop.
Save yann-yinn/84258c41c40579bb45154d7ba63c6283 to your computer and use it in GitHub Desktop.
Create automatically a Bulma css Grid from :items using slot
<!--
Create automatically a Bulma css Grid from :items
USAGE :
<bulma-grid :items="yourItems" itemsByRow="3">
<template scope="row">
<recipe-card :node="row.item"></recipe-card>
</template>
</bulma-grid>
-->
<template>
<div>
<div class="columns" v-for="(column, rowIndex) in columns" :key="rowIndex">
<div v-for="(item, index) in column" :key="index" :class="columnClasses">
<slot :item="item"></slot>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
itemsByRow: { type: String, default: 4 },
items: { type: Array, default: [] }
},
computed: {
columnClasses () {
return 'column is-' + 12 / this.itemsByRow
},
columns () {
let columnIndex = 0
let columns = {}
for (const itemIndex in this.items) {
if (itemIndex % this.itemsByRow === 0) {
columns[++columnIndex] = []
}
columns[columnIndex].push(this.items[itemIndex])
}
return columns
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment