Hey whats the right way to add a transition to iron-pages? At the moment i just create a custom-element, a "clone" of iron-pages and add the iron-selectable behavior. I use css transitions on the element then:
<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="bower_components/iron-selector/iron-selectable.html">
<dom-module id="envo-pages">
<template>
<style>
:host {
display: block;
position: relative;
overflow: hidden;
}
:host > ::slotted(*) {
background: #f1f1f1;
position: absolute;
top:0;
left:0;
width: inherit;
height: inherit;
transform: translateY(-100%);
transition: all .5s ease-in-out;
}
:host > ::slotted(.iron-selected) {
transform: translateY(0);
}
</style>
<slot></slot>
</template>
<script>
/**
* `envo-pages`
*
*
* #customElement
* #polymer
* #demo demo/index.html
*/
class EnvoPages extends Polymer.mixinBehaviors([Polymer.IronSelectableBehavior], Polymer.Element) {
static get is() { return 'envo-pages'; }
constructor(){
super()
}
connectedCallback() {
super.connectedCallback()
}
}
window.customElements.define(EnvoPages.is, EnvoPages);
</script>
</dom-module>
It is working but it feels really bad. What is the common way to add a transitions to iron-pages ?
Related
I am trying to create a script in vueJS, to enable the navbar only when the pages are not login/register.
For this I am trying to use this.$route.name but I only get undefined in the console when I am console logging it. I have created a method to check for the route name and i am calling it when the components are mounted i.e using mounted fucntion.
app.vue code:
<template>
<div id="app">
<NavBar v-if="flag" />
<main>
<router-view/>
</main>
</div>
</template>
<script>
import NavBar from './components/NavBar.vue';
export default {
components: { NavBar },
data(){
return{
flag1 : false,
flag2 : false,
flag: false
}
},
mounted() {
let id = localStorage.id;
this.getrouteflags();
return {
id
}
},
methods : {
getrouteflags: function(){
console.log(this.$route.query.name)
if(this.$route.name == 'register'){
this.flag1 = true;
}
if(this.$route.name == 'login'){
this.flag2 = true;
}
this.flag = this.flag1 || this.flag2;
console.log(this.flag1,this.flag2)
}
}
}
</script>
<style>
nav{
}
#app{
width: 100%;
height: 100%;
}
html,
body {
height: 100%;
min-height: 75rem;
}
body {
justify-content: center;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
background-image: '../../backend/static/plot.png';
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
body,html{
padding: 0;
margin: 0;
min-height: 100vh;
width: 100%;
}
html{
background-color: white;
}
</style>
This is what I am getting in the console.
Can someone help me in resolving this issue?
I'm guessing you're using Vue2.
Have you tried adding a computed property:
computed: {
currentRouteName() {
return this.$route.name;
}
}
In case you're using Vue3 with a script setup you could use VueRouter's composable.
<script setup>
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
// Do stuff.
</script>
If you need more help, read VueRouter's guide.
v3 reference
v4 reference
How can i change the body{overflow:hidden} when my modal it will be open?
for example it will be my modal, when its open, i would like to apply this style body{overflow:hidden}
<div v-if="dialogFoundation">
i am using vuejs3, i am using setup(){...}
The best performance would be to use javascript plain. You can add Eventlistener top the modal trigger Element. In my example i use a button. If it triggered then you can use classList and assign the body a class. In my example .dark.
Vue version
<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
<div id="app">
<h1>{{message}}</h1>
<p></p>
<button #click="doSomething">Modal</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Welcome to Vue!'
};
},
methods: {
doSomething() {
const b = document.querySelector('body');
b.classList.toggle('dark');
}
}
};
</script>
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
a,
button {
color: #4fc08d;
}
button {
background: none;
border: solid 1px;
border-radius: 2em;
font: inherit;
padding: 0.75em 2em;
}
.dark {
background: black;
opacity: 0.4;
}
</style>
Vanilla JS
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
const b = document.querySelector('body');
b.classList.toggle('dark');
})
.dark {
background: black;
opacity: 0.4;
}
<body>
<div></div>
<button>click</button>
</body>
You can use watchers in Vue.js for solving this problem.
When variables changes you can check whether it is true or not, and if true change overflow of body to hidden.
{
watch: {
dialogFoundation(dialogFoundation) {
document.body.style.overflow = dialogFoundation ? "hidden" : "auto"
}
}
}
But I think this is not good solution. You can set this styles to your app element
#app {
width: 100%;
height: 100%;
overflow: auto;
}
and you can change style of app element using Vue directives.
<template>
<div id="app" :class="{ hidden: dialogFoundation }">
Long text....
</div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const dialogFoundation = ref(true);
return { dialogFoundation };
},
};
</script>
<style>
html,
body,
#app {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#app {
overflow: auto;
}
#app.hidden {
overflow: hidden;
}
</style>
Code in codesandbox - https://codesandbox.io/s/immutable-glitter-rwc2iy?file=/src/App.vue
I've created the following Vue component:
var loading = new Vue({
el: "#loading_id",
components:{
'loading' : {
template : `
<div>
<div id="screenLoading" class="background">
<div class="loading">
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
<div class="obj"></div>
</div>
</div>
</div>
`,
methods: {
startLoading: function() {
const load = document.getElementById("screenLoading");
load.classList.add('show')
},
stopLoading: function(){
const load = document.getElementById("screenLoading");
load.classList.remove('show')
}
}
}
}
});
loading.$children[0].startLoading()
setTimeout(() => {
loading.$children[0].stopLoading()
}, 3500);
.background {
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0,.5);
position: fixed;
top: 0px;
left: 0px;
z-index: 2000;
display: none;
justify-content: center;
align-items: center;
}
.background.show {
display: flex;
}
.loading{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 40px;
display: flex;
align-items: center;
}
.obj{
width: 12px;
height: 70px;
background: white;
margin: 0 3px;
border-radius: 10px;
animation: loading 0.8s infinite;
}
.obj:nth-child(2){
animation-delay: 0.1s;
}
.obj:nth-child(3){
animation-delay: 0.2s;
}
.obj:nth-child(4){
animation-delay: 0.3s;
}
.obj:nth-child(5){
animation-delay: 0.4s;
}
.obj:nth-child(6){
animation-delay: 0.5s;
}
.obj:nth-child(7){
animation-delay: 0.6s;
}
.obj:nth-child(8){
animation-delay: 0.7s;
}
#keyframes loading{
0%{
height: 0;
}
50%{
height: 70px;
}
100%{
height: 0;
}
}
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<loading id="loading_id"></loading>
It works perfectly fine, its purpose is to be a loading screen for me to use when I have to make something wait on my webpage. However, instead of loading the CSS from an external CSS file with the <style> tag on the main HTML, I'd like to load my CSS directly from inside Vue, just like I did with the HTML on the template variable. Basically, it'd be something like the following:
var loading = new Vue({
el: "#loading_id",
components:{
'loading' : {
template : `myHTML template`,
cssTemplate: `myCSS template`,
methods: {
// my methods
}
}
}
});
Is it possible to do on Vue? Can I write CSS templates inside a Vue component?
I know I also can load small pieces of CSS styles with Vue as described here, but in my case, I'd like to keep the classes and ids declaration as they are in a normal CSS file...
You can include css in your vue component in the style tag section as below:
<style scoped src="#/assets/styles/myCSSTemplate.css">
</style>
Also try to use proper structure when creating a vue component by having template, script and style sections.
For exmaple you can create Vue instane in App.vue and then have a component as YourComponent.vue
Refer to Vue documentation here.
I am quite new to nuxt, and I need help here.
async asyncData({ params, route }) {
const { data } = await axios.get(
`${process.env.baseUrl}/homes/?search=${
params.search
}&home_status=${1}`
)
return {
homes: data.results,
}
}
I am trying to populate my component with data(using asyncData), but I want my skeleton loader to show if my page is loading. How do I do that in nuxt?
Here is the code for my skeleton loader;
<template>
<div class="placeholder-container">
<div class="placeholder wave">
<div class="square"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
</template>
<style scoped>
.placeholder-container {
width: 35rem;
margin: 15px auto 15px auto;
}
.placeholder {
padding: 10px;
width: 100%;
// border: 1px solid lightgrey;
display: flex;
flex-direction: column;
}
.placeholder div {
background: #e8e8e8;
}
.placeholder .square {
width: 100%;
height: 22rem;
border-radius: 1rem;
margin: 0 0 10px;
}
.placeholder .line {
height: 12px;
margin: 0 0 10px 0;
}
.placeholder .line:nth-child(2) {
width: 120px;
}
.placeholder .line:nth-child(3) {
width: 180px;
}
.placeholder .line:nth-child(4) {
width: 150px;
}
.placeholder.wave div {
animation: wave 1s infinite linear forwards;
-webkit-animation: wave 1s infinite linear forwards;
background: #f6f7f8;
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background-size: 800px 104px;
}
#keyframes wave {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
#-webkit-keyframes wave {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
</style>
What I normally do without using nuxt, is to create a data variable(loading=true), and change it to false after I finish making the api call, but since asyncData runs in the server, how do I make that work? I will also appreciate it if there is a better way of doing something like this
Placeholder
To display a placeholder component on a particular page
during loading, switch from asyncData to the fetch hook, which exposes the $fetchState.pending flag that is set to true when complete:
<template>
<div>
<MyLoading v-if="$fetchState.pending" />
<MyContent v-else :posts="posts" />
</div>
</template>
<script>
export default {
data() {
return {
posts: []
}
},
async fetch() {
const { data } = await this.$axios.get(...)
this.posts = data
}
}
</script>
Customizing loading progress bar
Nuxt provides a default loading progress bar that appears at the top of the app while a page is loading. You could customize the progress bar's appearance:
// nuxt.config.js
export default {
loading: {
color: 'blue',
height: '5px'
}
}
Or you could specify your own custom loading component instead:
// nuxt.config.js
export default {
loading: '~/components/MyLoading.vue'
}
demo
I want to display the Nuxt Loading component only on the top page, but it will be displayed on all pages. Can't I display it only when I access a specific page?
Also, the page will be output momentarily before the loading screen starts. Do you know what caused it?
nuxt.config.js
export default {
..
loading: '#/components/Organisms/PageLoading.vue',
..
}
layouts/default.vue
<template>
<div>
<org-page-loading />
</div>
</template>
<script>
import PageLoading from "../components/Organisms/PageLoading";
export default {
name: "Default",
components: {
"org-page-loading": PageLoading,
},
mounted() {
this.$nextTick(() => {
this.$nuxt.$loading.start()
setTimeout(function () {
this.$nuxt.$loading.finish()
}, 2400)
})
},
}
</script>
You can do something like this:
// your-component.vue
<template>
<h1>My Custom page</h1>
</template>
<script>
export default {
loading: false
}
</script>
So firstly the $nextTick probably makes your page show before loading.
Secondly I have never used this kind of loading component, but if you make your own loading component, you can pass a prop to it dynamically, which tells it on which page you want it to be and if the url is not matching, or the component name is not matching it will not show
<your-custom-loading :page="routerLinkYouWantItToBeShownOn" />
EDIT:
I found a better solution:
Heres the spinner/loading component
<template>
<div class="spinner"></div>
</template>
<style lang="css">
.spinner {
position: absolute;
height: 60px;
width: 60px;
border: 3px solid transparent;
border-top-color: var(--v-success-base);
top: 50%;
left: 50%;
margin: -30px;
border-radius: 50%;
animation: spin 2s linear infinite;
z-index: 100;
&:before,
&:after {
content: '';
position: absolute;
border: 3px solid transparent;
border-radius: 50%;
}
&:before {
border-top-color: var(--v-error-base);
top: -12px;
left: -12px;
right: -12px;
bottom: -12px;
animation: spin 3s linear infinite;
}
&:after {
border-top-color: var(--v-accent-lighten1);
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
animation: spin 4s linear infinite;
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
And here is how u call it:
<template>
<div>
<loading> v-if="isLoading" />
<div v-else>Your other content</div>
</div>
</template>
<script>
import Loading from '#/components/Loading';
export default {
components: {
Loading
},
computed: {
isLoading(){
return "your condition for loading"
}
},
</script>
And you can use a data variable for isloading set to true by default and when u visit the page it will be loading by default
dont even need props