Is there any contraindications on stylizing Angular2 custom element directly and selecting them with CSS selector ?
Example :
// HTML
<My-Page>
<header></header>
<main></main>
<My-Footer class="sticky-footer"></My-Footer>
</My-Page>
// CSS
My-Page {
background-color: grey;
}
header {
...
}
.sticky-footer {
position: absolute;
}
Good or bad practice ?
While this is perfectly valid it breaks modularity. A component can style its own root-element:
my-page.component.css
:host{
background-color: grey;
}
header {
...
}
.sticky-footer {
position: absolute;
}
This will achieve the same thing and contains CSS that's vital to your MyPageComponent in the component.
You should use piercing CSS combinators >>>, /deep/ and ::shadow
styles: [
`
:host { background-color: grey; }
:host >>> header{
background:yellow;
}
:host >>> My-Footer{
position: absolute;
}
`
],
template:
`
<My-Page> //<----no need as this becomes your :host
<header></header>
<main></main>
<My-Footer class="sticky-footer"></My-Footer>
</My-Page> //<----no need
`
Related
I need to dynamically change a p-card component in my APP. But it's simply not working...
Heres what I've tried so far :
<div class="card-image-comp">
<p-card [class.activeCard]="profileCardSelected === 1" (click)="selectProfileType(1)">
<img src="../../../assets/icons/person.png">
</p-card>
<p>Paciente</p>
</div>
<div>
<p-card [class.activeCard]="profileCardSelected === 2" (click)="selectProfileType(2)">
<img src="../../../assets/icons/estetoscopio.png">
</p-card>
<p>Profissional de Saúde</p>
</div>
...
My function:
selectProfileType(numCard: number){
this.profileCardSelected = numCard;
}
This part is working just fine, the issue is that the component is not obeying it's new class.
I've tried the normal stuff:
.activeCard {
background-color: black;
}
...
div {
.activeCard {
background-color: black;
}
}
...
.personalCardComp {
.activeCard {
background-color: black;
}
}
... and even some nasty stuff
:host {
::ng-deep .activeCard {
background-color: black;
}
}
...
:host {
::ng-deep p-card.p-element.activeCard {
background-color: black;
}
}
As I said before, the class is applied correctly, but the card only changes when I apply the css to the div children of the p-card...
Basically if I could apply the class to this div children It would work just fine... Is there a way to do so? Apply the class to p-card but the div children obbey...
Be sure to properly import your .scss file and then:
:host ::ng-deep {
.p-card.p-component {
background: black;
}
}
I have written the code for getting the URL param value
export class RedirectingComponent implements OnInit {
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit()
{
this.activatedRoute.paramMap.subscribe(params=>
{
let color=params.get('color');
console.log(color);
if(color)
{
if(color=='red')
{
//So If the color is red then we should apply red.css
}
}
})
}
}
Here are the css files
red.css
.my-container{
height: 100%;
background-color: red;
}
blue.css
.my-container{
height: 100%;
background-color: red;
}
Here is the Main Page
<mat-toolbar color="primary">
<span class="mainheading">Theme Changing</span>
</mat-toolbar>
<div class="my-container">
<h1 class="sideheading">URL that entered are processed for Theme Changing of the Page</h1>
</div>
Now I have to use the param value like color and change the background to the color mentioned like if the color mentioned is red the background should change in to red.
Note:Their should be different CSS files
You can't control header tags by angular directives.
You can create style tags and import different files in them. then control them by *ngIf directive.
<style type="text/css" *ngIf="rule1">
#import 'path\to\file-1';
</style>
<style type="text/css" *ngIf="rule2">
#import 'path\to\file-2';
</style>
Guys I have found a solution for this question
import { ActivatedRoute } from '#angular/router';
constructor(private activatedRoute: ActivatedRoute) { }
ngOnInit()
{
this.activatedRoute.paramMap.subscribe(params=>
{
let color=params.get('color');
console.log(color);
if(color)
{
if(color=="red")
{
loadCss("assets/styles/red.css");
console.log("This should be able to change to red color background");
}
else if(color=='blue')
{
loadCss("assets/styles/blue.css");
console.log("This should be able to change to Blue color background");
}
else if(color=='green')
{
loadCss("assets/styles/green.css");
console.log("This should be able to change to Green color background");
}
}
function loadCss(filename:any)
{
var fileref=document.createElement("link");
fileref.setAttribute("rel","stylesheet");
fileref.setAttribute("type","text/css");
fileref.setAttribute("href",filename);
if(typeof fileref!="undefined")
{
document.getElementsByTagName("head")[0].appendChild(fileref)
}
}
})
}
}
Main CSS Files
.mainheading
{
width: 100%;
text-align: center;
}
.sideheading{
padding-top: 20px;
color: white;
font-style:italic;
text-align:center ;
}
red.css
.my-container{
height: 100%;
background-color: red;
}
blue.css
.my-container{
height: 100%;
background-color: blue;
}
green.css
.my-container{
height: 100%;
background-color: green;
}
<mat-toolbar color="primary">
<span class="mainheading">Theme Changing</span>
</mat-toolbar>
<div id="theme" class="my-container" >
<h1 class="sideheading">
URL that entered are processed for Theme Changing of the Page
</h1>
</div>
Note:
Put the css files in assets/styles folder.
For getting the value from the url you should add the script in the app routing module
const routes: Routes = [
{
path:'redirecting/:color',component:RedirectingComponent
}];
I have HTML table in Angular web app.
Get the data from the database via service and display it as text.
One of the columns is Status, so I need to present that variable not as text,
but as a circle of certain color, so if that cell value is "green",
it should show as green circle.
Here is what I have.
CSS (part of Component Styles):
:host ::ng-deep td.circle {
text-align: center;
font-size: 0;
background-color: RED; <--- need to pass param here
}
I define that column as:
.circle {
border-radius: 50%;
height: 24px;
width: 24px;
}
HTML:
<app-table [attrs]="serviceapi" [monthSelected]="monthSelected" ></app-table>
TS for that table:
In constructor:
this.data = {
headers: [],
rows: []
};
ngOnInit() {
this.tableMetricsService.getTableMetrics(
JSON.parse(this.attrs).api,
this.monthSelected
).subscribe(response => {
this.data = response;
}
);
}
Any idea how to "translate" cell value into the CSS background-color ?
TIA,
Oleg.
You could put a data attribute on the html and write a corresponding selector:
[data-status="green"] {
background: green;
}
[data-status="red"] {
background: red;
}
<div data-status="green">Green</div>
<div data-status="red">Red</div>
But I don't see any advantage to this approach over using a regular css class:
.green {
background: green;
}
.red {
background: red;
}
<div class="green">Green</div>
<div class="red">Red</div>
Here is what worked for me:
<div *ngIf="cell.styleClass == 'circle'" [ngStyle]="{'background-color': cell.value}" [ngClass]="cell.styleClass">
</div>
Ionic4 action sheet controller not taking up CSS.
This is my ts code
const actionSheet = await this.actionSheetController.create({
mode: 'md',
cssClass: 'match-item-action-sheet red',
buttons: [{ ...
}]
});
And here is my CSS class
.match-item-action-sheet{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.red{
color:red;
}
Here is the live code https://ionic-v4-xbwrsj.stackblitz.io/action-sheet
Below is the expected behavior with class match-item-action-sheet
Use ::ng-deep in css
See working code
::ng-deep .match-item-action-sheet{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
::ng-deep .red{
color:red;
}
Edit!
According image you attach to question
Set style to .action-sheet-group.sc-ion-action-sheet-md
In css:
::ng-deep .match-item-action-sheet .action-sheet-group.sc-ion-action-sheet-md{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
::ng-deep .red .action-sheet-group.sc-ion-action-sheet-md{
color:red!important;
}
Write the following in your variables.scss:
.red {
--color: red;
}
And the following in your component's scss:
.action-sheet-group {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
The Action Sheet Buttons color is controlled by the below class .action-sheet-button.sc-ion-action-sheet-ios or you can verify it in the browser inspector.
If you need only change the delete section use this class .action-sheet-destructive.sc-ion-action-sheet-ios.
Add your styles that are needed to be modified and place it the variables.scss as I have done below.
.action-sheet-destructive.sc-ion-action-sheet-ios {
color: red;
}
Also, you have to change similarly to the relevant class in android.
const actionSheet = await this.actionSheetController.create({
mode: 'md',
css-class: 'match-item-action-sheet red',
}]
});
Try above code. Used css-class instead of cssClass.
Refer this for above issue.
Is it possible to use pure CSS variables with Vue without having to link any stylesheets or use SASS/PostCSS? Unsure why I'm unable to get this to work in its most basic form.
<template>
<div id="test">
TEST
</div>
</template>
<style scoped>
:root {
--var-txt-color: #c1d32f;
}
#test {
color: var(--var-txt-color);
}
</style>
I know you highlighted "without having to link any stylesheet", but I run into the same issue and there is a simple option - use just one external css file and include it in your App.vue, then you can access the variables anywhere else, in scoped styles as well.
variables.css
:root {
--font-family: "Roboto", "Helvetica", "Arial", sans-serif;
--primary-color: #333a4b;
}
App.vue
<style>
#import './assets/styles/variables.css';
</style>
LandingView.vue
<style scoped>
#landing-view {
font-family: var(--font-family);
font-weight: 300;
line-height: 1.5em;
color: var(--primary-color);
}
</style>
This won't work as expected because of scoped attribute for stylesheet. Example above compiles into:
[data-v-4cc5a608]:root {
--var-txt-color: #f00;
}
And, as you understand, it will not target actual :root element.
It can be solved by:
Not using scoped attribute for this stylesheet. Notice that it may cause styles conflict with other variables declarations for :root element.
Using current component's wrapping element as root. If we declare variables this way:
.test {
--var-txt-color: #c1d32f;
color: var(--var-txt-color);
}
.test-child-node {
background-color: var(--var-txt-color);
}
Then it will can reuse variables for other elements of the same component. But still, it won't be possible to use declared variables inside child components without removing scoped, if it is the case.
Why not just use this?
<style scoped>
* {
--var-txt-color: #c1d32f;
}
</style>
The generated CSS is:
*[data-v-d235d782] {
--var-txt-color: #c1d32f;
}
This has been working for me.
I just discovered that it looks like this also works, using the "deep selector"
>>> {
--var-txt-color: #c1d32f;
}
Generated CSS is:
[data-v-d235d782] {
--var-txt-color: #c1d32f;
}
I think I like this method more.
One workaround is to define them under a non-scoped style element like the following. However one thing to note here is, these variables will be exposed to other Vue components as well.
<style>
:root {
--var-txt-color: #c1d32f;
}
</style>
<style scoped>
#test {
color: var(--var-txt-color);
}
</style>
Late answer - Here is a working example with css vars derived from standard vue structures.
<template>
<div>
<component :is="'style'">
:root {
--color: {{ color }};
--text-decoration: {{ textDecoration }};
--font-size: {{ fontSize }};
}
</component>
<p>example</p>
</div>
</template>
<script>
export default {
props:{
color: {
type: String,
default: '#990000'
}
},
data: function () {
return {
textDecoration: 'underline'
}
},
computed: {
fontSize: function (){
return Math.round(Math.random() * (5 - 1) + 1) + 'em';
}
}
}
</script>
<style>
p{
color: var(--color);
text-decoration: var(--text-decoration);
font-size: var(--font-size);
}
</style>
Starting from the top...
Vue must have 1 root element, so I needed a div tag in order to include a sample p tag. However, you can just use the component-is-style tag and get rid of the div and p tags. Note the need for extra quotations "'style'".
The normal vue style tag can be scoped or not - as needed.
Well, now you can use CSS variable injection.
<template>
<div>
<div class="text">hello</div>
</div>
</template>
<script>
export default {
data() {
return {
color: 'red',
font: {
weight: '800'
}
}
}
}
</script>
<style>
.text {
color: v-bind(color);
font-weight: v-bind('font.weight');
}
</style>
Those styles are also both reactive and scoped. There won't be any unintended inheritance issues. Vue manages the CSS variables for you.
You can take a look at the RFC here.