I'm looking for a gridview with 'n' rows, each containing 4 columns/items to be displayed. My goal is to accomplish this using an Html/Javascript/Vuejs template exclusively.
The desired view should look like this: https://i.sstatic.net/kSx71.png In the image above, there's a 'View All' button. Let's assume we have 32 datasets; the grid should consist of 8 rows with 4 items/columns in each row. Initially, only two rows (totaling 8 items) should be displayed with a 'View All' option. When the button is clicked, it should expand to show all rows and items, accompanied by a 'View Less' text. If clicked again, it should collapse back to displaying just 2 rows and 8 items.
<template>
<div>
<list>
<cell style="flex-direction:row; align-items:center ;" v-for="(rowdata,index) in griddata" :key="index" >
<div v-for="(rowitem, i) in rowdata" style="flex:1;flex-direction:column; backgroundColor:blue;margin:10px;height:100px; align-items:center;" :key="i">
<image class="item-icon" src="https://gw.alicdn.com/tfs/TB1788ygMMPMeJjy1XdXXasrXXa-1919-1520.jpg"></image>
<text style="color:white;justify-content:center;align-items:center;backgroundColor:red;flex:1; text-align:center;">{{rowitem}}</text>
</div>
</cell>
</list>
<text class="view-all-container" v-if="viewText" >{{viewText}}</text>
</div>
</template>
<script>
export default {
props: {
data: Object,
},
data() {
return {
isOpen: false,
viewText: 'View All',
borderRight: 'item-border-right',
appearFlag: [],
griddata:[]
};
},
created() {
for(var i =0;i<5;i++){
var rowdata = []
rowdata.push("1")
rowdata.push("2")
rowdata.push("3")
this.griddata.push(rowdata)
}
},
}
</script>
<style scoped lang="sass?outputStyle=expanded">
.container {
background-color: #fff;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.icon-row {
width: 750px;
flex-direction: row;
align-items: flex-start;
}
.icon {
width: 188px;
height: 168px;
padding-top: 30px;
flex-direction: column;
justify-content: center;
align-items: center;
border-bottom-style: solid;
border-bottom-color: #ebebeb;
border-bottom-width: 1px;
}
.item-border-right {
border-right-style: solid;
border-right-color: #ebebeb;
border-right-width: 1px;
}
.item-icon {
width: 54px;
height: 54px;
margin-bottom: 15px;
}
.item-text {
padding-left: 14px;
padding-right: 14px;
font-size: 22px;
color: #666;
text-align: center;
lines: 2;
height: 64px;
text-overflow: ellipsis;
}
.view-all-container {
width: 750px;
margin-top: 30px;
margin-bottom: 30px;
text-align: center;
font-size: 26px;
font-weight: 500;
color: #ef4e28;
}
</style>
Note: I've searched extensively on Google and Stack Overflow but couldn't find a solution. Appreciate any help on this matter!