57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<div class="more-btn-container">
|
||
|
|
<button-component
|
||
|
|
:disabled="$attrs.disabled"
|
||
|
|
@click="loadMore()"
|
||
|
|
classes=""
|
||
|
|
buttonText=""
|
||
|
|
v-tooltip="'بارگذاری صفحات بعدی (درصورت وجود)'"
|
||
|
|
>
|
||
|
|
<svg class="icon icon-chevron-double-down">
|
||
|
|
<use xlink:href="#icon-chevron-double-down"></use>
|
||
|
|
</svg>
|
||
|
|
</button-component>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
emits: ["next-page"],
|
||
|
|
methods: {
|
||
|
|
loadMore() {
|
||
|
|
this.$emit("next-page");
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.more-btn-container {
|
||
|
|
background: linear-gradient(to top, #fff, transparent);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
&.floating-position {
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: -4em;
|
||
|
|
}
|
||
|
|
&:hover {
|
||
|
|
background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0.7));
|
||
|
|
|
||
|
|
.btn:not(:disabled) {
|
||
|
|
color: var(--text-primary-highlight);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
font-size: 0.7rem;
|
||
|
|
flex: 1;
|
||
|
|
padding: 1em 0;
|
||
|
|
color: #212529;
|
||
|
|
box-shadow: 0px 0px 0px 0px #eee;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|