Is there any way to implement the following carousel in Vue2. Link :
Image Carousel
// Parent component
<div class="col">
<slider>
<slide v-for="intro in compOpts.blockIntro">
<block-intro :compOpts="{ props: { wrapper: true, bg: false } }">
<p v-html="intro.title"></p>
<div slot="content" v-html="intro.content" class="blockIntro__content"></div>
</block-intro>
</slide>
</slider>
</div>
// Slider component
<div class="slider__container">
<slot></slot>
</div>
// Slide component
<div>
<slot></slot>
</div>
// BlockIntro component
<div class="col--h100" :class="{ 'bg--darkDark': compOpts.props.bg, 'col': !compOpts.props.wrapper }">
<div class="col col__blockIntro" :class="{ 'col__blockIntro--spaced': compOpts.props.spaced }">
<div class="col col__blockIntro__introQuote">
<slot></slot>
</div>
<slot name="content"></slot>
</div>
My Slide component is giving me the BlockIntro component template and div.col--h100 is the first/parent child element inside Slider. Now I'm trying to add an visible class to div.col--h100 from the Slider component. I consoled the Vnode using $slots but can't change the value in $slots.$elm.className
Please help.
Related
I have the following Card Grid set up in Vue3:
<template>
<div class="max-w-5xl mx-auto">
<div class="ml-20 pr-72">
<h2 class="text-4xl pb-8">{{ title }}</h2>
<p class="font-normal text-base pb-20">{{ description }}</p>
</div>
<div class="grid grid-cols-2 gap-5">
<div
v-for="card in cards"
:key="card.title"
class="rounded-xl py-6 px-5 bg-cover bg-center flex flex-col justify-between items-start h-60"
:style="{ backgroundImage: `url(${card.imageUrl})` }"
>
<div
class="rounded-full p-4 bg-gradient-to-r from-prospire-blue to-prospire-light-blue"
>
{{ card.icon }}
</div>
<p class="text-white font-light text-2xl">{{ card.title }}</p>
</div>
</div>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{
title: string;
description: string;
cards: any[];
}>();
</script>
<style scoped></style>
Which i call using:
<CardGrid
:title="$t('aboutUs.cardGrid.title')"
:description="$t('aboutUs.cardGrid.description')"
:cards="[
{
title: $t('aboutUs.cardGrid.cards[0].title'),
imageUrl:
'https://images.pexels.com/photos/5595573/pexels-photo-5595573.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
icon: <BeakerIcon />,
},
]"
/>
This however gives me a BeakerIcon' refers to a value, but is being used as a type here. Did you mean 'typeof BeakerIcon'? error.. Is it possible to pass a 3rd party component (icon in this case), to a component in a way?
One option is to pass card.icon as a string, such as 'BeakerIcon' and do
<div class="rounded-full p-4 bg-gradient-to-r from-prospire-blue to-prospire-light-blue">
<component :is="card.icon" />
</div>
...granted the icon you pass has been registered as a component.
It also work without registering the component globally.
Here is an example on sfc.vuejs.org passing the imported components in the props.
I have a Vue component that has a navigation button, when the component is used the button is not getting disabled when reached last record. Please suggest a solution.
Vue Component:
<template>
<div>
<div class="sliderArrowWrapper">
<div class="customArrowLeft" :id="`${navigateID}Left`" style="margin-right: 10px" >
<span class="arrowText">Prev</span>
</div>
<div class="customArrow" :id="`${navigateID}Right`" style="margin-left: 10px" >
<span class="arrowText">Next</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['navigateID']
}
</script>
suppose we have a component like this.
<template>
<div class=" ">
<div class="flex-grow">{{title}}</div>
<div class=" p-5">
<!-- want to show here -->
</div>
</div>
<script>
export default {
props: ['title'],
mounted() {
console.log('Component mounted.')
}
}
</script>
i try this
<comp :title="'here'">
<h1> this is </h1>
</comp>
i want to show html b.w vue component tag, like we do in react.
how we can achieve this
If I understand the question, you're looking to create a component that can accept child elements. In order to do this, use <slot></slot> in your template where you'd like child elements to be inserted. Child elements can be other components or HTML.
See the reference for more thorough details.
In your example:
<template>
<div class=" ">
<div class="flex-grow">{{title}}</div>
<div class=" p-5">
<slot></slot>
</div>
</div>
</template>
I'm trying to use Modal Component Example from Vue.js website examples in my project. When I use the modal component in my-project component, it works fine, but when I add a close button in the header slot, this button doesn't work, it doesn't close the modal while the default button in the footer still works fine.
The modal component :
<template>
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
props: {
showMal: Boolean
}
}
</script>
<style scoped>
<!-- same as vuejs website modal component example -->
</style>
How I'm calling it :
<template>
<button id="show-modal" #click="showModal = true">Show Modal</button>
<!-- use the modal component, pass in the prop -->
<modal v-if="showModal" #close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<div slot="header">
<button class="modal-default-button" #click="$emit('close')">Close</button>
</div>
</modal>
</template>
<script>
export default {
data () {
return {
showModal: false
}
}
</script>
What's wrong in my implementation of this code ?
Since this is at the parent:
<template>
<button id="show-modal" #click="showModal = true">Show Modal</button>
<!-- use the modal component, pass in the prop -->
<modal v-if="showModal" #close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<div slot="header">
<button class="modal-default-button" #click="$emit('close')">Close</button>
</div>
</modal>
</template>
This code:
<button class="modal-default-button" #click="$emit('close')">Close</button>
Actually makes the parent emit the 'close', not the modal child.
So, since the property that controls the modal is showModal, just set it to false instead:
<button class="modal-default-button" #click="showModal = false">Close</button>
Demo JSFiddle: https://jsfiddle.net/acdcjunior/mwLbw11k/4208/
I have a vue component Jumbotron.vue:
<template lang="html">
<div class="jumbotron" style="border-radius:0px; color:#fff;">
<div class="container">
</div>
</div>
</template>
And other page component Main.vue:
<template>
<div class="root">
<navbar></navbar>
<jumbotron>
<h1 class="display-4">I want to add here, to the jumbotron's div container some h1 and paragraph</h1>
<p class="lead ">Like this paragraph</p>
</jumbotron>
<words></words>
</div>
</template>
But i cant add content to the jumbotron, because its wrong. I dont want to add content(p and h1) inside of the Jumbotron.vue, because i want to use Jumbotron.vue more than 1 time with different content inside it. Is this possible?
This is done with slots.
<template lang="html">
<div class="jumbotron" style="border-radius:0px; color:#fff;">
<div class="container">
<slot></slot>
</div>
</div>
</template>
Everything you put inside the jumbotron component in the parent will be rendered in the slot.