the block code what i know how to add transition is
<tbody name="fade" is="transition-group">
<tr class="row" v-bind:key="item.data" v-if="item.more">
<td><p >{{k + 1}} - {{item.data}}</p></td>
</tr>
</tbody>
but how about vue-good-table anyone know the tricks to solve ?
in here, i only access the scss and
rowStyleClassFn the callback is set tr class='custom-transition'
<vue-good-table
:row-style-class="rowStyleClassFn" // the callback is set tr class='custom-transition'
...
>
...
// also i have tried with
<template slot="table-row" slot-scope="props">
<transition mode="out-in"> // i added looks like these
....
<span v-else>
<strong>{{ props.formattedRow[props.column.field] }}</strong>
</span>
</transition>
my scss
.yo-good-table::v-deep .vgt-table {
thead {
th {
border: $color-yo-border !important;
}
}
tbody {
tr.custom-transition {
transition: opacity 0.5s ease;
}
tr.custom-transition-active,
tr.custom-transition-leave-active {
transition: opacity 0.5s ease;
}
tr.custom-transition-enter-from,
tr.custom-transition-leave-to {
opacity: 0;
}
}
}
thanks in advance
Related
I have a v-data-table with 5 columns, which some have predefined widths, and some don't.
I'd like only one line of text maximum for each item and display "..." when the text exceeds 1 line.
<v-data-table
dark
:footer-props="{ 'items-per-page-options': [10, 25, -1] }"
dense
calculate-widths
fixed-header
height="498"
:headers="headers"
hide-default-header
:items="res"
sort-by="publicationDate"
:sortDesc="sortVal"
>
<template v-slot:header="{ props: { headers } }">
<thead>
<tr>
<th v-for="h in headers" :class="h.class"
:key="h.text">
<span>{{h.text}}</span>
</th>
</tr>
</thead>
</template>
<template #item.video="{ item }">
<a
target="_blank"
v-if="item.video != ''"
class="links1 video-icon"
:href="item.video"
>
<v-btn dark icon>
<v-icon class="ic1">mdi-movie</v-icon>
</v-btn>
</a>
</template>
<template #item.title2="{ item }">
<a
target="_blank"
v-if="item.file != ''"
class="links1"
:href="item.file"
>
<span style="color:white"> {{ item.title }} </span>
</a>
</template>
</v-data-table>
I looked through the CSS properties to do so and I found things like :
text-overflow: ellipsis;
white-space: nowrap;
But it doesn't add the ... at the end of the lines and it also takes place beyond the widths applied to each columns so not all 5 columns are displayed on my panel.
Here's the headers in the data section
headers: [
{ text: "Source", value: "dataSource", width: "120px", class:"source-field"},
{ text: "News", value: "title2", width: "214px", class:"news-field"},
{ text: "Actors", value: "concernedActors", width: "242px" },
{ text: "Video", value: "video", width: "58px" },
{ text: "Publication", value: "publicationDate", width: "80px" },
],
And I tried this css but it won't work, the column news just goes bigger so that the entire text fits on 1 line.
th.news-field{
max-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I would also love to make the hover darker on each line in the table
Here's a solution:
<template #item.foo="{ item }">
<div class="ellipsis-wrapper">{{ item.foo }}</div>
</template>
#your-table td {
position: relative;
}
#your-table td .ellipsis-wrapper {
position: absolute;
max-width: calc(100% - 1rem);
line-height: calc(3rem - 1px); /* change this if needed */
top: 0;
left: 1rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
But it creates another problem (easier to solve, IMHO): it takes the cell content out of the flow, therefore the table no longer calculates column width based on cells content (from the table's perspective, that column has no content) - so it relies on its header content (or on the provided width) to calculate the column width.
However, I believe making an "empty" column have a particular width (or a proportion from the table's width) is an easier to solve problem than your current one.
Demo: https://codepen.io/andrei-gheorghiu/pen/wvjoQXR
<transition-group name="slide">
<section-tree v-for="(section,index) in form.sections" :key="section.random"
:index = "index"
:section = "section"
#selectedSectionAndLesson="selectedSectionAndLesson"
>
</section-tree>
</transition-group>
Transition working fine in above.
Inside Section tree component there is a lesson tree component.
<template>
<ul class="iw-sider-card-wrap">
<div class="iw-sider-card-header">
<a class="card-title"> Course Builder</a>
</div>
<transition-group name="slide">
<lesson-tree v-for="(lesson,index) in lessons" :key="lesson.random"
:index = "index"
#selectedSectionAndLesson="selectedSectionAndLesson"
>
</lesson-tree>
</transition-group>
</ul>
</template>
Random is unique in component. but transition is not working for this component. I am increasing the no of records in sections an lessons array dynamically.
Thanks in Advance.
Did you added some CSS styling too?
This is copied and edited for your case:
.slide-item {
display: inline-block;
margin-right: 10px;
}
.slide-enter-active, .slide-leave-active {
transition: all 1s;
}
.slide-enter, .slide-leave-to /* .slide-leave-active below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
I'm experimenting with vue for the first time.
I've replaced a jquery show/hide that was using .slideDown() / .slideUp() with v-show - however I much prefer the animation of jQuery's slideup/down. Is there an easy way to do this with vue?
Simplified code here:
<nav class="bg-blue" role="navigation">
<div class="container classes here">
<div class="classes here">
<h1 class="classes here">
<a href="/" class="classes here">Site Name
</a>
</h1>
<button class="classes here" #click="isShowing ^= true">
hamburger svg here
</button>
</div>
<div class="main-nav classes here" v-show="!isShowing">
<div class="classes here">
<!-- nav items here -->
</div>
</div>
</div><!-- /.container -->
</nav>
Please advise.
You can install modules for this, or you can write a custom component. I suggest the second option.
<template>
<div>
<button #click="isShowing">
hamburger svg here
</button>
<!-- animation of appearance/disappearance.
More info: https://v2.vuejs.org/v2/guide/transitions.html -->
<!-- The attribute "name" is used to create custom classes
that are applied during animation -->
<transition name="main-nav"
#enter="transitionStep1"
#after-enter="transitionStep2"
#before-leave="transitionStep3"
#after-leave="transitionStep4">
<div class="main-nav" v-show="!active">
<div class="classes here">Some text</div>
</div>
</transition>
</div>
</template>
<script>
export default {
name: "Accordion",
data() {
return {
// set the variable that will hide/show the block
active: false
}
},
methods: {
isShowing() {
// change the value of the variable that will hide/show the block
this.active = !this.active;
},
transitionStep1(el) {
// set the block height at the moment of its appearance
el.style.height = el.scrollHeight + 'px'
},
transitionStep2(el) {
// remove inline styles from the block after animation of its appearance
el.style.height = ''
},
transitionStep3(el) {
// set the height of the block at the beginning of its disappearance animation
el.style.height = el.scrollHeight + 'px'
},
transitionStep4(el) {
// remove inline styles from the block after the animation of its disappearance
el.style.height = ''
},
},
}
</script>
<style lang="scss" scoped>
.main-nav {
overflow: hidden;
-webkit-transition: height 0.3s ease;
transition: height 0.3s ease;
}
.main-nav-enter {
height: 0;
}
.main-nav-leave-to {
height: 0 !important;
}
</style>
Is there a way that you can use transition between vuejs conditionals v-if and v-else?
As an example:
<transition name="fade">
<p v-if="show">hello</p>
<p v-else>Goodbye</p>
</transition>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s
}
.fade-enter,
.fade-leave-active {
opacity: 0
}
I can't seem to get a transition to work in such a scenario, where, as you toggle show, the <p> elements use a transition between them.
https://jsfiddle.net/fbponh78
Your problem is caused by the fact that vue transition does not see the element change, it only sees the content change.
This is caused by the fact that both elements have the same tag name, so vue just reuses this. To counteract this, give both elements an differed key value:
<p key=1 v-if="show">hello</p>
<p key=2 v-else>Goodbye</p>
Example:
new Vue({
el: '#demo',
data: {
show: true
}
});
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s
}
.fade-enter,
.fade-leave-to {
opacity: 0
}
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.min.js"></script>
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p key=1 v-if="show">hello</p>
<p key=2 v-else>Goodbye</p>
</transition>
</div>
Use two transitions:
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active {
transition: opacity .5s
}
.fade-enter,
.fade-leave-active {
opacity: 0
}
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
<transition name="fade">
<p v-if="!show">Goodbye</p>
</transition>
</div>
https://jsfiddle.net/saeedahmadi/fbponh78/10/
I had a problem, where a complex component would make v-else enter before v-if was removed. What helped me was #Khalil's (comments) suggestion:
<transition mode="out-in" ...
I'm using app-layout with app-drawer / app-drawer-layout and app-header / app-header-layout (see MWE below). The paper-badge is attached to an element inside the app-header. The first time the page is loaded, it briefly appears in the correct position (issue #12), than disappears off the right of the screen, exactly 256px too far to the right, which is the exact size of the app-drawer.
When the screen is resized, it recalculates the position to the correct place. I suspect that the position is calculated before the drawer is fully loaded.
This does not happen when the app-drawer is retracted and not visible.
I tried running updatePosition() at ready but that did not help.
Here is my MWE:
<template>
<style is="custom-style">
app-drawer {
--app-drawer-content-container: {
background-color: green;
};
}
app-header {
background-color: yellow;
}
</style>
<app-drawer-layout fullbleed>
<app-drawer slot="drawer">
<div id="drawerbox">Navigation Drawer</div>
</app-drawer>
<div class="container">
<app-header-layout>
<app-header id="header" condenses reveals effects="waterfall" slot="header">
<app-toolbar id="toolbarheader">
<div main-title id="toolbartitlebox">Title Toolbar</div>
<paper-icon-button id="discoursebutton" icon="communication:forum"></paper-icon-button>
<paper-badge for="discoursebutton" label="20" title="20 results"></paper-badge>
</app-toolbar>
</app-header>
</app-header-layout>
</div>
</app-drawer-layout>
</template>
One hack that works is to set a setTimeouton the updatePosition():
ready: function() {
var self = this;
setTimeout(function(){
self.$$('paper-badge').updatePosition();
}, 100);
}
But is there a more elegant way of solving this?
Thanks for your help!
One solution is to put paper-badge outside/after app-drawer-layout :
<template>
<style>
app-drawer {
--app-drawer-content-container: {
background-color: green;
}
;
}
app-header {
background-color: yellow;
}
paper-badge {
margin-top: 10px;
}
</style>
<app-drawer-layout fullbleed>
<app-drawer id="drawer" slot="drawer">
<div id="drawerbox">Navigation Drawer</div>
</app-drawer>
<app-header-layout>
<app-header id="header" condenses reveals effects="waterfall" slot="header">
<app-toolbar id="toolbarheader">
<paper-icon-button id="toggle" on-tap="_onToggle" icon="menu"></paper-icon-button>
<div main-title id="toolbartitlebox">Title Toolbar</div>
<paper-icon-button id="discoursebutton" icon="inbox"></paper-icon-button>
<!-- <paper-badge for="discoursebutton" label="20" title="20 results"></paper-badge>-->
</app-toolbar>
</app-header>
</app-header-layout>
<div class="container">
container
</div>
</app-drawer-layout>
<paper-badge for="discoursebutton" id="pd" label="20" title="20 results"></paper-badge>
</template>
Plnkr: http://plnkr.co/edit/V7zGBpqqzRonbAYyudea?p=preview
I avoided this same issue by putting the <paper-icon-button> and <paper-badge> in a container with position: relative, and stopped using the for attribute.
<div style="position: relative">
<paper-icon-button id="notification-icon" icon="social:notifications" onclick="[[showNotifications]]">
</paper-icon-button>
<template is="dom-if" if="[[messages.length]]">
<paper-badge label="[[messages.length]]" class="red"></paper-badge>
</template>
</div>