I'm trying to make a slider in a Vue 2.xx component. I'd like to insert custom text in the slider pagination indicator. Here's my (wrong) code. Can anybody please tell me how to insert a header inside the indicator and give it an active class when the slide is visible.
<hooper :auto-play="true" :play-speed="3000">
<slide>
slide 1
</slide>
<slide>
slide 2
</slide>
<slide>
slide 3
</slide>
<slide>
slide 4
</slide>
<hooper-navigation slot="hooper-addons">
<h3 class="active">
Example
</h3>
<h3>
2nd Example
</h3>
<h3>
Third example
</h3>
</hooper-navigation>
</hooper>
import {
Hooper,
Slide,
Pagination as HooperPagination
} from 'hooper';
export default {
components: {
Hooper,
Slide,
HooperPagination
}
}
</script>
Can anybody quickly help me please. Thanks!
Went through the hooper documentation and the closest thing to what you want is this:
https://baianat.github.io/hooper/examples.html#custom-controllers
It is not indicator-pagination but custom-controllers. You can easily write your own paginator and customize it however you want. And when the user clicks on one of the pages (dashes, links with custom text, whatever...) then you can just run something like:
this.$refs.carousel.slideTo(some_slide_number)
and that should slide to the proper slide. The whole thing will look something like this: (haven't tested it)
<template>
<hooper ref="carousel" #slide="updateCarousel">
<slide>
slide 1
</slide>
<slide>
slide 2
</slide>
<slide>
slide 3
</slide>
<slide>
slide 4
</slide>
<slide>
slide 5
</slide>
</hooper>
<div #click="goToSlide(1)">Example 1</div>
<div #click="goToSlide(2)">Example 2</div>
<div #click="goToSlide(3)">Example 3</div>
<div #click="goToSlide(4)">Example 4</div>
<div #click="goToSlide(5)">Example 5</div>
</template>
<script>
export default {
data () {
return {
}
},
methods: {
goToSlide(slide_number) {
this.$refs.carousel.slideTo(slide_number);
},
updateCarousel(payload) {
this.myCarouselData = payload.currentSlide;
}
}
}
</script>
Related
Is there any way to scroll top in ionic specific element when a viewdidenter?
<ion-content nopadding>
<div class="notes-main" *ngFor="let item of notesGroupDate">
<h3 class="heading"*ngIf="today" #scrolltop>{{item[0]| date}}</h3>
<div no-border *ngFor="let data of item[1]">
<div class="notes-subject">{{data.field_subject}} {{data.field_assigned_to_class}}</div>
<div class="notes">
<div class="notes-data private" *ngIf="data.field_private_notes_title || data.field_private_notes">
<div class="notes-icon" *ngIf="data.field_private_notes_title || data.field_private_notes">
<ion-img src="../../assets/Diary_PersonalNote.svg"></ion-img>
</div>
<div class="notes-details">
<div class="notes-title">{{data.field_private_notes_title}}</div>
<div class="notes-description">{{data.field_private_notes}}</div>
</div>
</div>
</div>
</div>
</div>
</ion-content>
I want to scroll top <h3 class="heading"*ngIf="today" #scrolltop>{{item[0]| date}}</h3> this element if condtion satisfy on ionviewdidenter.
You can do it like this to scroll to the top of the page each time you go back to the page:
import { Component, ViewChild } from '#angular/core';
import { IonContent } from '#ionic/angular';
#Component({...})
export class MyPage{
#ViewChild(IonContent) content: IonContent;
scrollToTop() {
this.content.scrollToTop(400);
}
ionViewDidEnter(){
this.scrollToTop();
}
}
It sounds like that's what you are looking for, unless this is a simplified version of your real app, in which case we will need to use scrollToPoint and then write some code to get the y offset for that spot.
Sorry for the help request, but I can't work out how to get a bootstrap-vue modal to display initially on page load without needing to trigger it with a button or link.
Thanks.
Instead of trying to open modal on page load, you can open it on mounted event of Vue.
Elevated from sample code on Bootstrap-Vue website:
<template>
<div>
<b-modal ref="my-modal" hide-footer title="Using Component Methods">
<div class="d-block text-center">
<h3>Hello From My Modal!</h3>
</div>
<b-button class="mt-3" variant="outline-danger" block #click="hideModal">Close Me</b-button>
<b-button class="mt-2" variant="outline-warning" block #click="toggleModal">Toggle Me</b-button>
</b-modal>
</div>
</template>
<script>
export default {
methods: {
showModal() {
this.$refs['my-modal'].show()
},
hideModal() {
this.$refs['my-modal'].hide()
}
},
mounted() {
this.showModal();
}
}
</script>
Using bootstrap-vue I have a working example using b-tabs and some other of it's components.
However, on one page (.vue) when I try to wrap the block within a tag the page always renders that card and its contents as 'undefined'
I use the sample from here.
Without the v-card I see:
and with it I see:
The code literally follows the sample referenced in the page above and in my main.ts I have the following
import {Card} from 'bootstrap-vue/es/components'
import { Button } from 'bootstrap-vue/es/components';
import { Collapse } from 'bootstrap-vue/es/components';
import { Alert } from 'bootstrap-vue/es/components';
import { Tabs } from 'bootstrap-vue/es/components';
Vue.use(Tabs);
Vue.use(Alert);
Vue.use(Collapse);
Vue.use(Button);
Vue.use(Card);
new Vue({
router,
store,
components: {
bCard: Card,
bButton: Button,
bCollapse: Collapse,
bAlert: Alert,
bTabs: Tabs,
pagination
},
render: h => h(App)
}).$mount("#app");
Can anyone point me in the right direction even to see how to isolate any underlying problem please?
EXTRA CODE ADDED BELOW
Vue (lang="ts") component which does not display correctly:
<template>
<div class="container-fluid">
<div class="row ml-1">
<h4>Complaint Reference: {{ complaint.ComplaintReference }}</h4>
<div class="col-12"><p>Enter the details of the complaint and click Save</p></div>
<div class="col-12">
<b-alert variant="success"
dismissible
:show="showDismissableAlert"
#dismissed="showDismissableAlert=false">
Your changes have been saved
</b-alert>
</div>
</div>
<div class="row">
<!-- the next line is a separate vue component that uses the same approach and which renders correctly -->
<tabs-view></tabs-view>
<div class="col-md-12">
<b-card no-body> <!-- THIS IS WHAT BREAKS! -->
<b-tabs card>
<b-tab title="Details" active>
<p> in first tab</p>
</b-tab>
<b-tab title="Contact">
<p> in second tab</p>
</b-tab>
<b-tab title="Description">
<p> in third tab</p>
</b-tab>
<b-tab title="Outcome">
<p> in final tab</p>
</b-tab>
</b-tabs>
</b-card> <!-- THIS IS WHAT BREAKS! -->
</div>
</div>
<div class="clearfix"></div>
</div>
</template>
<script lang="ts">
import {Component, Prop, Vue} from "vue-property-decorator";
import {Complaint} from "#/components/complaints/Complaint";
import TabsView from '../shared/Tabs.vue'
#Component({
components: {
tabsView: TabsView
}
})
export default class EditComplaintComponent extends Vue {
complaint: Complaint = new Complaint("");
baseUri: string = "api/Complaints/GetByReference/?id=";
showDismissableAlert: Boolean = false;
}
</script>
<style scoped>
</style>
and then another non-TS vue component consumed on the broken one which works correctly with b-tabs inside b-card
<template>
<div>
<b-card title="Card Title"
img-src="https://lorempixel.com/600/300/food/5/"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2">
<!--<p class="card-text">-->
<!--Some quick example text to build on the card title and make up the bulk of the card's content.-->
<!--</p>-->
<b-button href="#" variant="primary">Go somewhere</b-button>
<b-card no-body>
<b-tabs card>
<b-tab title="first" active>
<br>I'm the first fading tab
</b-tab>
<b-tab title="second" >
<br>I'm the second tab content
</b-tab>
<b-tab title="disabled" disabled>
<br>Disabled tab!
</b-tab>
</b-tabs >
</b-card>
</b-card>
</div>
</template>
<script>
export default {
components: { }
}
</script>
<style scoped>
</style>
I ran into a similar issue with bootstrap-vue 2.21.2. Ended up being that I had a component that wasn't marked up with #Component. After adding it in all my components went from 'undefined' text to display the proper content. See https://github.com/bootstrap-vue/bootstrap-vue/issues/5985#issuecomment-765558938.
Upgrade to the latest version of BootstrapVue to get around this bug.
I had a parent component missing the #Component decorator (in my case it was App.vue) that was causing the undefined behaviour. Make sure that all components have this decorator applied.
My requirement is something like this.
I got the list of images from the back-end.
I want to pass those image names to the carousel to display images.
This is my code.
<template>
<div class="">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" v-for="banner in banners">
<img :src="`./assets/${banner}`" alt="" class="img-fluid" >
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
banners:["logo.png","index.png","Capture.png"]
}
},
methods:{
}
}
</script>
But this method doesn't work. How do I pass images to my carousel element?
The problem is that you're setting all carousel slides to active, so they will all display at once. Use :class to conditionally set the active slide...
<div class="carousel-item" v-for="(banner,idx) in banners" :class="{ active: idx==0 }">
<img :src="banner" alt="" class="img-fluid">
</div>
Also, make sure the :src="'./assets/${banner}'" reference is actually working to find the images.
Working demo on Codeply
Note: You don't want to use jQuery $('.carousel').carousel(); to load the Carousel since you're already using the data-ride="carousel" attribute. As stated in the Bootstrap 4 docs...
The data-ride="carousel" attribute is used to mark a carousel as
animating starting at page load. It cannot be used in combination with
(redundant and unnecessary) explicit JavaScript initialization of the
same carousel.
From https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
The data-ride="carousel" attribute tells Bootstrap to begin animating the carousel immediately when the page loads.
Vue hasn't mounted this component yet on page load. So you gotta initialize the slider only after it has mounted.
So you gotta remove data-ride="carousel", and add $('.carousel').carousel() in the mounted hook (assuming that the jquery $ is available as a global variable). Make sense ?
<template>
<div class="">
<div id="carouselExampleSlidesOnly" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active" v-for="banner in banners">
<img :src="`./assets/${banner}`" alt="" class="img-fluid" >
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
banners:["logo.png","index.png","Capture.png"]
}
},
methods:{
},
mounted(){
$('.carousel').carousel();
}
}
</script>
I want to have a page with the following responsive layout:
Image 1) A responsive page layout with 3 boxes (on small/medium screen)
Image 2) A responsive page layout with 3 boxes (on wide screen)
The goal is to make this page responsive so that whenever screen is too wide, box 3 will jump next to box 2 (like image 2). For this I use grid system of Bootstrap with allocating "8" spans for Box 1 and "4" for box 2 and 3. It works the way I described. Now I want to fix the position of Box 2 and Box 3 so when I scroll the page (to see the content of Box 1) I will see Box 2 and 3 in my viewport and I don't want to make Box 1 scrollable! I want the whole page to scroll! Do you know any Bootstrap solution that will handle this situation? (I want to keep the responsive layout of the whole page)
This is the basic code that I have for the page:
<div class=row>
<div class="col-md-8 col-lg-6">Box 1</div>
<div class="col-md-4 col-lg-3">Box 2</div>
<div class="col-md-4 col-lg-3">Box 3</div>
</div>
Right now I can make Box 1 scrollable but it will put the scrollbar next to box 1, but I want it to be at the right side of the page, so the whole page scrolls but box 2 and 3 are fixed. And at the same time, on large screens they will change their position and all 3 boxes will be next to each other!
Is there any suggestions?
FIXED
If i got you right :) Here is a fiddle : https://jsfiddle.net/fL2L0qnj/2/ , just resize the result area to see effect :)
HTML :
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="box0"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="row">
<div class="col-xs-6 col-md-12"> <!--do this at your preference, look at example and then
arrange it for your self :)
<div class="box1"></div>
</div>
<div class="col-xs-6 col-md-12">
<div class="box2"></div>
</div>
</div>
</div>
CSS:
.box1,.box2{
width:80%;
height:100px;
margin:10px auto;
}
.box0{
width:80%;
height:220px;
margin:auto;
margin-top:10px;
background:green;
}
.box1{
background:blue;
}
.box2{
background:red;
}
JQUERY:
$(window).scroll(function() {
var y = $(".keeptop").offset().top;
var scrollY = $(window).scrollTop();
if (scrollY > y) {
var padY = scrollY - y;
$(".keeptop").css("padding-top", padY);
}
});