marzban-dev
63 lines
1.1 KiB
Vue
63 lines
1.1 KiB
Vue
<script lang="ts" setup>
|
|
|
|
// import
|
|
|
|
import Masonry from "masonry-layout";
|
|
|
|
// type
|
|
|
|
type Props = {
|
|
articles: Article[],
|
|
}
|
|
|
|
// props
|
|
|
|
const props = defineProps<Props>();
|
|
const { articles } = toRefs(props);
|
|
|
|
// state
|
|
|
|
onMounted(() => {
|
|
new Masonry(".masonry-articles-container", {
|
|
itemSelector: ".grid-item",
|
|
columnWidth: ".grid-sizer",
|
|
percentPosition: true,
|
|
gutter: ".gutter-sizer"
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="masonry-articles-container w-full">
|
|
|
|
<div class="grid-sizer"></div>
|
|
<div class="gutter-sizer"></div>
|
|
|
|
<BlogPost
|
|
v-for="article in articles"
|
|
:key="article.id"
|
|
class="grid-item"
|
|
:image="article.cover_image"
|
|
:description="article.summery"
|
|
:title="article.title"
|
|
:comments="2"
|
|
:id="article.id"
|
|
:date="article.created_at"
|
|
tag="تگ ندارد"
|
|
/>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.grid-sizer,
|
|
.grid-item {
|
|
margin-bottom: 24px;
|
|
width: 48%;
|
|
}
|
|
|
|
.gutter-sizer {
|
|
width: 4%;
|
|
}
|
|
</style> |