I'm beginner for the Angular & i try to do some Angular tab active line bar to replace some arrow but it's not working , anyone know how to do that correctly
stackblitz sample here
code
<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
css
/* active tab */
::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label-active {
color:#0f2241;
background-color: lightgrey;
}
/* ink bar */
::ng-deep .mat-ink-bar {
background-color:red !important; background: url('../../../assets/sg-img/drop-down-arrow.png');
}
Thanks
Instead of using ::ng-deep set the ViewEncapsulation of your component to none:
import {Component, ViewEncapsulation} from '#angular/core';
#Component({
selector: 'tab-group-stretched-example',
templateUrl: 'tab-group-stretched-example.html',
styleUrls: ['tab-group-stretched-example.css'],
encapsulation: ViewEncapsulation.None
})
export class TabGroupStretchedExample {}
Then use the following CSS (I had to use another arrow since you used a local reference in your stackblitz):
.example-stretched-tabs {
max-width: 800px;
}
/* active tab */
.mat-tab-list .mat-tab-labels .mat-tab-label-active {
color:#0f2241;
background-color: lightblue;
opacity: 1;
}
/* ink bar */
.mat-tab-group.mat-primary .mat-ink-bar {
background: none;
content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
height: 10px;
}
Is this what you were looking for: stackblitz?
Related
I don't want child class to inherit the immediate parent class background color which has background color as white. Instead it should skip and take background color from parent component which is bluebackground. When I use the transparent background in child class it should show blue color not white. Rest of the property of parent (whitebackground class) should be inherited just not the white background in child class.
I cannot do any changes on Parent component just I can do changes using css.
app component :
<div class="bluebackground">
<app-test>
</app-test>
</div>
Component: test
BlueBackGround Start
<div class="whitebackground">
Some White Background Stuff that I need
<div class="child">
Here i want background which should skip the parent whitebackground and show blue color same as bluebackground class <br />
</div>
</div>
BlueBackGround End
Here is the Css
.child {
font-size: 2rem;
text-align: center;
color: green;
background:transparent;
}
.bluebackground{
background: blue;
font-size: 3rem;
}
.whitebackground {
background:white;
}
StackBlitz
https://stackblitz.com/edit/angular-ivy-hbfvjs
You could try to change the CSS to the following
.child {
font-size: 2rem;
text-align: center;
}
.bluebackground {
font-size: 3rem;
}
.whitebackground {
background:white;
color:yellow;
}
.bluebackground, .child {
background-color: blue;
}
Working example: Stackblitz
Update
There is a dirty way to include the CSS selectors from the app component to the child component.
test.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css', '../app.component.css'] // <-- include `app.component.css` here
})
export class TestComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Now you could use the bluebackground selector in the test component.
test.component.html
BlueBackGround Start
<div class="whitebackground">
Some White Background Stuff that I need
<div class="child bluebackground"> <!-- include `bluebackground` here -->
Here i want background which should skip the parent whitebackground and show blue color same as bluebackground class <br />
</div>
</div>
BlueBackGround End
I've modified your Stackblitz
Update: encapsulation
You could set the encapsulation to ViewEncapsulation.None in the app.component and rename the child selector to bluebackground in the child as well. Try the following
app.component.ts
import { Component, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
encapsulation: ViewEncapsulation.None // <-- set `ViewEncapsulation.None` here
})
export class AppComponent {
...
}
test.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
test.component.css
/* overwrite/introduce values to the `bluebackground` specific to test component */
.bluebackground {
font-size: 2rem;
text-align: center;
}
.whitebackground {
background:white;
color:yellow;
}
test.component.html
BlueBackGround Start
<div class="whitebackground">
Some White Background Stuff that I need
<div class="bluebackground">
Here i want background which should skip the parent whitebackground and show blue color same as bluebackground class <br />
</div>
</div>
BlueBackGround End
Working example: Stackblitz
Try like this:
<div class="bluebackground">
Blue Background Start
<div class="whitebackground">
Some White Background Stuff that I need
<div class="child bluebackground">
Here i want background which should skip the parent whitebackground and show blue color same as mainbackground class <br />
</div>
</div>
Blue Background End
<div>
Working Demo
Thanks to Michael D for his inputs.
This is how I solved it
I had to move the white background color from whitebackground class to new class called newwhitebackground class.
Html
BlueBackGround Start
<div class="whitebackground">
<div class="newwhitebackground">
Some White Background Stuff that I need
</div>
<div class="child">
Here i want background which should skip the parent whitebackground and show blue color same as bluebackground class <br />
</div>
</div>
BlueBackGround End
CSS
.child {
font-size: 2rem;
text-align: center;
background:transparent;
}
.whitebackground {
color:yellow;
}
.newwhitebackground {
background-color:white;
}
Here is the stackblitz
https://stackblitz.com/edit/angular-ivy-pyhqwr
I tried to change the background-color in b-modal -> in .modal-header using bootstrap-vue. But the vue doesn't see my styles and I don know why :/
here is the code. I follow by answer in link
HTML:
b-modal(id="card-1" title="CARTÃO DE CRÉDITO" :modal-class="myclass" header-text-variant="light")
VUE
export default {
data: {
myclass: ['myclass']
},
}
CSS
.myclass > .modal-dialog > .modal-content > .modal-header {
background-color: #da2228 !important;
color: white;
}
But I still doesn't see the results. Modal header is white. Any ideas why?
You're probably using a scoped style tag in your .vue file.
If you are, then you need to use a deep-selector to properly target the subcomponent.
The selectors are /deep/, >>> or ::v-deep.
In the below example i use /deep/, but the others should work for you as well.
You can also use the header-class prop on b-modal to directly add the class to the header if you wish.
<template>
<b-modal header-class="my-class">
<template #modal-header>Header</template>
Hello
</b-modal>
<b-modal modal-class="my-second-class">
<template #modal-header>Header</template>
Hello
</b-modal>
</template>
<style scoped>
/deep/ .my-class {
background: black;
color: white;
}
/deep/ .my-second-class > .modal-dialog > .modal-content > .modal-header {
background: black;
color: white;
}
</style>
You can use content-class="your-class" in the vue bootstrap modal.
<b-modal id="myModal" content-class="your-class" title="BootstrapVue">
Body Content
</b-modal>
Or else it is difficult to style the modal cuz the normal class="" does not apply to the code.
I have the following radio button from angular material, and I want to apply some CSS when it has been selected, but the CSS is not working, and I do not know why
however, the :hover works perfectly fine
I have provided both HTML and CSS
could you please help me with this?
.things {
&:focus {
background-color: red;
}
&:hover {
.thing-name {
color: #9c27b0;
}
}
}
<mat-radio-button class="things" *ngFor="let thing of things" [value]="thing.name">
<span class="thing-details">
<img class="thing-image" [src]="thing.logo" [alt]="thing.name" />
<h4 class="thing-name text-center mt-3 pt-3">{{ thing.name }}</h4>
</span>
</mat-radio-button>
I just figured it out.
the following code will both hide the circle of the radio button and changes the color of another element on its selection
::ng-deep.mat-radio-button.mat-accent.mat-radio-checked {
span .thing-name {
border: 1px solid #ffffff !important;
background-color: #28a745 !important;
}
}
// the bellow are for deleting the circle from the radio buttons
::ng-deep .mat-radio-button .mat-radio-container {
width: 0;
}
::ng-deep .mat-radio-container .mat-radio-outer-circle,
::ng-deep .mat-radio-container .mat-radio-inner-circle {
border: none;
width: 0;
}
I am using emotion to style and display the equation for compound interest in my React app. My render() returns this:
<div css ={equation}>
<p>
P (1 +</p>
<p css={fraction}>
<span className="num">1</span>
<span className="symbol">/</span>
<span className="bottom">2</span>
</p>
)
<sup>(nt)</sup>
</div>
And outside of my component I have:
const fraction = css`
display: inline-block;
position: relative;
vertical-align: middle;
letter-spacing: 0.0001em;
text-align: center;
.num {
display: block;
padding: 0;
height: 12px;
line-height: 12px;
}
.bottom {
border-top: thin solid black;
}
.symbol {
display: none;
}
`
const equation = css`
font-size: 100%;
.p{
font-size:large !important;
}
`;
The fraction is correctly styled. However, I cannot get the font of the p elements to change. The only way I got it to was by switching the p to h1 elements - but I don't want to do that. I want to be able to specify the font size inside my emotion css styling.
There are a couple of things I noticed as an issue in your code.
You are passing .p { ... inside the equation which is not a class selector but should have been an element selector like p { ...
Your react div has to use a className in order to make that effect applied
Here is the sandbox code changes: https://codesandbox.io/s/emotion-xh53z?fontsize=14
Just copying here for your reference:
import React from "react";
import { render } from "react-dom";
import { css } from "react-emotion";
const fraction = css`
display: inline-block;
position: relative;
vertical-align: middle;
letter-spacing: 0.0001em;
text-align: center;
.num {
display: block;
padding: 0;
height: 30px;
line-height: 12px;
}
.bottom {
border-top: thin solid black;
}
.symbol {
display: none;
}
`;
// Notice the p inside the equation
const equation = css`
p {
font-size: large !important;
}
`;
// Rather than css={}, you should be using className={}
const App = () => (
<div className={equation}>
<p>
P (1 +
<p className={fraction}>
<span className="num">1</span>
<span className="symbol">/</span>
<span className="bottom">2</span>
</p>
)<sup>(nt)</sup>
</p>
</div>
);
render(<App />, document.getElementById("root"));
I also moved the closing </p> tag at the last to ensure it's getting applied as per inline-block
Updated 1:
Here is the latest updated version: https://codesandbox.io/s/emotion-1tjc7
As per their latest blog you should be using:
import styled from '#emotion/styled'
import { css } from 'emotion'
instead of import styled, { css } from 'react-emotion'
Update 2:
In case you cannot use vanilla emotion, then you can consider using the following:
import styled from "#emotion/styled";
/** #jsx jsx */
import { css, jsx } from "#emotion/core";
According to their documentation:
There are 2 ways to get started with the css prop.
Babel Preset (Can't use in Create-React-App or CodeSandbox)
JSX Pragma (This involves to just add the above to lines of code)
I have updated the same codesandbox: https://codesandbox.io/s/emotion-0z3vz
I normally use a global SCSS file in my apps, but today I wanted to make some scss scoped to just my component.
I have set a class on the component via #HostBinding (of class.card).
I can style items inside my component, such as the caard-body, but how can I apply overrides to this component's card class?
In other words, I have several cards on the page. I have styles that I only want to apply to this card, to make it look different. So I'd like to apply css such as
.card { background-color: violet; }
So that only this card is violet. I want to make this css part of this component, so everywhere I use it it will automatically be a violet card. (In reality I want to more than a simple thing, but you get the idea)
My component TS:
import { Component, Input, HostBinding } from '#angular/core';
#Component({
selector: 'app-reviews',
templateUrl: './reviews.component.html',
styleUrls: ['./reviews.component.scss']
})
export class ReviewsComponent {
#HostBinding('class.card')
true;
#Input()
review;
constructor() {}
}
My Component SCSS:
.card-header {
border: 0;
color: #cf0989;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: 2rem;
font-weight: normal;
}
.card-body {
...
}
My component HTML:
<div class="card-header">Testimonials</div>
<div class="card-body">
<div class="review-image">
<img class="rounded-circle"
alt="{{review.acf.article_author.post_title}}"
src="{{review.acf.article_author.acf.image}}">
</div>
<div class="review-content">
<p class="review">
<span [innerHTML]="review.content.rendered"></span>
</p>
<p class="reviewer-name">{{review.acf.article_author.post_title}}</p>
</div>
</div>
The selectors in my CSS for .card-body and .card-header work fine, but I cannot style this .card. Adding this, for example does nothing:
.card { background-color: violet: }
How can I create SCSS selectors in the component's SCSS file that also apply to the class applied to the component via #HostBinding? Can I? Should I?
It looks like I need to use :host, is that correct?
:host {
&.card {
padding: 2rem;
}
}