I'm working on a project using Nuxt.js as SSR engine and Vuetify as styling framework. In one of my templates I have such code:
<v-layout row wrap align-center
:class="{ 'mb-4': $vuetify.breakpoint.smAndDown }">...</v-layout>
As you can see, I want to apply mb-4 class only if I am on small screens and smaller ones. But when I load this on desktop large screen and inspect element, this class is attached even though screen resolution does not match logic for applying this class. However, styling is back to expected when I resize browser window.
I've tried to manually dispatch 'resize' event in lifecycle hook:
mounted() {
window.dispatchEvent(new Event('resize'));
}
But it didn't help. Even if I wrap it in setTimeout, still no luck.
UPD: found a workaround, but still think it is not the best solution:
changed
:class="{ 'mb-4': $vuetify.breakpoint.smAndDown }"
to
:class="{ 'mb-4': isMounted && $vuetify.breakpoint.smAndDown }"
and in mounted lifecycle hook added: this.isMounted = true
UPDATE: while digging in Vuetify source code found out, that it checks window width with 200ms delay as window width check is costly operation. That is why we have delay.
you can give specific breakpoint for margin and padding attributes.
<v-layout row wrap align-center class="mb-sm-4">...</v-layout>
https://vuetifyjs.com/en/styles/spacing/#breakpoints
Related
I'm using one of Vuetify's material template for learning. Its navigation-drawer has an image on the background like so:
I've looked at the code and the navigation-drawer has a v-imgcomponent that gives it the image:
<template>
<v-navigation-drawer
id="app-drawer"
v-model="inputValue"
app
dark
floating
persistent
mobile-break-point="991"
width="260">
<v-img :src="image" height="100%">
However what I cannot understand is that the src property is binded to an image attribute which I was expecting to find in the data function but its not there. The only other reference image is being applied is in the computed properties like so:
computed: {
...mapState("app", ["image", "color"]),
How is the image being applied or where the actual source for the image is located?
This is the vuetify material dashboard example app. You will find the image in teh vuex store.
More specifically - src/store/modules/app/state.js
I would like to insert a text inside a v-progress-linear element (code sample below).
Is that possible ? And if yes, how can it be done ?
<v-progress-linear
background-color="pink lighten-3"
color="pink lighten-1"
value="15"
>
</v-progress-linear>
Support for text inside v-progress-linear is coming in 1.5.
<v-progress-linear value="50" height="20" background-color="pink lighten-3" color="pink lighten-1">
<div>text inside</div>
</v-progress-linear>
Here's a pen using the current beta for 1.5 https://codepen.io/anon/pen/YBNxdW
Edit: Sorry! Just noticed you specifically wanted this for the linear, not the circular. My notes below will handle the circular case. Perhaps ironically, after figuring this out for the circular I ran into the Vuetify Dialog Loader example which I went with for this project. It does a nice job of presenting text with a linear progress bar as a modal window. That said, leaving my original answer below in case anyone happens to want to add text to the circular version.
Original post: You can achieve this in a roundabout way with something like this. For context, we have the progress element defined at the app level and are toggling its display from child components when we make API calls. The gist of what's happening is there is an app level property for "showWait" which is either empty or contains the text "Please wait...". That property is used for both the v-show and the value of the progress element.
<v-progress-circular v-show="showWait" color="accent" size="70" width="7" value="showWait" indeterminate>
{{ showWait }}
</v-progress-circular>
Using a defined "showWait" data property:
var app = new Vue({
el: '#app',
data: {
showWait: ''
},
methods: {
ToggleWait() {
if (this.showWait == '')
this.showWait = 'Please wait...';
else
this.showWait = '';
}
}
});
I have a Vue component which generates a part of an SVG.
Since text handling in SVG is a pain, I decided to use a foreignObject tag inside it in order to let the HTML and CSS inside it handle the layout.
The template part basically looks like this:
<template>
<g class="port">
<foreignObject ref="html">
<div class="port__wrapper" ref="wrapper">
<div class="port__label">{{ label }}</div>
<div class="port__content">{{ content }}</div>
</div>
</foreignObject>
</g>
</template>
Everything works fine until I try to position the part, based on its computed size. The size of my foreignObject has to be set manually. In order to do that, I need the computed size of my port__wrapper element.
Here is my current approach:
export default {
methods: {
calculateAndSetSize() {
const frame = this.$refs.html;
const wrapper = this.$refs.wrapper;
frame.setAttribute('width', `${wrapper.clientWidth}px`);
frame.setAttribute('height', `${wrapper.clientHeight}px`);
}
},
created() {
window.setTimeout(() => {
this.calculateAndSetSize();
// also some positioning stuff
}, 0);
}
}
I use the created lifecycle hook to ensure the component is created and use the setTimeout to move the calculation to the end of the render queue.
This works fine when I just move around inside my app, but if I refresh the page it only works 5/6 of the time. The calculation seems to be done just before the final render.
An example from Safari (even though it happens in all browsers):
I captured this, while my system was super slow. This usually happens in a fraction of a second
Before the component is fully rendered, this part is visible:
The component takes up a little bit less than double the size of the end-result. The calculation and positioning have happened and everything is aligned as expected (right side and vertically centered to the cross in the middle).
Almost correct, but then there is the final paint, which looks like this:
As you can see the positioning is totally off, since the element is way smaller and the calculations already happened.
The foreignObject sill has the wrong size:
(the last screenshot is from another build and looks a little different, but the problem stays the same)
I figured the problem might be the font loading and tried the execute the calculations after the document.fonts.ready promise, but that is even less consistent than the setTimeout approach.
Any hint what could cause this and how to work around it would be greatly appreciated.
I'm having trouble understanding how data-binding works now.
On my index page I've got an object (obtained as JSON from a RESTful service), which works just fine when applied to a custom element like:
<main-menu class="tiles-container ofvertical flex layout horizontal start"
menuitems="{{menuitems}}">
</main-menu>
var maintemplate = document.querySelector('#fulltemplate');
maintemplate.menuitems = JSON.parse(data.GetDesktopResult);
This works as expected, and when I load my page with different users, main-menu changes as it should to show each user's desktop configuration. (This menuitems object reflects position and size of each desktop module for each user).
Now, users used to be able to change their configuration on the go, and on Polymer 0.5 I had no problem with that, just changed my maintemplate.menuitems object and that was that, it was reflected on the template instantly.
As I migrated to Polymer 1.0, I realized changes on an object wouldn't change anything visible, it's much more complicated than this, but just doing this doesn't work:
<paper-icon-button id="iconback" icon="favorite" onClick="testing()"></paper-icon-button>
function testing(){
debugger;
maintemplate = document.querySelector('#fulltemplate');
maintemplate.menuitems[0][0].ModuleSize = 'smamodule';
}
The object changes but nothing happens on the screen until I save it to DB and reload the page.
Am I missing something /Do I need to do something else on Polymer 1.0 to have elements update when I change an object passed as a property?
Before you ask, I've got those properties setted as notify: true, it was the inly thing I found different, but still doesn't work
Thanks for reading!
EDIT:
this is the code menuitems is used in:
<template is="dom-repeat" items="{{menuitems}}" as="poscol">
<div class="positioncolum horizontal layout wrap flex">
<template is="dom-repeat" items="{{poscol}}" as="mitem" index-as="j">
<main-menu-item class$="{{setitemclass(mitem)}}"
mitem="{{mitem}}"
index="{{mitem.TotalOrder}}"
on-click="itemclick"
id$="{{setitemid(index, j)}}">
</main-menu-item>
</template>
</div>
</template>
main-menu-item is just set of divs which changes size and color based on this object properties
You need to use the mutation helper functions if you want to modify elements inside an object or array otherwise dom-repeat won't be notified about the changes (check the docs):
function testing(){
debugger;
maintemplate = document.querySelector('#fulltemplate');
this.set('maintemplate.0.0.ModuleSize', 'smamodule');
}
I search how to deactivate the transition on compose data-bind,
because it not beautiful and little bug with my content html on chrome.
Because i have a scroll horizontal print on end on my transition and disaspear after move my mouse.
The content is in iFrame.
Thanks
You can disable transitions for compose by removing the "transition" option from the binding declaration.
Instead of:
<div data-bind="router: { cacheViews: false, transition: 'entrance' }"></div>
use:
<div data-bind="router: { cacheViews: false }"></div>
This example is for Durandal 2.0, although earlier versions work the same way.
There's more info in the docs here in the "Additional Settings" section.
(The transition framework is pluggable, so you can also write your own, using the default "entrance" transition as an example.)
Also need to remove the second parameter in setRoot call:
// Was
app.setRoot('viewmodels/shell', 'entrance');
// Done
app.setRoot('viewmodels/shell');