I managed to put the default navigation buttons of swiper.js, but I would like to be able to set up custom buttons and use the slideNext() and slidePrev() methods when clicking on them.
Unfortunately, I tried several methods, but nothing worked, and I have no idea how to do this with sveltekit.
Thanks for your help!
My code :
<script>
import SwiperSlide from './SwiperSlide.svelte';
import { register } from 'swiper/element/bundle';
register();
</script>
<swiper-container
navigation={true}
slides-per-view={1}
direction="horizontal"
space-between={30}
centered-slides={true}
keyboard={true}
pagination={{
hideOnClick: false,
clickable: true
}}
>
<SwiperSlide id={1} />
<SwiperSlide id={0} />
<SwiperSlide id={2} />
</swiper-container>
<style>
swiper-container {
width: 80%;
height: 100vh;
max-height: 1000px;
padding: 50px 0;
}
</style>
<SwiperSlide> is a component with a <swiper-slide></swiper-slide>.
Related
I'm trying to scroll snap to components in Vue.js 3. I can get scroll snap to work correctly with vanilla HTML and CSS. Here's what it looks like: Scroll Snap Demo
I'm trying to copy that simple layout but using App.js as the container and components as the divs. Here's what it looks like in App.vue:
<template class="container">
<CompI class="snapAlign"/>
<CompII class="snapAlign"/>
<CompIII class="snapAlign"/>
<CompIV class="snapAlign"/>
</template>
<script>
import CompI from './components/CompI.vue'
import CompII from './components/CompII.vue'
import CompIII from './components/CompIII.vue'
import CompIV from './components/CompIV.vue'
export default {
name: 'App',
components: {
CompI,
CompII,
CompIII,
CompIV
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
text-align: center;
}
.container{
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.snapAlign{
scroll-snap-align: start;
}
</style>
Here's what I've got for components, they're all basically the same as each other:
<template>
<div class="one">
<h1>One</h1>
</div>
</template>
<script>
export default {
name: 'CompI'
}
</script>
<style scoped>
.one{
height: 100vh;
width: 100vw;
background-color: green;
}
</style>
I also tried using vue-scroll-snap but it doesn't seem to work on components the way the guides show it working on divs. This was the guide I tried: Vue Scroll Snap Guide
Here's what I've got for App.vue using that method:
<template>
<vue-scroll-snap >
<CompI/>
<CompII/>
<CompIII/>
<CompIV/>
</vue-scroll-snap>
</template>
<script>
import CompI from './components/CompI.vue'
import CompII from './components/CompII.vue'
import CompIII from './components/CompIII.vue'
import CompIV from './components/CompIV.vue'
import VueScrollSnap from "vue-scroll-snap"
export default {
name: 'App',
components: {
CompI,
CompII,
CompIII,
CompIV,
VueScrollSnap
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
text-align: center;
}
</style>
The components are the same as the other method.
The pages appear correctly but there's no scroll snap effect with either of these attempts. I'd like to try and use the components as full screen elements to snap to, the app will scale better like that.
+++ Solution +++
Ivo Gelov was correct, remove the class from <template>, place the components inside a div and give it the class "container". For some reason that alone wasn't enough, more style was needed on that class then it works. Here's the final CSS for that class:
.container{
width: 100%;
height: 100vh;
margin: 0 auto;
overflow-x: hidden;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
I've been struggling with implementing a dialog box / modal design and behavior from inside of children components in Vue.
So here's the set up, I have a Vue component called "WorkersComponent". This component is just a list of workers assigned to some case fetched from the backend (Laravel). This component is reusable an can be in any place/case/ticket/lookup where a user would want to add workers to.
The component has an "add" button in it. Once clicked, I want a new component to appear at that location (at the click location), which could be a dropdown, modal, dialogue - doesn't really mater. This subcomponent has a search bar and some controls to fetch workers info and add them to the parent component.
My problem is that I can't figure out how to get the nesting / positioning to work. Because it is a child component, its position is always against the parent component, so I can only control it's position within that parent component, but I want it to be displaying on top of other DOM elements and components if necessary - whatever makes sense. Worst case scenario - I want it to be in the middle of the page at least.
Now how do I implement this? I probably want it to be a unique subcomponent, not a global generic modal. On top of it, if it were a global generic, then I have an idea of how to populate the modal with relevant options but how to pass them back to the component that called the modal - no idea. So I'm struggling with the approach. It seems like such a simple thing and yet, I can't find a viable solution.
<workers-component name="Assigned Workers">
<button <!-- Vue controls in here to invoke a modal/dialogue/dropdown --> >Add Worker</button>
<!-- The subcomponent itself -->
<workers-select-component />
</workers-component>
Here's an example from Gmail: wherever this search bar is (let's say it's a parent component), if I click on a triangle, it will expand this other pane, which will (1) appear wherever the search bar is and (2) cover other elements to display it and (3) not dismiss the pane until manually dismissed (which is easy but normal Bootstrap dropdowns don't support this).
Here's a solution:
Vue.component('ToggleDialog', {
props: ['state'],
template: `
<button
#click="$emit('toggle', state)"
class="dialog-button"
>
TOGGLE MODAL
</button>
`
})
Vue.component('DialogModal', {
props: ['state'],
template: `
<div
class="dialog-backdrop"
>
<div
class="dialog-button"
>
<toggle-dialog
:state="state"
#toggle="toggleModal"
/>
</div>
</div>
`,
methods: {
toggleModal(state) {
this.$emit('toggle', state)
}
}
})
new Vue({
el: "#app",
data() {
return {
isModalOpen: false
}
},
methods: {
toggleModal(state) {
this.isModalOpen = !state
}
}
})
.dialog-backdrop {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
.dialog-button {
padding: 10px 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<toggle-dialog :state="isModalOpen" #toggle="toggleModal">
OPEN MODAL
</toggle-dialog>
<dialog-modal v-if="isModalOpen" :state="isModalOpen" #toggle="toggleModal" />
</div>
As you can see the modal is not the child of the button, but the child of the main app. toggle events are emitted (and the modal re-emits it) to the app that controls the state of the modal dialog.
For more complex apps it might not be the best. You could use an event bus (deprecated in Vue3) or Vuex (state management) to overcome this multiple emit-re-emit stuff.
EDIT: NEW SOLUTION
Vue.component('ToggleDialog', {
data() {
return {
isModalOpen: false
}
},
template: `
<div
class="toggle-modal-wrapper"
>
<button
#click="isModalOpen = !isModalOpen"
class="dialog-button"
>
TOGGLE MODAL
</button>
<dialog-modal
v-if="isModalOpen"
#toggle="isModalOpen = !isModalOpen"
>
<slot></slot>
</dialog-modal>
</div>
`
})
Vue.component('DialogModal', {
props: {
innerComponent: {
type: String
}
},
template: `
<div
class="dialog-backdrop"
>
<div>
<slot></slot>
<br />
<button
#click="$emit('toggle')"
class="dialog-button"
>
TOGGLE MODAL
</button>
</div>
</div>
`
})
new Vue({
el: "#app",
})
.toggle-modal-wrapper {
z-index: 10000;
}
.dialog-backdrop {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
.dialog-button {
padding: 10px 15px;
}
.other-part {
z-index: 1000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<toggle-dialog>
<template>
This is the first.
</template>
</toggle-dialog>
<toggle-dialog>
<template>
This is the other.
</template>
</toggle-dialog>
<div class="other-part">
OTHER PART OF THE UI
</div>
</div>
You could try playing with slots if you want a reusable component - or even better: the render function.
I am probably making this more complicated than it needs to be, but does anyone have any ideas on how I can swap out custom banner images for each of my pages (when route changes to any thing other than index page)? I have the slots working , but need way to change background image in the non-index banners. Here's my code:
App.vue and shows only the main page banner:
<template>
<div id="app">
<BannerHome v-if="isHomeView" />
<main id="routerView">
<RouterView :key="$route.fullPath" />
</main>
<Footer />
</div>
</template>
<script>
import BannerHome from '#/components/BannerHome.vue'
import Footer from '#/components/Footer.vue'
export default {
name: 'App',
components: {
BannerHome,
Footer
},
computed: {
isHomeView() {
return this.$route.fullPath === '/'
}
}
}
</script>
Example of non-index page (About.vue):
<template>
<article>
<banner>
<template v-slot:titleTop>Mission Focused</template>
<template v-slot:titleBottom>
Dedicated To Service
</template>
</banner>
<section class="container-md pb-5">
<h1>About Page</h1>
</section>
</article>
</template>
<script>
import Banner from '#/components/Banner.vue'
export default {
name: 'About',
components: {
Banner
}
}
</script>
Banner component for non-index pages (Banner.vue). Note the background image. How can I swap this out for each non-index page? Right now the background image is shown for ALL non-index pages.
<template>
<header>
<MainNav />
<div class="container">
<h1><em><slot name="titleTop"></slot><br />
<span class="pl-3"><slot name="titleBottom"></slot></span></em>
</h1>
</div>
</header>
</template>
<script>
import MainNav from '#/components/MainNav.vue'
export default {
name: 'Banner',
components: {
MainNav
}
}
</script>
<style lang="scss" scoped>
header {
position: relative;
width: 100%;
// set this page height here
height: 20em;
text-transform: uppercase;
}
header::before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 6em;
width: 100%;
// set this page height here
height: calc(20em + 10em);
z-index: -1;
transform: skewY(-3.5deg);
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url('../assets/mockphoto.jpg') < -----how to swap out this image?
no-repeat left top,
linear-gradient(#4e4376, #2b5876);
background-size: cover;
border-bottom: 0.2em solid #fff;
}
h1 {
font-size: 1.75rem!important;
font-weight: 700!important;
letter-spacing: 0.01em;
padding: 2.5rem 0 0 0;
// text-shadow: 0.022em 0.022em 0.022em #111;
color: #fff;
}
</style>
Btw, I am also using Gridsome...so if there is also an easy way to access page data via GraphQL for this purpose I can also use that. Thanks for any help !
So, I actually just need to add the /deep/ keyword to the parent CSS like so:
/deep/ header::before {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url('../assets/mockphoto.jpg')
no-repeat left top,
linear-gradient(#4e4376, #2b5876);
}
Docs: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
I'm using styled jsx in Next.js to style my components and many times i have found myself struggling with getting the animations working.
so i've created the example below to demonstrate the problem which is that it seems animations and key frames don't work in styled jsx so my question is am i right? if I'm then is there a workaround for me to use animations and keyframes for my components?
here is my animation component which should show a simple animation from red to yellow
const Animation = () =>{
return(
<React.Fragment>
<section className="wrapper">
<p>
<b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.
</p>
<div></div>
<p>
<b>Note:</b> When an animation is finished, it changes back to its original style.
</p>
<style jsx> {`
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 4s;
}
#-webkit-keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
#keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
`}
</style>
</section>
</React.Fragment>
);
}
export default Animation
and here is the result which acts as i have not included an animation at all and displays a static red box !
I am learning Vue Native, specifically the v-if conditional, and have the following test code:
<template>
<view class="container">
<button :on-press="seen = !seen" title="Click to Toggle Message Visibility" />
<text v-if="seen">Now you see the message</text>
</view>
</template>
<script>
export default {
data: function() {
return {
seen: false
};
}
};
</script>
<style>
.container {
flex: 1;
align-items: center;
justify-content: center;
}
</style>
It is supposed to let the user click the button and the message is to appear/disappear. However, it is resulting in the following error:
console.error: "[Vue warn]: You may have an infinite update loop in a component render function. (found in )"
How should the code be modified so it works?
The problem is that vue is treating :on-press="seen = !seen" like a binding so it always executes the expression on render. The rendering is modifying the state, hence causing an infinite loop.
I think you just need to extract it in a function.
<template>
<view class="container">
<button :on-press="onPress" title="Click to Toggle Message Visibility" />
<text v-if="seen">Now you see the message</text>
</view>
</template>
<script>
export default {
data: function() {
return {
seen: false
};
},
methods: {
onPress() {
this.seen = !this.seen;
}
}
};
</script>
<style>
.container {
flex: 1;
align-items: center;
justify-content: center;
}
</style>
Agree with the accepted answer. In addition, the :on-press is an attribute binding, but using v-on event binding will not have this infinite loop issue, for example, like <button v-on:click="seen = !seen" title="Click to Toggle Message Visibility" />. That's probably where you get this inline method usage seen = !seen from.