I am using an external panel component which would open on a button click.It has default width and other style properties.Is there any way I can override the width of the panel and used as responsive one .what i want to achieve is programmatically change the width of the panel in my components .
For example,
In my app.component.html iam using the panel container inside app.component.html
panel-container
How can i attach a custom class
panel-container class
="panel-width"
In.css
.panel-width{
Width:500 px
}
Without changing angular default view encapsultion
You can use :host::ng-deep to style the external component.
:host::ng-deep .panel-container {
width: 500px;
}
It is deprecated since 2017, but there is no new way to do this if you do not want to change ViewEncapsulation. Source: https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
Got the solution.
We can override the same in our parent CSS file itself.
Dont use ng deep as that s deprecated
Overwriting library styles in separate global styles — not scoped!
let's override the Angular Material tab style.
create angular material tab scss file in app > assets > scss > override > am_tab.scss
and import the am_tab.scss file in the styles.scss #import 'assets/scss/override/am_tab.scss'
// am_tab.scss
mat-tab-group {
&.mat-tab-group.mat- primary .mat-ink-bar {
background-color: red;
}
}
More read in this article
Related
In Vaadin 23, how to increase or decrease the width of the drawer area of a Vaadin App Layout component?
In your global style sheet, for example frontend/themes/mytheme/styles.css (this assumes you have a custom theme annotation defined #Theme("mytheme")), add the following:
vaadin-app-layout::part(drawer) {
width: 300px;
}
This is slightly simpler than the solution that Tarek suggested (which also works just fine).
You will need to style the internals of the app-layout component.
If the project is using the custom-theme mechanism, then create a file called vaadin-app-layout.css under the directory frontend/themes/<Your-Theme-Name>/components. In that file, you can, say, increase the width of the AppLayout drawer like so:
:host {
--vaadin-app-layout-drawer-offset-size: 400px;
}
[part="drawer"] {
width: var(--vaadin-app-layout-drawer-offset-size);
}
NOTE: if you are not using the custom-theme mechanism, then you will need to add the aforementioned styling in a CSS file that is imported using the #CssImport annotation. For example, you can create a file called vaadin-app-layout.css under the project frontend directory, and then import it from java using the following annotation:
#CssImport(value = "vaadin-app-layout.css", themeFor = "vaadin-app-layout")
I need to change background color for this css code
.mat-toolbar.mat-primary {
background
: #d12626;
color: #fff;
}
.mat-toolbar.mat-primary {
background: #d12626;
color: #fff;
}
I need to change the background for the above code. How to do that
I tried
[ngStyle]=' .mat-toolbar.mat-primary {
background: #d12626;
color: #fff;
}
'
But not working Then i got another suggestion from stackoverflow
[style.font-size]="fontSize+'px'" this code is working for 'font-size' but not woking for my need code this is my need [style.mat-toolbar.mat-primary.background]='#d12626'; but not working
I used this
.mat-toolbar.mat-primary {
background: #d12626;
color: #fff;
}
code inside CSS code and it is working but I need to change the color dynamically.
I also need to update his colors
primaryColor
primaryLightColor
primaryDarkColor
secondaryColor
secondaryLightColor
secondaryDarkColor
primaryTextColor
secondaryTextColor
dont set the material color as primary or secondary then you can use ngStyle like this
<mat-toolbar [ngStyle]="{background:bgColor , color:'#fff'}">
<mat-toolbar-row>
<span>Main Toolbar</span>
</mat-toolbar-row>
</mat-toolbar>
bgColor is just a component property, when you don't set the color property the component don't have any class so it 's easy to change the style
demo 🚀
Dynamic styles
You should make the CSS properties as camelcase, for the font-size should be like this [style.fontSize.px]. You check other solutions from how-to-apply-dynamic-styles?.
Override styles
We can do so using by combining the :host with the ::ng-deep selector and most probably using for overriding Material styles:
:host ::ng-deep h2 {
color: red;
}
Custom theme for Angular Material
You can change a set of colors that will be applied to the Angular Material components.
https://material.angular.io/guide/theming
Without hack, it's not possible to change on the fly the colors of you angular application because the way to style your application using Angular Material is to use theming (that is described here https://material.angular.io/guide/theming) and your theming scss files will be compiled to css at build time.
I think the only hack to change colors of your app on the fly is to identify the hex color that you want to change (for primary, secondary, etc...) and you rewrite your style tag in your document using serch / replace.
But keep in mind that Angular Material is not designed to let user change theme and colors because they provide palette and hue that have been designed to provide good contrast and best practice regarding UX. That's why the solution I give you is really a hack.
the matrial dynamic color will be possible if the main set by css variable instaid of static hex values ,someone already publish a library to solve this by overwrite the main color to be used by css variables.
1️⃣ install angular-material-css-vars library
npm i angular-material-css-vars -S
2️⃣ import MaterialCssVarsModule on app module
#NgModule({
imports: [
...
MaterialCssVarsModule.forRoot(),
],
...
})
export class AppModule {}
3️⃣ use this service 👉 MaterialCssVarsService to change angular material main color like primary ,secondary, warm...
export class component {
constructor(public materialCssVarsService: MaterialCssVarsService) {
const hex = "#3f51b5"; // set default color color
this.materialCssVarsService.setPrimaryColor(hex);
}
setPrimaryColor(color: string) {
this.materialCssVarsService.setPrimaryColor(color);
}
}
you need to remove any existing #import '~#angular/material/theming'; from your main stylesheet file.
👉 demo 🧙♂️
you may check this question create angular material theme with css variables for more help
The project I'm working on uses react-responsive-carousel component but, although there is an attribute to change the arrows icon, there's none to increase the width of the button itself.
Is there a way for me to overwrite the padding on the component with custom css?
.carousel.carousel-slider .control-arrow {
padding: 50px;
}
I would suggest to to use custom class on container that holds carousel component, and use it to override styles safely.
In your root css file:
.my-custom-class .carousel.carousel-slider .control-arrow {
*styles*
}
I know I can use predefined material design (or font awesome etc...) icons in Vuetify like this:
<v-icon>mdi-clock</v-icon>
But is there a way to use v-icon component to display my custom icon defined as svg in my-icon.svg file? This .svg file is located located in my project public/img directory but how can I reference it inside v-icon component?
AFAIK If you want to use as external svg, the answer is unfortunately no.
Anyway, you can import the svg file as a component with vue-svg-loader then use inside v-icon.
import Stack from "#/icons/stack.svg"; // import /src/icons/stack.svg
export default {
components: {
Stack
}
};
Then use it
<v-icon>
<Stack/>
</v-icon>
Another solution How To Add Custom SVG Icon in Vuetify - Vue.
You can achieve the same using CSS.
.v-icon
height 20px
width 20px
&.engine
background-image url(https://www.svgrepo.com/show/9344/train.svg)
background-size contain
background-repeat no-repeat
&::before
visibility hidden
content ""
check out this codepen.
I have two components with tab groups in them. One is a main page and I have overwritten the css to make the labels larger, done using ViewEncapsulation.None. The other is a dialog, and I want to keep it small but still apply some other custom styles to it.
When I open the dialog after visiting the other tabs page, it copies all the styles, which I have figured is because ViewEncapsulation.None bleeds CSS but not exactly as expected.
Is there anyway to override Angular Material styles without changing ViewEncapsulation so that I can keep the two components separate?
Solution 1: you can put all elements of your component into a parent element with a css class and override the material style into it.(it's custom capsulation)
Note: ViewEncapsulation is none here.
component.html
<div class="my-component__container">
<!-- other elements(material) are here -->
</div>
component.scss
.my-component__container{
// override material styles here
.mat-form-field{...}
}
Solution 2: use /deep/(deprecated).(use ::ng-depp insteaded)
:host /deep/ .mat-form-field {
text-align: left !important;
}
Solution 3: don't change ViewEncapsulation , then:
:host {
.my-component__container{}
}
if you would like to customise your Angular material components and provide your own stylings, I have the following suggestions. You may use one of them.
1) Overwrite the classes on your main style.css (or style.scss, whichever you are using). If you are wondering, it is the one that is on the same directory level as your index.html, main.ts, package.json, etc. You might need to add the !important declaration.
For instance,
.mat-form-field-label {
color:blue!important;
}
2) Customising the various Angular Material directive (such as MatPlaceholder) by providing a custom class.
For instance, when we use the MatPlaceHolder, and on the component.html template,
<mat-placeholder class="placeholder">Search</mat-placeholder>
On your component.css, we can then supply the css properties to the placehodler class
.placeholder {
color: green
}
Note:
Alternatively you may use ::ng-deep, but I would strongly suggest using ::ng-deep as it will soon be deprecated.
::ng-deep .mat-dialog {
/* styles here */
/* try not to use ::ng-deep */
}
You can use ::ng-deep. Refer NgDeep