I want to replace the navigation drawer with an image I have (./src/assets/image.jpg)
<v-navigation-drawer
mini-variant
dark
app
permanent
class="withBackground"
>
...
<style scoped>
.withBackground {
background: rgba(-1, 0, 0, 0);
background-image: // what here?;
}
</style>
I have no idea what to set to background-image. Should I load the image via import and attach it to a data field and then place it there?
You should use the src attribute.
You could do:
<v-navigation-drawer
mini-variant
dark
app
permanent
src="./src/assets/image.jpg"
>
Or if the image source is a variable something like this:
<template>
<v-navigation-drawer
mini-variant
dark
app
permanent
:src="imageSrc"
/>
</template>
<script>
export default {
data() {
return {
imageSrc: null
};
},
mounted() {
this.imageSrc = require('./src/assets/image.jpg')
},
};
</script>
For more info:
https://next.vuetifyjs.com/en/components/navigation-drawers/#navigation-drawer
Related
I need a treeview in svelte that has checkboxes with each node.
I am unable to get functionality that if we check a parent node then all of its (only its) children whether they are file of folders, all of them (child) get checked automatically and any of them is unchecked later then the parent should also get unchecked. How can I achieve this?
Below is the code that I followed from here. I tried few things but no luck.
App.svelte-
<script>
import Folder from './Folder.svelte';
let root = [
{
name: 'Important work stuff',
files: [
{ name: 'quarterly-results.xlsx' }
]
},
{
name: 'Animal GIFs',
files: [
{
name: 'Dogs',
files: [
{ name: 'treadmill.gif' },
{ name: 'rope-jumping.gif' }
]
},
{
name: 'Goats',
files: [
{ name: 'parkour.gif' },
{ name: 'rampage.gif' }
]
},
{ name: 'cat-roomba.gif' },
{ name: 'duck-shuffle.gif' },
{ name: 'monkey-on-a-pig.gif' }
]
},
{ name: 'TODO.md' }
];
</script>
<Folder name="Home" files={root} expanded/>
File.svelte-
<script>
export let name;
$: type = name.slice(name.lastIndexOf('.') + 1);
</script>
<span style="background-image: url(tutorial/icons/{type}.svg)">{name}</span>
<style>
span {
padding: 0 0 0 1.5em;
background: 0 0.1em no-repeat;
background-size: 1em 1em;
}
</style>
Folder.svelte-
<script>
import File from './File.svelte';
export let expanded = false;
export let name;
export let files;
let checkedState = true;
function toggle() {
expanded = !expanded;
}
function onCheckboxChanged(e){
console.log("out: "+document.getElementById("cb1").checked)
}
</script>
<input type="checkbox" on:change={onCheckboxChanged} id="cb1" bind:checked={checkedState}><span class:expanded on:click={toggle}>{name}</span>
{#if expanded}
<ul>
{#each files as file}
<li>
{#if file.files}
<svelte:self {...file}/>
{:else}
<input type="checkbox" on:change={onCheckboxChanged} id="cb1" bind:checked={checkedState}><File {...file}/>
{/if}
</li>
{/each}
</ul>
{/if}
<style>
span {
padding: 0 0 0 1.5em;
background: url(tutorial/icons/folder.svg) 0 0.1em no-repeat;
background-size: 1em 1em;
font-weight: bold;
cursor: pointer;
}
.expanded {
background-image: url(tutorial/icons/folder-open.svg);
}
ul {
padding: 0.2em 0 0 0.5em;
margin: 0 0 0 0.5em;
list-style: none;
border-left: 1px solid #eee;
}
li {
padding: 0.2em 0;
}
</style>
Remove binding in checkbox next to File component. This will prevent from case when you click File's checkbox and whole folder get checked. Instead you need just to pass state to child File components when Folder gets checked. So change code like this:
<!-- <input type="checkbox" bind:checked={checkedState}> -->
<input type="checkbox" checked={checkedState}>
Then you need to pass Folder's checked state to all child Folder components (so when you check folder, folders inside would be checked too). You can do it by making checkedState a prop, not just regular variable, then just pass this prop when calling svelte:self component
<script>
// let checkedState = true;
export let checkedState = true;
</script>
<!-- <svelte:self {...file}/> -->
<svelte:self {...file} {checkedState} />
After that only one problem case left. When all child components are (un)checked parent should be (un)checked too. I can't really see possibility to implement this thing with current structure. I would recommend you to move checkbox inside File component and then create field checked or selected in file object (in App.svelte) so you could easily manage all states in any child component. It also would be easier to read this values when extracting data from root Folder component (e.g. if you will need to send this data to server). After adding prop you of course should work with object properties, not component's state. Good luck with it!
P.S: Don't use static ids in your components and even more so in each loops. This will make your output html invalid.
I came across with this question, when I tried to build the same TreeView component you're trying to build.
And I'm implemented the dynamic feature you want with compnent event.
Here is the demo, which also use svelte:self and inspired by this REPL
The main points in this approach are:
The child component do not have the responsibility to compute the tree's state, it only have to represent it.
Let the parent component do the entire tree state computation, when the children node's state have changed.
I am trying to implement accessibility option on my page that would change CSS to different file when accessibility button would be clicked.
For now, all my templates extends base_generic.html, where style.css is loaded. When accessibility button would be clicked, I wish for it to change to use style_access.css for that user. How can I accomplish that?
I think a way could be, to refer in the HTML template to both CSS files, and use an onclick function with javascript, and jquery to change the id or class of the specific elements of the template.
So for example,
let's say I wanted onclick to change the CSS of an element, I could make a counter and toggle between two ids that I will have referenced in my CSS file or files.
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<button>This is a div</button>
<h1 class="potatoe" id="hello">HELLO THIS IS TEXT</h1>
<style>
#hello { color: red; }
#bye { color: blue; }
</style>
<script>
var clickCount = 0;
$("button").on("click", function() {
clickCount++;
$(".potatoe").attr("id", clickCount % 2 === 0 ? "bye" : "hello");
});
</script>
</body>
As you'll see everytime you click the button the CSS of the element will change
This is not exactly changing between CSS files but it ultimately changes the CSS of the elements you want to select.
You can implement by using JavaScript more easily:
const toggleButton = document.getElementById('button');
const workContainer = document.getElementById('work');
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('blue');
toggleButton.classList.toggle('active');
workContainer.classList.toggle('blue');
if(document.body.classList.contains('blue')){
localStorage.setItem('blue', 'enabled');
}else{
localStorage.setItem('blue', 'disabled');
}
});
if(localStorage.getItem('blue') == 'enabled'){
document.body.classList.toggle('blue');
toggleButton.classList.toggle('active');
workContainer.classList.toggle('blue');
}
I am trying to set PDF file paths dynamically to embed tag using this.renderer.setAttribute(this.pdf.nativeElement, "src", ...
At first I can set embed src PDF path and it displays on screen but second time I set for another path it doent work as expected.
Can anyone help?
Live demo link is:
https://stackblitz.com/edit/angular-kghaku
You will need to first remove the src attribute and then apply the new one. Also, need to wrap the setAttribute in a setTimeout, since it needs to execute after removeAttribute
StackBlitz Demo
setpdf1() {
this.renderer.removeAttribute(this.pdf.nativeElement, "src");
setTimeout(() => {
this.renderer.setAttribute(this.pdf.nativeElement, "src", "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf")
})
}
setpdf2() {
this.renderer.removeAttribute(this.pdf.nativeElement, "src");
setTimeout(() => {
this.renderer.setAttribute(this.pdf.nativeElement, "src", "https://file-examples.com/wp-content/uploads/2017/10/file-sample_150kB.pdf")
})
}
Try binding:
<embed #pdf src="{{ selectedSRC }}">
In component:
selectedSRC: string;
setpdf1(){
this.selectedSRC = "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf";
}
setpdf2(){
this.selectedSRC = "https://file-examples.com/wp-content/uploads/2017/10/file-sample_150kB.pdf";
}
I'm newbie to web, and sorry for not good English.
But I have question.
I want to change Polymer's app-header element background image using databinding.
I want to show different header image whenever router's page changed.
But this code is not working.
I don't know how to pick and manipulate css of background-image.
<style>
...
--app-header-background-front-layer: {
/*This line is working*/
/*background-image: url(/images/tmp/header_image_1.png);*/
/*This line is NOT working*/
background-image: url([[headerImageUrl]]);
background-position: left center;
};
...
</style>
<script>
...
properties: {
...
headerImageUrl: {
type: String,
value: "/images/tmp/header_image_1.png"
}
...
},
...
<script>
I got my solution.
Niklas Lang gave me a hint.
Here is my code.
<style>
...
:host {
...
/*this custom css property could be changed whenever I want */
--header-image: url(/images/tmp/header_image_1.png);
...
}
...
--app-header-background-front-layer: {
background-image: var(--header-image);
background-position: left center;
};
...
</style>
<script>
...
// this function called when router's page value is changed.
setHeader: function () {
switch (this.page) {
case blabla1:
this.customStyle['--header-image'] = 'url(/images/tmp/header_image_1.png)';
this.updateStyles();
break;
case blabla2:
this.customStyle['--header-image'] = 'url(/images/tmp/header_image_2.png)';
this.updateStyles();
break;
case blabla3:
this.customStyle['--header-image'] = 'url(/images/tmp/header_image_2.png)';
this.updateStyles();
default :
break;
}
},
...
<script>
I think you are missing the actual Element in your style.
When you make use of Polymer mixin you should apply it to the corresponding Element, in your case the app-header.
app-header {
--app-header-background-front-layer: {
background-image: url();
};
}
However, i am not sure if it is even possible to bind to your style.
What you could try is to bind to Inline style.
In the Polymer documentation they call it Bind to a target attribute
<div style$="color: {{myColor}};">
But in your case I am not entirely sure how this is supposed to work as you are applying mixin and not just a single style value.
I want to add a background image on Facebook's react.js my-app. I can do this by setting a background image to a div element. But my div only covers half of the page. Which is why my image is not fulling occupying the page.
Instead, I want to do this on a body element. But how to add a body element and set a background image to it?
I tried this, but its not working in App.js file of my-app
<body background="http://i.imgur.com/DaNQJ6I.jpg"></body>
[EDITED]
Css-tricks.com provides a quite cool solution of the full page images:
https://css-tricks.com/perfect-full-page-background-image/
I used this example for my React implementation with the useEffect (https://reactjs.org/docs/hooks-effect.html).
Note: background-size replaced by backgroundSize when the style is setted.
import React, { useEffect } from "react";
import img from "./test.jpg";
export default function App() {
useEffect(() => {
document.body.style.background = `url('${img}') no-repeat center center fixed`;
document.body.style.backgroundSize = "cover";
document.body.style.webkitBackgroundSize = "cover";
}, []);
return <div className="App"></div>;
}
Try using style:
<body style={ bodyStyle }></body>
And bodyStyle should look like:
var bodyStyle = { backgroundImage: 'url(http://i.imgur.com/DaNQJ6I.jpg)' };
For some reason, I cannot add a background image on app.js or app.css files of react framework. However, I tried to do it on index.html. This worked perfectly to me.
So, please add background images on index.html If you are unable to do it in app.js or app.css.
And also, future readers, If you have found a way to do it, feel free to answer the question, thanks!!
This works for me. The actual work is done in componentDidMount(). So technically, you could add this on about any component. Like, you could put it on a navbar or even in the layout.
For my projects, I created a component. Add it to your layout (or where ever) and it should work.
Good luck!
export default class BodyStyle extends Component {
componentDidMount() {
const { style } = this.props;
var body = document.getElementsByTagName( "body" )[ 0 ];
for ( var key in style ) {
body.style[ key ] = style[ key ];
}
}
render() {
return <span ref="BodyStyle"/>;
}
};