We want to work with components from https://github.com/ing-bank/lion and style them to our needs. Their repo advertises with the components being extensible and minimally styled. However, I cannot seem to figure out how to actually style them. We tried using style element in the parent component, but we cant seem to style these components properly.
Could you give me an example of how to extend a component?
update after answer by #niiyeboah
After a very nice answer by #niiyeboah, I created the following class:
import {css, customElement} from 'lit-element'
import {LionButton} from '#lion/button'
#customElement('my-custom-button')
class MyCustomButton extends LionButton {
static get styles() {
return [
super.styles,
css`
:host {
background-color: red;
}
`,
]
}
constructor() {
super()
}
}
However, now it just shows be the button completely unstyled, i.e. only the text. Does anyone know whats happening?
They provide an example of how to extend and style their components on this page.
For tabs, the code will look something like this:
import { css } from 'lit-element';
import { LionTabs } from '#lion/tabs';
export class MyTabs extends LionTabs {
static get styles() {
return [
super.styles,
css`
/* my stylings */
`
];
}
}
customElements.define('my-tabs', MyTabs);
The ING Lion team has a Slack channel: https://www.polymer-project.org/slack-invite
for support questions.
It is the #lion sub-channel in the Polymer Project Slack
Related
I want to allow users to customize colors and some styles in Angular application. For that I want to make something like this
Structure:
component-one
folder-with-css-files
style-for-component-1-for-client1.css
style-for-component-1-for-client2.css
style-for-component-1-for-client3.css
style-for-component-1-for-client4.css
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.style-for-component-1-for-client{clientId}.css'],
})
export class AppComponent implements OnInit {
clientId: string;
ngOnInit(): void {
// pseudocode
clientId = service.fetchClientId() // for example
}
}
How I can achieve that? I want to have some css files for every component and depend on user id I want to assign them to styleUrls. Someone can tell me how to do it?
You can use scss and wrap every stylesheet in a different class then based on the user’s selection change the class of your body.
Something like:
DarkMode.scss
.darkMode{
your first css here…
}
LightMode.scss
.lightMode{
your second css here…
}
index.html:
<body class="lightMode"></body>
Doing the above will by default apply the lightMode styling and if you remove the classes of your body in any of your components and replace it with darkMode then the darkMode styling will apply.
Adding/Removing class to/from body:
constructor(private renderer: Renderer2) {}
addClass(){
this.renderer.addClass(document.body, 'className');
}
removeClass(){
this.renderer.removeClass(document.body, 'className');
}
Adding/Removing the class does not have to be only in the index.html file, all you need to do is have a tag with a certain class that wraps around your whole code. For example in one of your components:
component.html:
<div [class]="className">
the rest of your html here...
</div>
component.scss:
.greenDefault{
green default css here...
}
.redDefault{
red default css here...
}
.greyDefault{
grey default css here...
}
component.ts
className: string;
changeStyle(class: string){
this.className = class;
}
see example below:
import React, { Component } from 'react';
import styles from './Button.module.css';
class Button extends Component {
let classNameVariable= "error-button"
render() {
return <button className={styles.classNameVariable}>Button</button>;
}
}
as you saw above example, I need to use variable instead of className, to add className.
so is there a way to do it?
Take a look at bracket notation: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Property_Accessors
Instead of styles.clasNameVariable make it styles[classNameVariable]
MY QUESTION :
How to add css to the single Toast used in components in Angular, as there can be multiple toast but i want to change a single toast?
Eg toast image : example toast
I want to add my css to the particular toast message.So, that i can align message text in the center i.e File Import started..
how my Angular directory looks like
| app
|
|-components
| |
| |-test [/app.ts , /app.css]
|
|style.css
What I Tried :
I added the following codes to my CSS and TS code :
my rough app.css code
.test {
text-align : center !important // I tried without ! important also
}
my rough app.ts code
import { Component } from '#angular/core';
import {ToastrService} from 'ngx-toastr';
#Component({
selector: 'my-app',
templateUrl: './app.html',
styleUrls: [ './app.css' ]
})
export class app {
constructor(private toastr: ToastrService) {}
showSuccess() {
// I tried \" test \" also
this.toastr.success('<span class="test">File import started</span>', '', {
enableHtml : true //even I have added the messageClass : 'test'
});
}
}
HOW IT WORKED BUT I DON'T WANT THESE WAYS :
by putting my css code into the style.css (main global css) (X I don't want to change my main style)
by adding ::ng-deep .test instead of .test : this is harmful it will change all my toast-dialogue.
by adding encapsulation: ViewEncapsulation.None in #component : but this will change my other Css.
by using <center> tag : still i don't want to do it because it will fix my issue but what if i want to add multiple css.
How can I achieve this?
You need to apply titleClass and messageClass when your toast is used and overwrite the css background-image to align icon and text:
showSuccess() {
this.toastr.success("Hello world!", "Toastr fun!", {
titleClass: "center",
messageClass: "center"
});
}
Add css class in your global styles:
Styles.css:
.center {
text-align: center;
}
.toast-success {
padding-left: 80px;
text-align: center;
background-position: 35% !important;
}
Or use with :ng-deep if you want to add it in your component's styles css:
app.component.css
:ng-deep .center {
text-align: center;
}
Other alternative is create your own toast component extending Toast and use it customising its template adding a css class for centering the text.
Using a Custom Toast
The issue in this case is that you can't override the css background-image property to align icon and text. You can only do that in styles.css
Changing default icon styles
Here's the Demo:
https://stackblitz.com/edit/ngx-toastr-angular2-4pqrqw
You can use the titleClass property to apply the css class on the toast message.
import {ToastrService} from 'ngx-toastr';
#Component({
selector: 'my-app',
templateUrl: './app.html',
styleUrls: [ './app.css' ]
})
export class app {
constructor(private toastr: ToastrService) {}
showSuccess() {
this.toastr.success('File import started', '', {
messageClass: 'test'// this will apply the test class to the toast title.
});
}
}
When looking to the ngx-bootstrap source code here:
modal-options.class.ts
There is an optional class property defined as class?: string;.
What is the way to use it ?
Is it possible to add a custom class like:
this.modalService.config.class = 'myClass';
Before using the servive as for example:
this.modalRef = this.modalService.show(template, {
animated: false
});
This way, I think we can add custom CSS to the displayed modal
I've tried to add a custom class without success.
That class property is not an array, if applicable, does it mean that we can only add one custom class ?
Demo: by adding and overriding the modal class, the modal is not showing
https://stackblitz.com/edit/ngx-bootstrap-3auk5l?file=app%2Fapp.component.ts
Adding the modal class this way do not help:
this.modalRef = this.modalService.show(template, Object.assign({},
this.config, { class: 'gray modal-lg modal' }));
https://stackblitz.com/edit/ngx-bootstrap-awmkrc?file=app%2Fapp.component.ts
According to the ngx-bootstrap documentation about the Modal component (see the component tab), you can add a class member to the config object.
Important: Since the modal element is outside of the component element in the rendered HTML, the CSS encapsulation should be turned off for the component, or the style attributes for the class should be specified in another file, to make sure that the styles are applied to the modal element.
The code snippet below can be executed in this stackblitz.
import { Component, TemplateRef, ViewEncapsulation } from '#angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
modalRef: BsModalRef;
config = {
animated: true,
keyboard: true,
backdrop: true,
ignoreBackdropClick: false,
class: "my-modal"
};
constructor(private modalService: BsModalService) { }
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template, this.config);
}
}
with a CSS file like this:
.my-modal {
border: solid 4px blue;
}
.my-modal .modal-header {
background-color: lime;
}
.my-modal .modal-body {
background-color: orange;
}
Update: This other stackblitz shows an example of CSS styles imported from an external file into styles.css, allowing to keep the CSS encapsulation in the component.
I am trying to implement theming in Angular2 project.
When someone change theme of web app, it will change the class of body using javascript. And each component in an application has relevant colors for each theme.
Can someone suggest me how to do this in Angular2 components.
when I write my component stylesheet with
body.theme-1 .header {
background-color: red;
}
it doesn't work.
Any other way to implement this.
If I cut same css from component stylesheet and put in to index.html or common stylesheet, it works. But it is a huge application and I don't want to write all component styles in to once place. Not manageable.
If you declare ViewEncapsulation.none in your component the styles from that component will apply globally to your application.
import { Component, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'style-test',
template: `<div> Global stylesheet</div>`,
styles: ['body {
background: blue;
}'],
encapsulation: ViewEncapsulation.None // Use to
//disable CSS
//Encapsulation
//for this component
})
export class SecondComponent {
constructor() { }
}
I found answer from Angular2 documentation.
You can use :host-context() function
:host-context(.theme-1) .header {
background-color: red;
}
It works like a charm.
https://angular.io/docs/ts/latest/guide/component-styles.html
Check above link for further information