I'm trying to do something similar to this: https://material.angularjs.org/1.1.9/demo/chips#static-chips where the chips aren't selectable, clickable or hoverable and just want it to be a static chip. However, I am using Angular Material for this.
Is it possible to do the same thing with Angular Material? I know there's a Static Content section in the Angular Material documentations where you do:
<mat-chip-set role="list">
<mat-chip role="listitem"> Sugar </mat-chip>
<mat-chip role="listitem"> Spice </mat-chip>
<mat-chip role="listitem"> Everything Nice </mat-chip>
</mat-chip-set>
However, I tried that and it didn't work. Basically what I want to do:
Remove the grey color when you hover over the mat-chip
Remove the ripple effect when you click on the mat-chip (I found you can do this doing [disableRipple]="true"?)
Remove the grey color when you click on the mat-chip
I don't want any effect at all when you hover or click on the chip. Is there a way to do this with angular material? Here is how my code looks at the moment:
<mat-chip-list class="privacy-tags">
<mat-chip>Public</mat-chip>
<mat-chip>Private</mat-chip>
<mat-chip>Confidential</mat-chip>
</mat-chip-list>
EDIT: This is what happens when I do:
.mat-chip {
color: magenta !important;
background-color: white !important;
border: 1px magenta solid !important;
pointer-events: none !important;
}
.mat-chip:hover {
background-color: unset !important;
}
The tag on the left is clickable and the tab on the right isn't clickable:
If there's only one tag:
You can remove the ripple effect by defining to disableRipple as true. For the hover effect, you could customize the mat-chip element like the following, FYI, I tested this with Angular Material v15 which has mat-chip-listbox instead of mat-chip-list:
component template HTML
<mat-chip-listbox>
<mat-chip [disableRipple]="true">Public</mat-chip>
<mat-chip [disableRipple]="true">Private</mat-chip>
<mat-chip [disableRipple]="true">Confidential</mat-chip>
</mat-chip-listbox>
component .scss styles
mat-chip {
pointer-events: none; // maybe use it along with !important
&:hover {
background-color: unset; // maybe use it along with !important
}
}
Or .css:
mat-chip {
pointer-events: none;
}
mat-chip:hover {
background-color: unset;
}
Two options
use <mat-chip>
use disabled with css
<mat-chip-set aria-label="Fish selection">
<mat-chip>Two fish</mat-chip>
<mat-chip-option disabled class='chip'>Warn fish</mat-chip-option>
</mat-chip-set>
Here is the code example
Related
I want to change the dropdown theme to dark grey like attached image
"i want to apply the theme on the right"
i tried to change it direct from the component but nothing changed
ibm-dropdown{
.bx--dropdown {
background-color: $gray-100 !important;
color: #fff;
}
}
On the Angular Material components overview there's an example of slide toogles with icons:
This looks really nice. Unfortunately this example isn't explained in the actual docs of the component.
So what I tried is this:
<mat-slide-toggle labelPosition="before" color="primary">
<mat-icon>dark_mode</mat-icon>
Dark Mode
</mat-slide-toggle>
I have this wrapped inside a menu and the result looks like this:
So it's almost there, but not really. Everything is not aligned correctly.
My questions are:
How to align the icon, label and toggle correctly?
How is it possible to increase the distance between label and toggle like in the examples from the docs?
Try it on Stackblitz
You can modify the generated CSS in the app.component.css file:
:host ::ng-deep .mat-slide-toggle-content {
display: flex; /* Turn into a flexbox container for alignment */
}
.material-icons {
margin-right: 5px; /* Spacing from the content */
}
:host ::ng-deep .mat-slide-toggle-label-before .mat-slide-toggle-bar {
margin-left: 50px; /* Spacing from the icon and content */
}
It could have been enough to add .mat-slide-toggle-content or .mat-slide-toggle-label-before .mat-slide-toggle-bar but for some reason it was not working. The solution here came handy although it looks unorthodox: CSS style from app.component.css not getting applied to the tabs body content
You can see the full code here: StackBlitz Demo
Using Vuetify.js v-stepper component, I can change the color of v-stepper-step using the color prop:
<v-stepper-step :complete="e1 > 2" color="red" step="2">Name of step 2</v-stepper-step>
This works fine when I am using Vuetify in Nuxt.js and launch the server locally. But I noticed when I deploy my application on Gitlab, the color prop does not take effect and inspecting the element in question simply shows an empty style:
element.style {
}
That is why I tried to use a class instead:
<v-stepper-step :complete="e1 > 1" step="1" class="step-number">Name of step 1</v-stepper-step>
Here is that CSS class:
.step-number {
background-color: yellow;
color: red;
}
I do this in the hope to action the color prop from within a CSS class and deploy again on Gitlab to see the output, however this does not work even locally.
How to overcome this issue?
Codepen.
CSS color property is used to style text. It's different than vue property color.
You can use (demo):
.step-number > .v-stepper__step__step{
background-color: red !important;
border-color: red !important;
}
i am using jquery-ui dialog in my application. now i want to customize the signin/sinup dialog i.e. jquery-ui dialog. without customization dialogs are looking like:
but when i made following changes to login.jsp page that too in style it is changing all the dialogs of application that i don't want to happen but only signin/signup dialog. CSS code is:
.ui-widget-header {
background: #343434 !important;
border: none
}
.ui-dialog-titlebar-close{
background: #1C1C1C !important;
}
.ui-dialog {
background: #343434 !important;
border: thin 1px;
}
and js code for this signin dialog (id="signinDialog") is:
$(document).ready(function() {
$("#signinDialog").dialog({
width : 600,
resizable : false,
modal : true,
autoOpen : false,
position : ['top', 157]
});
function openLoginPopup() {
$("#signinDialog").dialog("open");
}
after these changes i am getting signin/signup dialog the way i want but the problem is this is changing jquery-ui dialog css for all application and looking like this:
I have been stuck in this issue from morning and tried lot of ways to resolve, like
this but all fell flat. Atlast i have to ask this.
I want all dialogs remain same except signin/signup dialog after customization.
Using a CSS selector for your particular dialog's ID, as EasyPush suggests, isn't going to work because your content becomes the child of the dialog element in the DOM. Since CSS doesn't have parent selectors (see CSS selector for "foo that contains bar"?), there would be no way I can see to use pure CSS. Instead, you'll need to use javascript.
Using jQuery for the close button, for instance:
$("#signinDialog").parent().find(".ui-dialog-titlebar-close").css("background","#1C1C1C");
Unfortunately, applying the "!important" rule to CSS via jQuery is a little tricky. You may instead prefer to apply a class and then style that class in CSS with "!important." Something like:
$("#signinDialog").parent().find(".ui-dialog-titlebar-close").addClass("mySpecialClass");
Along with a css rule:
.mySpecialClass{
background: #1C1C1C !important;
}
If i'm not misunderstanding you it seems you are indeed changing the layout of all dialogues. This because the selector ".ui-dialog" will match all dialogues in your application.
If you only want to specifically style your signin dialog, you need to specifically select only these elements. You should be able to do this as follows:
#signinDialog.ui-dialog {
background: #343434 !important;
border: none
}
#signinDialog .ui-dialog-titlebar-close{
background: #1C1C1C !important;
}
#signinDialog .ui-dialog {
background: #343434 !important;
border: thin 1px;
}
jQuery UI comes with some good icons.
How can I use them without buttons? Let's say how to create link with plus sign and to react on hover and click by changing icons?
Here is the demo just with icon added.
Upd 1:
On hover icon should change the color from grey to black (please see it here). In my demo it is black from the beginning.
Upd 2:
Here is almost what I need - http://jsfiddle.net/and7ey/gZQzt/6/ - but without that background rectangle, I need just plus sign.
Upd 3:
Looks like it would be better not to use standard jQuery UI styles, but to refer directly to the images, but I don't know how use it.
Seems I need to define CSS like:
width: 16px;
height: 16px;
background-image: url(images/ui-icons_222222_256x240.png);
background-position: -32px -128px;
Positions can be easily found at jquery.ui.theme.css file.
But how should I:
define correct background-image url?
modify CSS to react on click, hover?
You can use the icons with any element by adding the ui-icon and the appropriate class for the icon you want to the element.
If you want to add text to the link as well as an icon you'll need to set the icon on a separate element from the text. For example:
<span class="ui-icon ui-icon-plusthick"></span><span>Text Here</span>
To change the icon on hover, you'll need to use some javascript. The following requires jQuery:
$(".MySelector").hover(function() {
$(this).removeClass("ui-icon-plusthick").addClass("ui-icon-minusthick");
}, function() {
$(this).removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick");
});
This is not "good", but at least this works.
Please specify your question further, what should happen on click and hover.
Sample
http://jsfiddle.net/gZQzt/2/
HTML
<a href="#" class="img-link">
<span class="ui-icon ui-icon-plusthick" style="display:inline-block;"></span>
<span class="link-text">Link</span>
</a>
CSS
.img-link {
text-decoration: none;
}
.link-text {
text-decoration: underline;
}
Try this:
<a>
<span class="ui-icon ui-icon-plusthick"></span>
</a>
and:
$('a').hover(function(){$(this).toggleClass('ui-state-highlight')});
You can see it here: http://jsfiddle.net/gZQzt/4/
Since I can't reply to answers yet, here's what I did using Kyle Traubermann's code:
<div class="ui-state-default" style="background: none; border: none;"><span class="ui-icon ui-icon-circle-tick"></span></div>
Basically, you have to put the state in a separate div. This changes the image to the right colour but it also adds a border and gloss to it so I had to disable that with nones. You might need a color: none; in there as well.
There's probably a simpler way to do this but I don't really know much about CSS yet.
Finally, I've decided just to use jQuery UI's image files - How to use one icon from different image files?:
a:link,a:visited { /* for regular non-hovered, non-active link styles */
width: 16px;
height: 16px;
background-image:
url(images/defaultStateImage.png);
background-position: -32px -128px;
}
a:hover { /* for hover/mouse-over styles */
url(images/hoverStateImage.png);
background-position: -32px -128px;
}
a:active { /* for click/mouse-down state styles */
url(images/clickStateImage.png);
background-position: -32px -128px;
}
UI icon as anchor (no text):
Works for me:
<span class="ui-state-default ui-corner-all ui-icon ui-icon-extlink"></span>
Relevant: order of ui class names.