I'm trying to dynamically add and remove a class to different spinner items. I'm setting the class of my spinner component like so in a method :
_handleDelete(event) {
this.shadowRoot.querySelectorAll('spinner-component')[event.model.index].classList.add('spinner');
//....lines of code...
}
Here is the template :
static get template() {
return `
<style>
spinner-component {
display: none;
}
.spinner {
display: initial;
z-index: 9;
}
</style>
<spinner-component></spinner-component>
<spinner-component></spinner-component>
<spinner-component></spinner-component>
${super.template}
`;
}
Then in debug, this is what I get after the classList.add line :
$0.shadowRoot.querySelectorAll('iris-spinner')[0].classList
DOMTokenList ["spinner", value: " spinner"]
0: "spinner"
length: 1
value: "
spinner"__proto__: DOMTokenList
The problem is that the .spinner class is not applied to my spinner-component element. Moreover, it is still shown in the DOM as :
<spinner-component></spinner-component> instead of <spinner-component class='spinner'></spinner-component>
I found a workaround by using this.shadowRoot.querySelectorAll('spinner-component')[event.model.index].className += ' spinner'; but I'd like to know why this happens.
Thanks in advance !
Related
Inside a class derived from polymerElement, I have this code
class SelectorTest extends PolymerElement {
static get template() {
return html`
<style>
:host > * {
display: block;
margin-top: 5px;
}
</style>
`
}
Looks like the "greater than" symbol in :host > " clashes with the "< style >", and the final result is that the css is visible in the rendered page
screenshot of the rendered page
If I remove the critical CSS selector, everything works fine.
So I assume that I need to somehow escape the ">".
The question is : how do I escape it ?
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 am trying to style a data-placeholder in SCSS.
I want to change the color of data-placeholder from the existing color to dark-grey but my attempts have not been successful, what am I missing? Code below
HTML5
<optic-select-input id="placeholder" class="dataplaceholder" data-placeholder="Choose or type subject..." title="Type your subject" ng-model="newMessage.Subject" data-maxlength="50" spellcheck="true">
SCSS
.dataplaceholder{
#include placeholder(#A9A9A9,"");
}
#mixin placeholder($color, $size:"") {
&:-data-placeholder{
color:$color !important;
#if $size != "" {
font-size: $size;
}
}
}
Add a square brackets like [data-placeholder].
#mixin placeholder($color, $size:"") {
&[data-placeholder] {
color:$color !important;
#if $size != "" {
font-size: $size;
}
}
}
.dataplaceholder{
#include placeholder(#A9A9A9,"");
}
Not related to this specific example in the question
But to anyone that came across this question. If you are doing this, you likely are overriding a component someone else made and cannot modify directly.
You can wrap the component, then target the HTML element that has the data placeholder.
In a React project that I recently worked on, I wrapped the outer component with something like
<div className={styles.featureContent}>
Then in the SCSS file for my component that used something from a shared component library for form inputs
.featureContent {
// padding
.subheadline,
.description {
// margins
div[data-placeholder] {
// you can begin to target this with specificity
&::before {
// this is what i was targeting for my task.
// Making the placeholder italic.
font-style: italic;
}
}
}
i have several divs and if a div is clicked, i want to hightlight the div by changing the background-color of the div as well as the text in the div(i.e. make it active). I have done this before using JQuery by defining a class in my css and dynamically removing and adding the class. How can this be accomplished in Angular2. From researching and i shouldn't be manipulating the DOM as this is a no no in angular2. I have looked online for several examples but no success. Please
One way is to make an attribute directive. Fortunately for you, Angular has a guide for doing almost exactly what you are looking for but with hover events. To respond to clicks instead, for the 'Respond to user action' section...
... replace this:
#HostListener('mouseenter') onMouseEnter() {
/* . . . */
}
#HostListener('mouseleave') onMouseLeave() {
/* . . . */
}
with this:
#HostListener('click') onMouseClick() {
/* . . . */
}
To acheive a result where clicking a div that is already highlighted will unhighlight it, the full directive code would be:
import { Directive, ElementRef, HostListener, Input } from '#angular/core';
#Directive({
selector: '[myHighlight]'
})
export class HighlightDirective {
private _defaultColor = 'red';
private el: HTMLElement;
private highlighted: boolean = false;
constructor(el: ElementRef) { this.el = el.nativeElement; }
#Input('myHighlight') highlightColor: string;
#HostListener('click') onMouseClick() {
this.highlighted ? this.highlight('') : this.highlight(this.highlightColor || this._defaultColor);
}
private highlight(color: string) {
this.el.style.backgroundColor = color;
}
}
To use the directive, you apply it to an element like so:
<!-- With default color -->
<div [myHighlight]>Click to highlight me!</div>
<!-- With custom color -->
<div [myHighlight]="yellow">I'm a div, la di da.</div>
Just set a property depending on what item was clicked and set a class if the value matches the one of the current item. Use CSS to apply styles:
#Component({
styles: [`
div.highlight {
background-color: red;
}`
],
template: `
<div (click)="highlighted = 1" [class.highlight]="highlighted === 1">div1</div>
<div (click)="highlighted = 2" [class.highlight]="highlighted === 2">div2</div>
<div (click)="highlighted = 3" [class.highlight]="highlighted === 3">div3</div>
`
})
class MyComponent {
hightlighted:number = 0;
}
I have a form where all the input fields has a 'required' and 'pattern' argument.
I would like to show a small green picture on the right of the inputbox, whenever the input is not invalid, to show the user he has filled it correctly.
Im wondering if its possible to do without javascript/jquery and instead with pure css/sass?
I was thinking something like
if input:invalid{
.divonrightofinputbox{
background:url('green.png');
}
}else{
.divonrightofinputbox{
display:none;
}
}
Is this possible with sass and if so, how? :)
Thanks in advance for any help!
Sass knows nothing about the document or the state of its forms. You just have to use what CSS offers:
input {
&:required {
+ .div-after-the-input {
// required styles
}
}
&:invalid, &:out-of-range {
+ .div-after-the-input {
background: url('invalid.png') no-repeat;
}
}
&:valid, &:in-range {
+ .div-after-the-input {
display: none;
}
}
}