I'm trying to prevent the vuetify v-navigation-drawer to overlap with the pages content.
How can I center the v-main content in a responsive way ?
https://codesandbox.io/s/nuxt-vuetify-sidenav-u0xte?file=/layouts/default.vue
This is documented behavior. https://vuetifyjs.com/en/components/navigation-drawers/#caveats
The expand-on-hover prop does not alter the content area of v-main. To have content area respond to expand-on-hover, bind mini-variant.sync to a data prop.
so all you need to do is create a data variable and bind it to the mini-variant.sync
<template>
<v-navigation-drawer app absolute mini-variant expand-on-hover left :mini-variant.sync="mini">
</v-navigation-drawer>
</template>
<script>
export default {
name: "SideNav",
data() {
return {
mini: true
}
};
</script>
I guess what you are looking for is the app property of the navigation component.
Juste remove it, and you will have the expected result
<v-navigation-drawer
permanent
mini-variant
expand-on-hover
left
>
And btw, why did you bind value to true ? There is no reason to do this :p You can remove it
EDIT :
Sorry, i forgot that in my case, i have a parent container that enclose v-navigation-drawer and v-main
<v-container
fluid
class="d-flex flex-row align-start pa-0 align-stretch"
>
<v-navigation-drawer
permanent
mini-variant
expand-on-hover
left
>
</v-navigation-drawer>
<v-main></v-main>
</v-container>
Related
I would like to find out how you can hide and show div element in react typescript. This is the code that I have so far. Any feedbacks
function GetUserInfo (user:User)
{
let userInfo = USERINFO.find((d) => d.Address === user.Address);
if(userInfo)
{
//Show Div
showDiv
}
return userInfo.data
}
function showDiv(props) {
return <div id="missingPO">Unable at identify user info.</div>
}
The code you have written is a bit unclear about how you wanna hide it,
But for example, you want to hide an element in case a variable is true, in your case can be something with an address or what you are trying to do.
for example, I want to hide a value when const isHidden=true
I will discuss two ways.
You can declare a class that hides the div, for example in your global class add a CSS class
.hidden{
display: none;
}
then in your div, you can check if isHidden enables class.
<div className={isHidden && 'hidden'} />
you can check like this
//in your method return div in case you are not hidden, pass the isHidden as props.
function showDiv(props) {
return props.isHidden ?<></>: <div id="missingPO">Unable at identify user info</div>
}
// or just check with &&
!isHidden && <div> will show only if is hidden false</div>
// the pros of using the second one are because you are unmounting div, but this can be a downside too, depends what you need
// with display it will remove from the page, but now from the dom, also you can make visibility: hidden if you do not want to remove it from the page just to hide.
If you have any question please ask 😄
In my Gatsby app I have a page that includes a pagination component.
By default, the path is: '/?page=1' and clicking the pagination buttons changes to '/?page=2', '/?page=3' ...
I am "saving" the page number in the path because I want the browser to remember the page number the user was on previously, in case he clicks the go back button of the browser.
The problem with this approach is that every time the path is changed, the page automatically is scrolling to the top, and I do not want it to scroll to the top.
Does anyone know the way to prevent that?
This is the default Gatsby behavior (known as Scroll Restoration). You have exposed the useScrollRestoration hook in order to play with this behavior (and change it accordingly to your specifications). For example:
import { useScrollRestoration } from "gatsby"
import countryList from "../utils/country-list"
export default function PageComponent() {
const ulScrollRestoration = useScrollRestoration(`page-component-ul-list`)
return (
<ul style={{ height: 200, overflow: `auto` }} {...ulScrollRestoration}>
{countryList.map(country => (
<li>{country}</li>
))}
</ul>
)
}
In your case, you should add your element class name.
Related GitHub threads:
https://github.com/gatsbyjs/gatsby/issues/27349
https://github.com/gatsbyjs/gatsby/issues/19480
I have two images. When I click the image container, a state is changed, and another image is revealed, while the other one disappears - like this:
const Image= ({image1, image2}) => {
const [image, setImageState] = useState(true);
return (
<div className="image-container" onClick={ () => setImageState(!image)}>
<img src={image ? "/images/" + image1 : "/images/" + image2} alt="" />
</div>
)
}
So this works as intended. When I click, the state changes, and so does the image. However, I would like there to be a fade in/out effect when the state changes. How is this achieved ?
I'm not sure if it's possible to animate via CSS the src attribute of an image element (I personally prefer to do it via CSS if possible). However you can animate its opacity property. And you'll need two elements for that - one for the fade-out effect and one for the fade-in. Here's a sandbox. The situation is very similar to this question, there you can see how to put images on top of each other (the one hidden).
Some things to note:
I've pre-set the two images' src attributes and don't set them to
nulls or some falsy values so that we don't see broken image icon while animating (could
occur if you have your state separated among multiple useState
hooks). In my case I batch changes at once to have only a single render and avoid any flashes of broken image icon.
Browser will do the animation upon class change and of course if the
property in this class can be animated. opacity is a CSS property which can be
animated.
For your case you'll probably need to set the src dynamically in your
handler so I'd recommend you make sure you don't cause multiple
renders/paints to avoid visual inconsistencies, so I think you should batch your state updates at once.
In my case the images are next to each other, but if you want to first fade-out the first image and then fade-in the second, you'll need to synchronize animation with transition-delay property.
You could some Animation library like GSAP and accomplish this, as this is difficult to accomplish by css alone.
https://codepen.io/rohinikumar4073/pen/mdVYbrm?editors=1111
function toggleImage() {
let tween = TweenLite.to(".img", 2, {
opacity: 0,
onComplete: function() {
let image = document.querySelector(".img")
if (image.src === "https://via.placeholder.com/350") {
image.src = "https://via.placeholder.com/150";
} else {
image.src = "https://via.placeholder.com/350";
}
let tween2 = TweenLite.to(".img", 2, {
opacity: 2
});
}
});
}
<script src=https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js"></script>
<div onclick="toggleImage()">
<img class="img" id="img1" src="https://via.placeholder.com/150" />
</div>
I'm new to LWC in salesforce and want to hide/show the button based status. I write below code but it is hiding for all statuses. Can you please help me if am wrong.
<template for:each={savedCampaignList} for:item="savedCampaignListvar">
<a name={savedCampaignListvar.Id} >View</a>
|
<a hidden =!IF(savedCampaignListvar.Status === 'Saved')" name={savedCampaignListvar.Id} >Delete</a>
</template>
Expressions are different in LWC than in aura and visualforce
You need to have a getter defined in your controller the template uses for expressions or have a tracked variable you update.
See this for migrating to lwc
You'll end up making a getter like this
get hideLink() {
return this.savedCampaignListvar.Status === 'Saved';
}
and then in your lwc markup you should have this
<template if:false={hideLink}>
<a name={savedCampaignListvar.Id}>Delete</a>
</template>
Note: the hidden attribute is not a boolean attribute. If the attribute exists regardless of setting it to true/false hides the element. See here
Use this code in your HTML template - remember don't put any attribute in your root 'template' element use another div as a holder for for:each directive. You must use a key directive to assign a unique ID to each item. When a list changes, the framework uses the key to rerender only the item that changed. The key in the template is used for performance optimization and isn’t reflected in the DOM at run time.
<template>
<div for:each={savedCampaignList} for:item="savedCampaignListvar" key={savedCampaignListvar.Id}>
<a name={savedCampaignListvar.Id} >View</a>
|
<a if:true={savedCampaignListvar.shouldShow} name={savedCampaignListvar.Id} >Delete</a>
</div>
</template>
We can use connectedCallback function - it's build in LWC function called when the element is inserted into a document. There we can put some condition and add 'shouldShow'(you can call if whatever you want of course;)) attribute to our Objects inside the array. Based on this attribute we will show delete button or not. Your JS should looks like:
import { LightningElement, track } from 'lwc';
export default class App extends LightningElement {
#track savedCampaignList = [
{Id: "1", status: 'Saved'},
{Id: "2", status: 'Not Saved'}
]
connectedCallback() {
this.savedCampaignList.forEach((el)=> {
el.shouldShow = el.status === 'Saved';
})
}
}
You can use if:true or if:hide.
Go through this https://salesforcelightningweb.com/#conditionally-render-html-in-lightning-web-component
I'm having a page with 2 scrollable views next to each other:
<ion-content>
<ion-scroll></ion-scroll>
<ion-scroll></ion-scroll>
</ion-content>
I want to programmatically scroll the first one, but it seems the scrollTo is only a method on ion-content (which I ofcourse can not scroll, I need to have the second one independant)
Is there any way to solve this?
update: added a plnkr to show what I need
If I am not mistaken you are trying to Scroll the Left Scroller and I see you have a view selector called leftCats.
So if you just change one line you will be able to scroll. Here is my code below:
NOTE: This is just plain javascript. It jumps to the scroll position. You can apply animation if you like later.
import {Component, ViewChild} from '#angular/core';
#Component({
templateUrl:"home.html"
})
export class HomePage implements AfterViewChecked {
#ViewChild('content') content;
#ViewChild('leftCats') leftItems;
constructor() {
}
scroll() {
//I want to scroll the left pane here
console.log('scroll');
this.leftItems.scrollElement.scrollTop += 50; // Change This Line
}
}
I have also forked it here: DEMO
Hope it helps.