I was trying to add transition to a slot like this
<template>
<transition name="committee">
<div class="card">
<slot></slot>
</div>
</transition>
</template>
Added CSS classes like this
.committee-enter-from{
opacity: 0;
transform: translateX(-3rem);
}
.committee-enter-active{
transition: all 1s ease-in;
}
.committee-enter-to{
opacity: 1;
transform: translateX(0) ;
}
The parent template looks like this
<section class="section">
<app-committee>
<div class="content">
<div class="imgText">
<div class="imgBx">
<img src="#">
</div>
<h3>Samanta Doe<br><span>Manager</span></h3>
</div>
<ul class="sci">
<li><a href="#">
</a></li>
<li><a href="#">
</a></li>
</ul>
</div>
</app-committee>
</section>
The transition is not working.
What may be the mistake i am making.
The transition should work with conditional rendering v-if="someCondition" and if you want the transition to run at the first rendering you've to add appear prop, in the case you could use the availability of $slots.default as condition :
<transition name="committee" appear>
<div class="card" v-if="$slots.default">
<slot></slot>
</div>
</transition>
Related
I have a nav-bar that works fine. Except for the fact that it does not close when an item is clicked.
It does close when I click anywhere else in the window.
I work in laravel 8 and vue-3, have bootstrap-5 installed.
The navbar:
<template>
<div class="container-fluid navbar-custom-header">
<a class="close-navbar-toggler collapsed" data-bs-toggle="collapse" data-bs-target="#mySideBar" aria-controls="mySideBar" aria-expanded="false" aria-label="Toggle navigation">
</a>
<nav class='navbar-custom navbar-dark fixed-top' >
<div class="row " style="vertical-align:center">
<div class="col-2">
<button class="openbtn dropdown-toggle" data-bs-toggle="collapse" data-bs-target="#mySideBar">☰</button>
</div>
<div class="col-3">
Cards
</div>
<div class="col-3" v-if="!loggedIn">
<router-link to="/login"> Login </router-link>
</div>
<div class="col-3" v-if="loggedIn">
<router-link to="/logout"> Logout </router-link>
</div>
</div>
</nav>
</div>
<div class="navbar-custom-container" style="z-index:10">
<nav id="mySideBar" class="collapse navbar-custom navbar-collapse">
<div class="navbar-custom-items">
<ul class="nav navbar-nav">
<br>
<br>
<li class="nav-item"><router-link to="/memory" class="nav-link"> MemoryGame </router-link></li>
<br>
<li><router-link to="/cards" > Manage Cards </router-link></li>
<br>
<li><router-link to="/aanmelden"> Nieuwe Speler aanmelden </router-link></li>
<br>
<li><router-link to="/game"> Game spelen </router-link></li>
<br>
<li><router-link to="/game/admin"> GameAdmin </router-link></li>
</ul>
</div>
</nav>
</div>
</template>
<script>
export default {
computed: {
loggedIn() {
return this.$store.getters.loggedIn
}
}
}
</script>
and the accompanying css:
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
.close-navbar-toggler{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:1;
cursor:pointer;
}
.close-navbar-toggler.collapsed{
z-index:-1;
}
.navbar-custom-header {
background-color: rgb(5, 4, 71);
color:rgb(245, 209, 8);
margin:auto;
}
.navbar-custom-container {
display:flex;
justify-content:flex-start;
position:absolute;
//padding:0px 12px;
}
.navbar-header {
background-color: rgb(5, 4, 71);
}
.navbar-custom {
background-color: rgb(17, 15, 172);
color:yellow;
padding:12px -12px;
}
.navbar-toggler-icon {
vertical-align:middle;
text-align:left;
}
.navbar-custom-items > a:link {
color:black;
}
.navbar-custom-items > a:active {
color:rgb(73, 7, 7);
}
.navbar-custom-items > a:hover {
color:rgb(138, 59, 241);
}
I realize that I do not fully understand how Bootstrap catches the collapse-command.
Can anyone explain?
In vue3you would have a component that represents the nav menu as a template. Then, the component would look like this (using bootstrap-vue-3 components such as b-collapse, but you can use div tags as well):
<template>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button"
:class="visible ? null : 'collapsed'"
:aria-expanded="visible ? 'true' : 'false'"
#click="visible = !visible"
aria-controls="navbarSupportedContent"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<b-collapse class="collapse navbar-collapse" id="navbarSupportedContent" v-model="visible">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<router-link class="nav-link" :to="{name: 'home'}" #click="visible = !visible">
home
</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" :to="{name: 'page1'}" #click="visible = !visible">
page1
</router-link>
</li>
</ul>
</b-collapse>
</div>
</nav>
</template>
<script setup>
import {ref} from 'vue'
const visible = ref(false)
</script>
In the template example you can see that clicking on the navbar-toggler or on the links, the visible attribute of the components gets toggled. And the navbarSupportedContentelement is visible, depending on the value of visible (v-model="visible"). If you do not use bootstrap-vue-3, then you would use v-show="visible" inside your div to toggle it.
I want to make such a card with a bootstrap meaning I want to divide it into three parts regardless of what the card contains of data and icons
But I was not able to divide it into three parts, how can I do that?
And I was able to display the card in this way:
How can i solve this problem?
Card.vue:
<template>
<div>
<div class="card bg-light mb-3 mr-50" style="max-width: 25rem; height: 10rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<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>
</div>
</div>
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make</p>
</div>
</div>
</div>
</template>
<script>
</script>
<style>
</style>
Is this what your looking for ? You can use bootstrap grid for this, Checkout the docs
.row{
background-color: #efefef;
}
.col{
background-color: white;
margin: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
<div class="container-fluid">
<div class="row">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
</div>
I'm using bulma-carousel to show a slides of three images, it display all three images as slider (side by side) and they can be change the active, but the "no active" images are displayed too.
<section class="section">
<div class="container">
<div id="post_images" class="carousel">
<div class="item-1">
<figure class="image is-16by9 has-ratio">
<img src="path/to/image"/>
</figure>
</div>
<div class="item-2">
<figure class="image is-16by9 has-ratio">
<img src="path/to/image"/>
</figure>
</div>
<div class="item-3">
<figure class="image is-16by9 has-ratio">
<img src="path/to/image"/>
</figure>
</div>
</div>
</div>
</section>
<script>
bulmaCarousel.attach('#post_images', {
slidesToScroll: 1,
slidesToShow: 1,
loop: true,
});
</script>
I made this Codepen example.
Solved with:
.carousel {
overflow: hidden;
}
i'm creating modal with vuejs and following this example but i create a separated file for modal so i can simply call my modal component anywhere i need to like this
here is my modal.vue
<template>
<div class="modal-mask" #click="close">
<div class="modal-dialog" :class="size">
<div class="modal-content">
<div class="modal-header" :class="color">
<button type="button" class="close" #click="close">×</button>
<h6 class="modal-title">{{ title }}</h6>
</div>
<div class="modal-body">
<slot></slot>
</div>
<div class="modal-footer">
<slot name="button"></slot>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
props: ['title','color','size'],
methods: {
close(){
this.$emit('close');
}
}
}
</script>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
transition: opacity .3s ease;
}
</style>
and in index.vue where i want to call it i just simply
<app-modal
:title="modalTitle"
:size="modalSize"
:color="modalColor"
v-if="modalShow"
#close="modalShow = false"
>
</app-modal>
now my question is i want to use 2 kind of transition, first is in my index.vue page
<transition name="modal">
<app-modal
:title="modalTitle"
:size="modalSize"
:color="modalColor"
v-if="modalShow"
#close="modalShow = false"
>
</app-modal>
</transition>
and the second one is in my modal.vue like this
<template>
<div class="modal-mask" #click="close">
<transition name="modal-inside">
<div class="modal-dialog" :class="size">
<div class="modal-content">
<div class="modal-header" :class="color">
<button type="button" class="close" #click="close">×</button>
<h6 class="modal-title">{{ title }}</h6>
</div>
<div class="modal-body">
<slot></slot>
</div>
<div class="modal-footer">
<slot name="button"></slot>
</div>
</div>
</div>
</transition>
</div>
</template>
why i want it like that well simply because in there is modal-mask class that warp entire modal and that css class is add some dark/shade background so user can focus on the modal.... exactly like bootstrap modal fade effect and then after that i want everything inside div modal-dialog to show/transition after modal-mask is already finished its transition
so it will just first darken background and then show modal... they move separately one after another.. not at the same time
or to be more easy to imagine it i want to generate exactly like bootstrap modal
I have been trying to make my grid to fill the panel it is contained it but I am having issues. I want to two divs representing the grid in the panel body to fill the parent which is the panel body. Here is the markup below:
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Welcome</div>
<div class="panel-body" id="app">
<div class="row">
<div class=" col-lg-4 col-lg-4">
<ul class="list-group">
<li class="list-group-item" v-for="li in list">
</li>
</ul>
</div>
<div class="col-md-8 col-lg-8 ">
<ul class="list-group">
<li class="list-group-item" v-for="li in list"> {{ li.body }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Bootstrap columns automatically include left and right padding. You can remove this by adding a class to the columns as done so by Julien Melissas.
http://julienmelissas.com/no-gutter-column-trick-for-bootstrap/
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
Adding these classes to your css file will allow you to add a no-gutters class to your rows.
Here's a Pen to show how it works.
http://codepen.io/mutualdesigns/pen/jAXRKm
If you want to remove the spaces to the left and right of the row inside of the panel, you'll need to override that element's padding in a similar fashion.