I am trying to replicate the layout of a Google search results page.
My goal is to have a full-width div appear on screen when an image is clicked, with a small triangle at the bottom of the clicked image.
I attempted to place the img inside another div, but it ended up positioned between two images rather than in a row below, resulting in a poor layout.
This is what I tried:
<template>
<div>
<div v-for="(item,index) in AllItem" :key="index">
<img :src="item.profile_image_url" @click.prevent.stop="clickShowInfoStream()" />
<div v-show="imgXL">
<img :src="profile_image_urlXL" class="imgProfileXL" />
</div>
</div>
</div>
</template>
<script>
export default {
name: "item",
data() {
return {
imgXL: false
};
},
methods: {
clickShowImgXL() {
this.imgXL = !this.imgXL;
}
}
};
</script>
<style scoped>
.imgProfileXL {
background-color: #19171c;
width: 100%;
}
</style>
I hope that clicking on an image will smoothly display a larger version of the image between rows, similar to the Google search layout. Additionally, the clicked image should have a small triangle. Clicking on anything else should close the div.