In Search.tsx:
import { SearchInput } from Search.styles.ts
<SearchInput
onChange={handleChange}
value={values["searchValue"]}
placeholder="Search"
type="text"
name="searchValue"
/>
Output html:
<div class="1">
<div class="2">
<div class="3">
<span class="InputWrapper">
<input placeholder="Search" name="searchValue" class="Input input normalVariant" formnovalidate="" type="text" value="" >
</span>
</div>
</div>
</div>
In Search.styles.ts:
import * as Toolkit from "#some_repo/toolkit";
export const SearchInput = styled(Toolkit.Input)`
InputWrapper: 100%
`
I want set InputWrapper: width 100%, what is the correct way to do it?
It works just like css.
import * as Toolkit from "#some_repo/toolkit";
export const SearchInput = styled(Toolkit.Input)`
.InputWrapper {
width: 100%;
};
import * as Toolkit from "#some_repo/toolkit";
export const SearchInput = styled(Toolkit.Input)`
width: 100%;
`
Related
I have a button with send and on clicking, I want to move it, (this is just for asking) can you tell me why it is not working
This is the jsx
import React from 'react'
import './home.css'
import sound from './sound.mp3'
import video from './A.mp4';
import img1 from './home1.jpeg';
import img2 from './home4.jpeg';
import img3 from './home3.jpeg';
import { useRef } from 'react';
return (
<>
<div className="form" onClick={prevent} >
<form action="" className='contact_form'>
<div className="heading_contact">
Get in touch with me
</div>
<input className="info_contact" placeholder='Your Name' ></input>
<input className="info_contact" placeholder='Your Email' ></input>
<textarea className='info_contact' name="" id="" cols="27" rows="10" placeholder='You message'></textarea>
<button id='delivery' className="submit" >
<i class="fa-solid fa-truck" ></i>
</button>
</form>
<div className='alternates' >
Or contact me through
</div>
</div>
</>
)
}
And this is the CSS for the animation
#delivery:active {
position: relative;
animation-name: delivery;
animation-duration: 15s;
animation-iteration-count: 5;
#keyframes delivery{
from {
margin-right: 0px;
}
to {
margin-right: 100px;
}
}
}
I also tried to bring the keyframes section out of the :active selector but it still won't work.
I'm trying to style the below type of styles in a React.js but I have no idea to change color according to react variable. The code is as follows:
CSS:
.toggle input:checked + .slider {
background-color: ${color};
}
React:
const { color } = userDoc.data()
return(
<div className="toggle">
<label className="switch">
<input type="checkbox" onChange={onChangeIsLve} checked={isActive}/>
<span className="slider round"></span>
</label>
</div>
)
You could add an inline style if you want to style the span element.
const { color } = userDoc.data()
// create a custom style
const customStyle = { backgroundColor: color }
return(
<div className="toggle">
<label className="switch">
<input type="checkbox" onChange={onChangeIsLve} checked={isActive}/>
<!-- add it here -->
<span className="slider round" style={style}></span>
</label>
</div>
)
I have this piece of code for my mega menu:
<button mat-button [matMenuTriggerFor]="objectmenu">Objects</button>
<mat-menu #objectmenu="matMenu" >
<div class="menu-content" [style.backgroundColor]="getUnSelectedRandomColor()" style="height: 550px;">
<div fxFlex="100" fxFlex.gt-sm="30" fxFlex.sm="45" class="dropdown-menu-items">
<div class="dropdown-menu-btns" *ngFor="let parent of (objectList$ | async)"
(mouseover)="openCategory($event,
parent)"
[style.background-color] = "this.selectedColor === (parent.categoryId * 100) ? getSelectedRandomColor() : getUnSelectedRandomColor()"
>{{parent.name}}</div>
</div>
<div class="theme-container">
<div class="theme-container" style=" padding-bottom: 0px !important; padding-top: 7px !important;">
<div fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign="center center" class="content border-lighter">
<div fxFlex="100" fxFlex.gt-sm="100" fxLayout="column" fxLayoutAlign="center center">
<h2 *ngIf="this.selectedCategory" class="uppercase">{{this.selectedCategory.name}}</h2>
</div>
</div>
<div class="content border-lighter" [style.backgroundColor]="getSelectedRandomColor()" style="height: 380px;">
<div fxLayout="row wrap" fxLayoutAlign="space-between">
<div fxFlex="100" fxFlex.gt-sm="70" fxFlex.sm="45" style="column-count: 2;">
<ul class="ht-dropdown megamenu-two d-flex"
*ngFor="let parent of (childCategories$ | async)" style="list-style: none;">
<label [routerLink]="['/products']" [queryParams]="{categories: parent.categoryId}"
routerLinkActive="router-link-active">{{parent.name}}</label>
<li *ngFor="let child of parent.childrenCategories"
[routerLink]="['/products']" [queryParams]="{categories: child.categoryId}"
routerLinkActive="router-link-active">
{{child.name}}
</li>
</ul>
</div>
<div fxFlex="100" fxFlex.gt-sm="30" ngClass.lt-md="pt-5" style="background-size: contain !important;"
[style.background]="selectedCategoryUrl">
</div>
</div>
</div>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center" >
<img *ngFor="let brand of (relatedBrandsList$ | async)" [src]=" brand.thumbnail | safeHtml" style="width: 110px; height: 110px; border-radius: 50%;"/>
</div>
</div>
</div>
</mat-menu>
and it gives me the following style:
As shown in the picture, the top and the bottom edges of the menu panel are not taking the dynamic background color which I generate in my angular code by getUnSelectedRandomColor() method.
The getUnSelectedRandomColor() method is as follow:
openCategory(evt, category: Category) {
this.selectedCategory = category;
this.selectedCategoryUrl = `url('../../assets/categories/${category.categoryId}.webp')`;
this.childCategories$ = this.store.pipe(select(getChildCategories(category.categoryId)));
this.relatedBrandsList$ = this.store.pipe(select(getRelatedBrands(category.categoryId)));
this.selectedColor = category.categoryId * 100;
}
getSelectedRandomColor() {
const color = 'hsl(' + this.selectedColor + ', 30%, 75%)';
return color;
}
getUnSelectedRandomColor() {
const color = 'hsl(' + this.selectedColor + ', 30%, 86%)';
return color;
}
How can I do this?
Angular 9
What happens is that you are not affecting the menu panel item, you must get the panelId which is a property of MatMenu, with the panel id you get the element and then change the value of the attribute you want, to achieve this you can use property decorator that configures a view query ViewChild and the service Renderer2.
Here I show you an example in which I dynamically change the background of the panel according to the menu item that emits the mouseover stackblitz
import { Component, ViewChild, Renderer2 } from '#angular/core';
import { MatMenu } from '#angular/material/menu/';
#Component({
selector: 'my-app',
template: './app.component.html',
})
export class AppComponent {
#ViewChild('menu', {static: true}) menu: MatMenu
constructor(private _renderer2: Renderer2) {
}
changeBackgroundPanel(colorValue: string) {
const el = document.getElementById(this.menu.panelId);
this._renderer2.setStyle(el, 'background', colorValue);
}
}
<button mat-raised-button [matMenuTriggerFor]="menu" color="primary">Open Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (mouseover)="changeBackgroundPanel('blue')">Blue</button>
<button mat-menu-item (mouseover)="changeBackgroundPanel('orange')">Orange</button>
<button mat-menu-item (mouseover)="changeBackgroundPanel('red')">Red</button>
</mat-menu>
[Solution for Angular 8]
See the example working here: stackblitz
Component:
import { Component, Renderer2 } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.scss' ]
})
export class AppComponent {
constructor(private _renderer2: Renderer2) {
}
changeBackgroundPanel(colorValue: string) {
const el = document.getElementById('myPanelId');
this._renderer2.setStyle(el, 'background', colorValue);
}
}
Html:
<button mat-raised-button [matMenuTriggerFor]="menu" color="primary">Open Menu</button>
<mat-menu #menu="matMenu">
<div id="myPanelId" class="menu-panel">
<button mat-menu-item (mouseover)="changeBackgroundPanel('blue')">Blue</button>
<button mat-menu-item (mouseover)="changeBackgroundPanel('orange')">Orange</button>
<button mat-menu-item (mouseover)="changeBackgroundPanel('red')">Red</button>
</div>
</mat-menu>
CSS:
.menu-panel {
margin: -8px 0;
padding: 8px 0;
}
Finally I found the answer:
::ng-deep .mat-menu-content{
padding-top: 0px !important;
padding-bottom: 0px !important;
}
I removed the paddings using the above style and then the white gaps were removed
I have quite simple component that does a login with username/password. The template has a button which calls the "login()" method. The console shows for username/password both undefined. I tried everything but nothing works. What am I'm doing wrong?
<template>
<style>
:host {
display: block;
}
</style>
<h2>Hello [[prop1]], authenticated=[[authenticated]]!</h2>
<div>
<div><label>Username: </label><input value="{{username::input}}"></input></div>
<div><label>Password: </label><input type="password" value="{{password::input}}"></input></div>
<div>
<button onclick="{{logIn}}" raised>Log in</button>
</div>
</div>
</template>
Here is the login method:
logIn() {
console.log("username="+this.username+", password="+this.password);
}
Maybe paper-input fixes your Problem
<template>
<style>
:host {
display: block;
}
</style>
<h2>Hello [[prop1]], authenticated=[[authenticated]]!</h2>
<div>
<div><label>Username: </label><paper-input id="usn" value="{{username}}"></input></div>
<div><label>Password: </label><paper-input id="pwd" type="password" value="{{password}}"></input></div>
<div>
<button onclick="[[logIn]]" raised>Log in</button>
</div>
</div>
</template>
On the other hand you could try changing you logIn method to this should also work with just an input don´t forget to set an id:
logIn() {
console.log("username="+this.$.usn.value+", password="+this.$.pwd.value);
}
I'm reading a book about Angular 2 and one of the chapters is about Forms. I'm using Semantic UI Framework and when I put a class, specify the "error" class the div is disappear. Is very very strange I don't know what happened. I have to mention what works perfectly if I replace "error" class with another like "negative" for instead.
import { Component } from '#angular/core';
import {
FormBuilder,
FormGroup,
Validators,
AbstractControl,
FormControl
} from '#angular/forms';
#Component({
selector: 'demo-form-sku-builder',
template: `
<div class="ui raised segment">
<h2 class="ui header">Demo Form: Sku with Builder</h2>
<form [formGroup]="myForm"
(ngSubmit)="onSubmit(myForm.value)"
class="ui form">
<div class="field"
[class.error]="!sku.valid && sku.touched">
<label for="skuInput">SKU</label>
<input type="text"
id="skuInput"
placeholder="SKU"
[formControl]="myForm.controls['sku']">
<div *ngIf="!sku.valid"
class="ui error message">SKU is invalid</div>
<div *ngIf="!sku.hasError('required')"
class="ui error message">SKU is required</div>
</div>
<button type="submit" class="ui button">Submit</button>
</form>
</div>
`
})
export class DemoFormSkuBuilder {
myForm: FormGroup;
sku: AbstractControl;
constructor(fb: FormBuilder) {
this.myForm = fb.group({
'sku': ['', Validators.required]
});
this.sku = this.myForm.controls['sku'];
}
onSubmit(value: string): void {
console.log('you submitted value: ', value);
}
}
Is this if statement backwards?
<div *ngIf="!sku.hasError('required')"
class="ui error message">SKU is required</div>
Shouldn't it be:
<div *ngIf="sku.hasError('required')"
class="ui error message">SKU is required</div>
Without the not operator?
Use below code instead of [class.error]="!sku.valid && sku.touched"
<div class="field" [ngClass]="{ 'error' : !sku.valid && sku.touched}">
For more detail
Another way of doing is
import { Component } from '#angular/core';
import {
FormBuilder,
FormGroup,
Validators,
AbstractControl,
FormControl
} from '#angular/forms';
#Component({
selector: 'demo-form-sku-builder',
template: `
<div class="ui raised segment">
<h2 class="ui header">Demo Form: Sku with Builder</h2>
<form #myForm=ngForm
(submit)="onSubmit(myForm.value)"
class="ui form">
<div class="field"
[ngClass]="{ 'error' : !sku.valid && sku.touched}">
<label for="skuInput">SKU</label>
<input type="text"
id="skuInput"
placeholder="SKU"
name='sku'
#sku='ngModel' ngModel
required>
<div *ngIf="!sku.valid"
class="ui error message">SKU is invalid</div>
<div *ngIf="!sku.touched && !sku.errors?.required"
class="ui error message">SKU is required</div>
</div>
<button type="submit" class="ui button">Submit</button>
</form>
</div>
`
})
export class DemoFormSkuBuilder {
constructor() {
}
onSubmit(value: string): void {
console.log('you submitted value: ', value);
}
}
Fixed. by default, semantic UI hides these unless the whole form is in the same state. You can create an another css called styles.css for example and use this:
.ui.form .error.message,
.ui.form .success.message,
.ui.form .warning.message {
display: block;
}