I wonder, would it be possible to reuse the Material Design CSS ripple effect on other HTML element than button, for example a div? Or would it be easier to create own ripple effect in CSS?
Material Design provides a ripple component out of the box, it can be used like this:
In .ts file:
import {MatRippleModule} from '#angular/material/core';
In view:
<div matRipple [matRippleColor]="myColor">
<ng-content></ng-content>
</div>
Examples and more information about the component can be found here: https://material.angular.io/components/ripple/overview
Related
I've been trying to read the documentation, but I don't get it. There doesn't seem to be any stackoverflow questions too. Right now using Polymer v1.0 with MVC 5.
For example, let's take the paper-toolbar. I have this sample code:
<paper-toolbar>
<paper-icon-button icon="menu"></paper-icon-button>
<span class="title">My Title</span>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="add">+</paper-icon-button>
</paper-toolbar>
How do I apply a white background to it?
In the polymer website:
I've seen that there are custom properties and mixins... but how do I use them?
For example, how would I override the "--paper-toolbar-background"? to make the background white?
Thanks!
The approach I recommend is having an element for styling purposes, for example an app-theme.html. Put it inside your elements directory and import it.
If your app-theme.html looks like the following, it should style your paper-toolbar properly:
<style is="custom-style">
paper-toolbar {
--paper-toolbar-background: var(--paper-blue-900);
}
</style>
I use this approach for the Paper elements. For custom elements I put the styling inside each element.
Though theoretically you could just take my above code and paste it just before you use the element, but this approach has the issue that the default styling is applied before, resulting in breaks.
Of course you could also just use a normal app.css file to style the paper elements, but then you would have to use the !important attribute to overwrite the default styling of the element. Don't recommend it though.
Hope it helps.
George
I'm trying to apply jQuery UI Selectable to a portion of my website. However, I do not see either the selection box while dragging the mouse, nor does the color of selected li elements change.
So to understand the problem, I went back to the source:
http://jqueryui.com/demos/selectable/
I see (using IE9 developer tools) that a style .ui-selected is applied to selected elements. Using Trace Styles, IE shows that background-color is originally defined in jquery-ui.css but overridden (ultimately) by #selectable .ui-selected. However, IE does not show the source of #selectable .ui-selected. Searching the jQuery UI style sheet I reference, jquery-ui-1.8.18.custom.css, finds no mention of ui-selected, nor do I find it in jquery.ui.selectable.css.
Where exactly is the demo page getting the CSS for the background color?
I found one of the other jQueryUI demos defines the style for those classes in a custom style sheet, so I ended up following that lead.
http://jqueryui.com/demos/selectable/#serialize
It seems odd that those styles are not part of jQueryUI Themeroller. Perhaps that will change in the future.
I'm using a jQuery UI Theme, which is predominantly white text on a black background. I'm using a <fieldset> with a <legend> and the text of the latter is being display in black on a black background (black being the browser's default font colour).
I've tried applying various jQuery UI Theme CSS classes to the legend (e.g. "ui-widget-content"), but I get too much extra baggage, such as borders and backgrounds, when I just want the text to be white.
Before anyone says "why don't you just make the text white?", I should state that I have switchable themes, so it has to get the colour from the theme's stylesheet.
I know that I can use jQuery to apply the CSS class to all legends, when I know which one I want, thus:
$("legend").addClass("???");
Any help would be greatly appreciated.
I solved the problem by using jQuery to set the <legend> colour to be the same as that of an element with a CSS class of ui-widget-content.
$("legend").css("color", $(".ui-widget-content").css("color"));
Obviously, this depends on there actually being an element with that class present. For my purposes, I know there always will be.
I was wondering - is it possible to apply the jQuery UI CSS to an entire site without having to apply it individually upon elements?
So, for example, instead of having to do:
<input type="button" value="Submit" class="ui-state-default ui-corner-all" />
to all my buttons, I instead have some sort of class applied at at top-level DIV which will change the entire site whenever it can be (any element that jQuery UI can handle). If it's not possible, it's no big deal, but it would be great if it is.
Yes. You can just call
$('button').button()
from your script to select all button elements using jQuery and apply the jQuery UI button theming to them. See, for example, the sample code on the jQuery UI button demo.
I suppose you could apply it on the $(document).ready(function(){$("*").addClass("ui-state-default")});
This is not tested, so don't take my word for it.
I'm learning about the Framework Icons in jQuery UI.
<span class="ui-icon ui-icon-circle-minus"></span>
produces an icon of a minus sign inside a circle.
Using the ThemeRoller Firefox Bookmarklet, I was able to change the color of the icon to red (to make it look like a delete button).
Q: How can I make one jQueryUI icon be red and another one another color?
<span class="ui-icon ui-icon-circle-plus"></span>
I'd like to make this one green.
Use the ui-state-... classes to change the state of the element with the icon. You'll need to design your theme so that items in different states (highlight,hover,active,error,default) have different colors.
<span class="ui-icon ui-icon-circle-plus ui-state-highlight"></span>
I would recommend against using the states this way (just to change colors, that is). I'd use the states semantically and let the icons render as needed to be consistent with the state. If I specifically needed red/green icons, I'd generate those icons specifically as images and simply use them directly instead of trying to design the theme to get different color choices just for those icons.
For what it's worth, I think the FamFamFam Silk icons integrate pretty well with jQuery UI.
You can't do this, at least not in the context of ThemeRoller. Themeroller uses one sprite image for this...a large image that contains all the Icons.
You can make another theme, same it's spritemap image to your images folder, and go into your jQuery UI CSS and change the .ui-icon-circle-plus background-image property.
It should look like this:
.ui-icon-circle-plus { background-position: 0 -192px; }
It would need to look something like this:
.ui-icon-circle-plus {
background-image: url(RedIcons.png);
background-position: 0 -192px;
}
You can look at the .ui-icon styles for the image it's currently using.