I am not sure what is happening here, but seems like I can't change the class of the active-class prop of my v-expansion-panels dynamically.
I am trying to change it between green and red depending on a model state (changed by a click on a button), but even though the model changes the v-expansion-panels doesn't pick the new active class.
Might be doing something wrong here, but can't figure it out.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
edited: false,
}
},
computed: {
activeClass() {
return this.edited ? 'active-panel-edited' : 'active-panel-normal';
}
}
})
<style scoped>
.active-panel-edited {
background-color: #ff000038 !important;
}
.active-panel-normal {
background-color: #00ff1438 !important;
}
</style>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<v-app>
The current active class: {{activeClass}}
<v-expansion-panels :active-class="activeClass">
<v-expansion-panel
v-for="(item,i) in 5"
:key="i"
>
<v-expansion-panel-header>
Item
</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor sait amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<v-btn #click="edited = !edited">Change Color</v-btn>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-app>
</div>
</body>
</html>
Thank you in advance!
apply the active class v-expansion-panel instead of v-expansion-panels
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
edited: false,
}
},
computed: {
activeClass() {
return this.edited ? 'active-panel-edited' : 'active-panel-normal';
}
}
})
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<style>
.active-panel-edited {
background-color: #ff000038 !important;
}
.active-panel-normal {
background-color: #00ff1438 !important;
}
</style>
</head>
<body>
<div id="app">
<v-app>
The current active class: {{activeClass}}
<v-expansion-panels>
<v-expansion-panel
:active-class="activeClass"
v-for="(item,i) in 5"
:key="i"
>
<v-expansion-panel-header>
Item
</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor sait amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<v-btn #click="edited = !edited">Change Color</v-btn>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-app>
</div>
</body>
</html>
Related
im use bootstrap 4.3.1 version along with the vue.js version 2
my code
<div class="container">
<div class="row">
<div class="col-md-7">
<div
class="tooltip-icon"
#click="show = !show"
id="tooltip-button-1"
></div>
<b-tooltip
:show.sync="show"
target="tooltip-button-1"
custom-class="tooltip-custom"
placement="bottom"
triggers="click"
>
<div class="tooltip-text-title">
Тест
</div>
</b-tooltip>
</div>
<div class="col-md-5"></div>
</div>
</div>
JS:
<script>
export default {
name: "Test",
data() {
return {
show: false,
};
},
};
</script>
and in this case, if I change the style of the tooltip, I increase its max-width on 1000px or more (.tooltip-inner), and if its width is greater than that of the parent (col-md-7), it changes the placement to the left
it turns out that the tooltip cannot go beyond the column
Your code is working fine. I did not see any issue in that. Tooltip is behaving correct as per the col width (col-md-7) provided.
Live Demo :
new Vue({
el: "#app",
data: {
show: false
}
});
<script src="https://unpkg.com/vue#2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.12.0/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.5.0/dist/bootstrap-vue-icons.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.12.0/dist/bootstrap-vue.css"/>
<div id="app">
<div class="container">
<div class="row" style="text-align: center">
<div class="col-md-7" style="background-color: yellow">
<div #click="show = !show" id="tooltip-button-1">
Click Me
</div>
<b-tooltip target="tooltip-button-1" triggers="click" placement="bottom">Тест</b-tooltip>
</div>
<div class="col-md-5"></div>
</div>
</div>
</div>
new Vue({
el: "#app",
data: {
show: false
}
});
<script src="https://unpkg.com/vue#2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.12.0/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.5.0/dist/bootstrap-vue-icons.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.12.0/dist/bootstrap-vue.css"/>
<div id="app">
<div class="container" style="max-width: 1024px;">
<div class="row" style="text-align: center">
<div style="background-color: yellow; width: 55%; overflow-y: scroll">
<div #click="show = !show" id="tooltip-button-1">
Click Me
</div>
<b-tooltip target="tooltip-button-1" triggers="click" placement="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</b-tooltip>
</div>
<div style="background-color: red; width: 45%;">
<div style="height: 40px"></div>
</div>
</div>
</div>
</div>
<style>
.tooltip-inner {
max-width: 300px!important
}
</style>
I found a more correct interpretation of my error
it appears if the block has scrolling
This works, but the moment I add Bootstrap 3, (which I need to as it's required in an existing project) it no longer fades in and out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
.flashcard
{
opacity: 1;
transition: opacity 2s;
}
.flashcard.hidden
{
opacity: 0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', (event) =>
{
var d = document.getElementById('code-yes-text');
d.classList.add("hidden");
document.getElementById('code-yes').addEventListener("change", function()
{
if (this.checked && d.classList.contains("hidden"))
{
document.getElementById('code-yes-text').classList.toggle('hidden');
}
});
document.getElementById('code-no').addEventListener("change", function()
{
if (this.checked && !d.classList.contains("hidden"))
{
document.getElementById('code-yes-text').classList.toggle('hidden');
}
});
});
</script>
</head>
<body>
<div class="radio">
<label>
<input type="radio" name="code" id="code-yes" />
<span>Yes</span>
</label>
</div>
<div id="code-yes-text" class="flashcard hidden">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam quibusdam suscipit culpa voluptatem nulla. Rerum explicabo in quo commodi ad laudantium nam ratione consectetur beatae, sint dolore molestias assumenda soluta.
</div>
<div class="radio">
<label>
<input type="radio" name="code" id="code-no" />
<span>No</span>
</label>
</div>
</body>
</html>
I would like to ask 2 questions about Sidebar in BootstrapVue.
Disable scrolling after opened Sidebar
How to handle closing method when click outside the Sidebar (Backdrop)
I'm using https://bootstrap-vue.org/docs/components/sidebar
<template>
<div>
<b-button v-b-toggle.sidebar-backdrop>Toggle sSidebar</b-button>
<b-sidebar
id="sidebar-backdrop"
title="Sidebar with backdrop"
backdrop
shadow
>
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
</div>
</b-sidebar>
</div>
</template>
Thank you and appreciate.
You can remove the scrollbar by adding the bootstrap class overflow-hidden to your body.
Hook a method up to the #change method on the sidebar, which is fired when the sidebar is shown and hidden.
The sidebar also has a #hidden event, which is fired when the sidebar gets hidden.
new Vue({
el: '#app',
methods: {
toggleBodyScrollbar(visible) {
const body = document.getElementsByTagName('body')[0];
if(visible)
body.classList.add("overflow-hidden");
else
body.classList.remove("overflow-hidden");
}
}
})
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.13.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-sidebar id="sidebar-1" title="Sidebar" shadow backdrop #change="toggleBodyScrollbar">
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
</div>
</b-sidebar>
<p v-for="i in 10">Some content</p>
<b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
<p v-for="i in 10">Some content</p>
</div>
I have the following slider
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-carousel
cycle
height="600"
hide-delimiter-background
show-arrows
next-icon
prev-icon
>
<v-carousel-item
:src=`https://picsum.photos/seed/picsum/536/354`
>
<v-row align-end>
<h1 class="white-text">Lorem, ipsum dolor.</h1>
<p class="white-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quo iusto velit autem, pariatur impedit neque, sed a, rem architecto aut aliquid aspernatur magni quibusdam natus ducimus fugiat. Et, veniam.</p>
<v-btn color="yellow black-text">Hi</v-btn>
</v-row>
</v-carousel-item>
</v-carousel>
</v-app>
</div>
I want for example align the text of the first slide at the bottom-center of the image, I've heard that Vuetify uses flexbox but I'm not sure how it works and I don't even understand the examples from the documentation, so I would like some help. What I want to know the most is where to place the align or justify, I really don't get it.
Try to add the following classes d-flex flex-column justify-end align-center fill-height to the v-row component :
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-carousel cycle height="600" hide-delimiter-background show-arrows next-icon prev-icon>
<v-carousel-item :src=`https://picsum.photos/seed/picsum/536/354`>
<v-row class="d-flex flex-column justify-end align-center fill-height">
<h1 class="white-text">Lorem, ipsum dolor.</h1>
<p class="white-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quo iusto velit autem, pariatur impedit neque, sed a, rem architecto aut aliquid aspernatur magni quibusdam natus ducimus fugiat. Et, veniam.</p>
<v-btn color="yellow black-text">Hi</v-btn>
</v-row>
</v-carousel-item>
</v-carousel>
</v-app>
</div>
I'm trying to create a sidebar which can slide-in and -out by clicking on a trigger element. The trigger-element should be sticked to the sidebar.
However, in my current fiddle, the triggler-element only changes position after the sidebar completed its transition.
How can I accomplish the expected behavior?
new Vue({
el: "#app",
data: {
exposed: true
}
})
.sidebar {
width: 200px;
height: 200px;
}
.toggler {
height: 30px;
}
/**********************
* Transition classes *
**********************/
.slide-leave-active,
.slide-enter-active {
transition: 1s;
}
.slide-enter {
transform: translate(-200px, 0);
}
.slide-leave-to {
transform: translate(-200px, 0);
}
<script src="https://vuejs.org/js/vue.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app" class="px-0 py-4">
<div class="d-flex">
<!-- Sidebar content -->
<transition name="slide">
<div v-if="exposed" class="sidebar bg-dark text-white p-1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</transition>
<!-- Sidebar toggler -->
<div class="toggler px-2 bg-secondary">
<a href="#" v-on:click="exposed = !exposed" class="text-white">
<span v-if="exposed">[X]</span>
<span v-else>(?)</span>
</a>
</div>
</div>
</div>
jsfiddle
I made minor css change as below
.slide-enter {
margin-left:-200px;
}
.slide-enter-to {
margin-left:0px;
}
.slide-leave-to {
margin-left:-200px;
}
Please check if it works.
https://jsfiddle.net/z43xug9n/3/
If you want to slide both the sidebar and the toggle at the same time, it is better to slide their parent (container).
https://jsfiddle.net/4mju0rzt/31/
<div id="app">
<div v-bind:class="{'minimized': hide}" class="sidebar-container">
<div class="sidebar bg-dark text-white p-1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
<!-- Sidebar toggler -->
<div class="toggler px-2 bg-secondary">
<a href="#" v-on:click="hide = !hide" class="text-white">
<span v-if="!hide">[X]</span>
<span v-else>(?)</span>
</a>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
hide: false
}
})
</script>
Found a solution with Velocity.js. The trick is to move the sidebar away instead of removing it from the DOM.
new Vue({
el: "#app",
data: {
exposed: true
},
methods: {
slideIn (el, done) {
Velocity(el, {
marginLeft: 0
}, {
duration: 500
}, {
complete: done
});
},
slideOut (el, done) {
Velocity(el, {
marginLeft: -200
}, {
duration: 500
}, {
complete: done
});
}
}
})
.sidebar {
width: 200px;
height: 200px;
}
.toggler {
height: 30px;
width: 36px;
}
<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/2.0.3/velocity.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app" class="px-0 py-4">
<div class="d-flex">
<!-- Sidebar content -->
<transition v-on:enter="slideIn" v-on:leave="slideOut">
<div v-show="exposed" id="sidebar" class="sidebar bg-dark text-white p-1">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</transition>
<!-- Sidebar toggler -->
<div class="toggler px-2 bg-secondary">
<a href="#" v-on:click="exposed = !exposed" class="text-white">
<span v-if="exposed">[X]</span>
<span v-else>(?)</span>
</a>
</div>
</div>
</div>