So question is simple: how to pass variables for managing settings in Carousel (react-bootstrap)?
I would like to pass (params/props/state) to so to be able to dynamically show /hide next previous buttons, autoplay, time interval in between two slides etc by passing props as one would do in regular bootstrap carousel (where that is done by adding html or hiding it by CSS which is imao 2010 solution). Any idea?
Here is my code taken from: here. Unfortunately poor documentation (or poor UI so I was not able to locate more detailed documentation.)
CODE:
<Carousel>
<Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=First slide&bg=373940"
alt="First slide"
/>
<Carousel.Caption>
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>
</Carousel.Item>
/* and so on, next item, next item, etc... */
</Carousel>
After trying with some workaround and spending hours on comparing Carousel react-bootstrap with Carousel bootstrap itself, I got this solution working in react-bootstrap:
<Carousel
autoPlay={true}
interval={5000}
controls={false}
indicators={false}
>
Now only thing you should do is to make these true /false coming from your json/config/props to make changes programmatic. Note "interval" is value in milliseconds (example: 5000 for 5 sec frame).
I hope this solution helps someone as I wish it helped me at the time I asked question :)
Cheers!
use this in case of turning off auto scroll feature
<Carousel interval={null}>`
carousel not scroll auto
Adding interval={null} on the Carousel tag will do the trick.
<Carousel interval={null}>
<Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=First slide&bg=373940"
alt="First slide"
/>
<Carousel.Caption>
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>
</Carousel.Item>
/* and so on, next item, next item, etc... */
</Carousel>
Related
I am working on a NuxtJS project, with BootstrapVue as front-end framework. I am trying to edit the size of an image inserted inside the title of a card, with the following code:
<b-card
bg-variant="primary"
text-variant="white"
img-alt="Image"
img-src="~/assets/images/house.png"
header="The house"
class="text-center position-relative"
>
<b-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</b-card-text>
<b-button variant="primary" class="paragraph stretched-link"
>Click here</b-button
>
</b-card>
Does anyone know if is possible to customize the style of the image through the b-card properties (without CSS)? The documentation did not helped me.
You could use img-height and img-width to provide the image size inside the card, they accepts a string or a number as values :
<b-card
bg-variant="primary"
text-variant="white"
img-alt="Image"
img-src="~/assets/images/house.png"
img-height="200"
img-width="200"
header="The house"
class="text-center position-relative"
>
I have a v-expansion-panel-header which contains a v-checkbox. If I click on the checkbox the checkbox does not check/uncheck. Instead the expansion panel opens/closes. How do I allow the checkbox to work and have the panel only open when the default icon that is supplied is clicked on?
I have tried using #click.stop and #click.native.stop, #click.capture, #change.stop etc on the v-checkbox, but it doesn't work.
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-header>
<v-checkbox v-model="checkbox" label="MyCB" #click.stop />
</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor.
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
The issue here is that the event is bubbling up from the checkbox to the expansion panel. What you need to do is, when the checkbox is being clicked, pass the event into a function, and cancel the event bubbling.
check: function(e) {
e.cancelBubble = true;
}
Check the working code here
Note that, in the example I had wrapped a v-flex around the v-checkbox. This is because the v-checkbox was spanning the whole width of the expansion panel and I think you still want the expansion to work when you click on places that are not close to the checkbox. You can probably find some other ways of preventing full width in CSS but this was just a quick and dirty way to demonstrate the prevent event bubbling solution.
Here is my component. It takes a props imageUrl which is String referring either an image from a URL or a reference to a local asset from the assets folder
<template>
<div class="flex" style="height: 155px;align-items: center">
<div class="avatar" style="height: 130px;width: 130px">
<img :src="require(`imageUrl`)" height="130" width="130" style="border-radius: 50%"/>
</div>
<div class="flex flex-column" style="margin-left: 31px">
<div class="flex" style="font-weight: bold">
{{fullName}}
</div>
<div class="flex" style="">
{{title}}
</div>
<div style="height: 20px"></div>
<div class="flex" style="text-align: start">
{{content}}
</div>
</div>
</div>
</template>
<script>
export default {
name: "ReviewTile",
props: {
imageUrl: String,
fullName: String,
title: String,
content: String
}
}
</script>
<style scoped>
</style>
I use it like this:
<ReviewTile
image-url="../assets/Eugene.png"
full-name="Eugene B.
"
title="UI/UX Designer."
content=" Christabel is one of the business world’s truly great deal makers and strategists, easily on par with
the best of the strategy consultants and designers I have worked with at SOS-HGIC and Kleio. She is also
a world-class human being."
></ReviewTile>
<div style="background-color: #b7b7b7;height: 1px; margin: 33px 0px"></div>
<ReviewTile
image-url="../assets/headshot_black1.png"
full-name="Gilliam D."
title="Web designer/Developer"
content="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."
></ReviewTile>
But images are not loading.
There is a strange JS bug that breaks proper image loading (sry, I forgot what it was, but I found the solution on stackoverflow a while ago).
What helps is breaking the image request up like this:
:src="require('#/assets/' + imageName + '')"
So you only have your image name in the prop and load it without the curly brackets. Now you also don't have to worry about the correct path. The # will find the correct folder.
If anyone can explain the technicalities of this better or finds the other thread with the solution, please feel free to expand on my answer.
Edit: First part of the explanation: Webpack can't work with only a variable as path, because then it would have to go over potentially thousands of files. So you have to have the #/assets/ part as text. Explained more nicely here: Vue.js dynamic image src with webpack require() not working
Couldn't find yet why the curly brackets don't work.
If all your images are in the same folder your can just pass the file name as props:
<ReviewTile
image-url="Eugene.png"
...
></ReviewTile>
<ReviewTile
image-url="headshot_black1.png"
...
></ReviewTile>
Then in the ReviewTitle component, require the imageUrl with the assets path:
<div class="avatar">
<img :src="require(`../assets/${imageUrl}`)" />
</div>
Note:
If all the images have the same extension .png you can even just write the file name like image-url="Eugene" and in the component: <img :src="require(`../assets/${imageUrl}.png`)" />
if you are sending the path of the image in the url, then you can use the props directly,
but make sure you are providing the right path to the image.
<img :src="imageUrl" height="130" width="130" style="border-radius: 50%"/>
also change your prop name in the other component
// Wrong
<ReviewTile
image-url="../assets/Eugene.png"
full-name="Eugene B.
// correct one would be something like this
<ReviewTile
:imageUrl="../assets/Eugene.png"
full-name="Eugene B.
For those using Nuxt.js for the Vue apps - there is simple solution using static folder instead of assets.
The key difference between these two folders is that static is not compiled by Webpack - therefore you are free to use variables as you please.
See the docs:
https://nuxtjs.org/docs/2.x/directory-structure/static
I think boostrap-vue carousel not so detailed. For this reason i can't reach to nice solution.
I wanna just show 3 items (like in image) in my app and i didnt find the solution and i searched other package and there was no solution for me.
All i want to do like this;
data() {
return {
slide: 0,
sliding: null
};
},
methods: {
onSlideStart(slide) {
this.sliding = true;
},
onSlideEnd(slide) {
this.sliding = false;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div>
<b-carousel id="carousel-1" v-model="slide" :interval="0" controls indicators background="white" img-width="650" img-height="480" #sliding-start="onSlideStart" #sliding-end="onSlideEnd">
<b-carousel-slide caption="First slide" text="Nulla vitae elit libero, a pharetra augue mollis interdum." img-src="https://picsum.photos/1024/480/?image=52"></b-carousel-slide>
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
<h1>Hello world!</h1>
</b-carousel-slide>
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide>
<b-carousel-slide>
<img slot="img" class="d-block img-fluid w-100" width="1024" height="480" src="https://picsum.photos/1024/480/?image=55" alt="image slot">
</b-carousel-slide>
</b-carousel>
<p class="mt-4">
Slide #: {{ slide }}<br> Sliding: {{ sliding }}
</p>
</div>
If you have any other library suggestion i would appreciate.
Thanks for help.
BootstrapVue <b-carousel> is designed to only show a single slide at a time (as is the standard bootstrap V4.x carousel component). There are never more than 2 slides visible at once (during the slide or fade transition, all other slides are hidden. CSS transforms are used to make the appearance of the slides moving)
You would need to either find a 3rd party component that supports multiple slides showing, or generate your own custom component.
I'm not familiar with this specific component, but this is from its documentation:
<!-- Slide with blank fluid image to maintain slide aspect ratio -->
<b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
</p>
</b-carousel-slide>
I would try using a blank image as the default and inserting whatever other images/content you want as children of the slide:
<!-- Slide with blank fluid image to maintain slide aspect ratio -->
<b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
<img class="my-img" src="img1.jpg"/>
<img class="my-img" src="img2.jpg"/>
<img class="my-img" src="img3.jpg"/>
</b-carousel-slide>
And use absolute positioning or flexbox to display them the way you want.
I did the same thing using b-card-group. Because b-carousel does not support showing multiple items.
In template area
<div>
<!-- carousel area -->
<b-card-group deck class="mb-0">
<b-card v-for="(item,index) in currentPageCards" :key="index" class="mr-0">
<!-- card content -->
</b-card>
</b-card-group>
<!-- pagination area -->
<div class="pagination" v-if="cards.length>cardsPerPage">
<div class="index" v-for="i in pageCount" :key="i" #click="next(i)" :class={active:currentPage(i)}></div>
</div>
</div>
In script area
data() {
return {
cards: [{
//Data in the card as objects
},{},{},{},{}],
paginatedCards:[],
pageCount:0,
cardsPerPage:4,
currentPageIndex:0
}
},
computed: {
currentPageCards(){
this.createPages();
return this.paginatedCards[this.currentPageIndex];
}
},
methods:{
currentPage(i){
return i-1===this.currentPageIndex;
},
createPages() {
let cardsLength = this.cards.length;
let fullPagesCount = Math.floor(cardsLength/this.cardsPerPage);
if(cardsLength>this.cardsPerPage) {
this.pageCount = 0;
for (let i = 0; i < fullPagesCount * this.cardsPerPage; i += this.cardsPerPage) {
this.paginatedCards[this.pageCount] = this.cards.slice(i,i + this.cardsPerPage);
this.pageCount++;
}
this.paginatedCards[this.pageCount] = this.cards.slice(cardsLength-this.cardsPerPage,cardsLength);
this.pageCount = this.pageCount+1;
} else {
this.paginatedCards[0] = this.cards;
}
},
next(i){
this.currentPageIndex=i-1;
}
}
In style area
.pagination{
display:flex;
align-items: center;
justify-content: center;
padding:10px;
}
.index{
margin-left:10px;
width:10px;
height:10px;
background:#000000
}
.active{
width:15px;
height:15px;
}
It shows like as below
Try this one. Thank you!
i want to disable single tab in tabcontainer of dojo .
Here's my workaround for this problem:
dojo.style(dijit.byId("tabID").controlButton.domNode,{display:"none"});
and:
dojo.style(dijit.byId("tabID").controlButton.domNode,{display:"inline-block"});
For some reason, altering the disabled property, or calling setDisabled does nothing for me.
You can't do it directly since this is not a feature of the DOJO tab container. There has been a bug against DOJO, open for about 3 years, to add the feature: http://bugs.dojotoolkit.org/ticket/5601
That defect also has a potential workaround in it.
dijit.byId('tab').controlButton.domNode.disabled = true
I answered this question in another thread. Basically it involved getting jQuery involved. Works great for me. I have all the tabs created statically (as opposed to programatically) and I'm able to manipulate whether they are shown or hidden with the help on jQuery. All the code any everything is in my post here:
How do I dynamically show and hide an entire TabContainer using DOJO?
You can override its default css to make the tabbar invisible.
dojo.attr(dijit.byId('tab'), "disabled", true);
dijit.byId('tab').onClick = function () { };
You can disable tabs by setting the disabled property of the pane:
Source: https://dojotoolkit.org/reference-guide/1.10/dojo/dom-style.html
pane.set("disabled", true);
Example:
<div data-dojo-type="dijit/layout/TabContainer" style="width: width: 350px; height: 200px">
<div data-dojo-type="dijit/layout/ContentPane" title="My first tab" data- dojo-props="selected:true">
Lorem ipsum and all around...
</div>
<div data-dojo-type="dijit/layout/ContentPane" id="second" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="My last tab" data- dojo-props="closable:true">
Lorem ipsum and all around - last...
</div>
</div>
<script type="dojo/require">
registry: "dijit/registry"
</script>
<button type=button onclick="registry.byId('second').set('disabled', !registry.byId('second').get('disabled'));">
toggle tab #2 disabled
</button>
Only problem here is that it's not visible to the user they can't click on it.
You can these additional CSS selectors:
.dijitTab.dijitDisabled {
cursor: not-allowed !important;
}
.dijitTab.dijitDisabled > .tabLabel{
cursor: not-allowed !important;
}