I have an Angular Material application.
The application has a button to click. I want it to look nice so I make it <button mat-button>Hello Button</button>.
Now I want to make the button show up in the "accent" color of my theme so I change it to <button mat-button color="accent">Button</button>. Works great.
Now I want to make the button show up as a slightly darker version of the "accent" color so I change it to <button color="accent A600">Slightly Darker Button</button>. No, that's definitely not it.
I read around Stack Overflow a bit and try some things and find that I can create a CSS class and apply that class to my button, but there's not really a way to say "make this my theme's accent color but a bit darker." It's just straight up hardcoding a color value.
As far as I can tell, Angular Material has "palettes" that I can't access in any meaningful way.
My question: Is it really true that button colors in Angular Material can only be "primary" or "accent" or "warn" or bypass the palette system altogether? What do I have to do to access the various lighter and darker shades on the palettes?
Or more directly, what goes in the [color] attribute? <button mat-button [color]="what-goes-here?">Slightly Darker Button</button>?
I think the easiest thing to change button color is to make something like this:
Inside your HTML:
<button mat-raised-button color="something">Click on me</button>
color="something" will generate a class then you will be able to make this in CSS:
.mat-success{
color: yellow;
background: purple;
}
Related
I would like to make custom SVG Icons by layering two or more existing material-ui icons together. For example, add a "+" icon layered over the top of another icon to indicate "Add ".
For example, if I want to make something similar to the AddAPhoto icon, but I'm adding a store, I would like to layer the "Add" icon on top of the "Storefront" icon.
I can't seem to find any documentation or examples of this, but I swear I've seen it done in the past. (It may have been Font Awesome)
Edit:
After playing around with things for a while I'm getting close. This gives me what I'm after, except the "Add" icon needs to have an opaque background to cover up what's under it.
import SvgIcon from "#material-ui/core/SvgIcon";
import StorefrontIcon from "#material-ui/icons/Storefront";
import AddIcon from "#material-ui/icons/Add";
<SvgIcon color="action" style={{height: 200, width: 200}}>
<AddIcon color="secondary" viewBox="0 0 50 50" />
<StorefrontIcon/>
</SvgIcon>
I'm attempting to move from font icons (icomoon.io) to SVG sprites. Is it possible to use SVG sprites without needing < svg > markup for each icon instance?
What I really liked about the font icons was that I didn't have to clutter my HTML with any additional elements to get the icon to display. I usually just targeted a simple class on whatever element I wanted the icon to display and then used pseudo selectors to display the icon, e.g.:
<h1 class="news">News</h1>
h1.user:before {
font-family: 'icons';
content: '\news';
}
That made a lot of sense to me, and all of my icons were easily managed almost completely in CSS. I rarely had to touch my HTML as long as my markup contained appropriate classes.
I've since switched my build system to Grunt and thought I'd give SVG sprites a try. Almost every1 article2 I3 can4 find5 on the subject says you need to add an additional SVG element to your markup wherever you want each instance to display, e.g.:
<h1>
<svg class="icon">
<use xlink:href="#icon-news">
</svg>
News
</h1>
That seems like a step backwards to me, at least in the management of markup. To me, an icon is usually presentation that should be separate from document structure. Are we doing it this way simply because of the state of SVG support in browsers?
Ideally, I'd love to be able to do something like this:
<h1 class="news">News</h1>
h1.news:before {
display: inline-block;
width: px;
height: px;
background: url(icons.svg#news) no-repeat;
}
This post seems to be closer to what I'm looking for, but I'm not sure of browser support and how to do it automatically in a build system like Grunt.
SVGs can be loaded as files exactly the same way as other images using <img> tags or CSS background, and can be used as sprites exactly the same way too. The only difference is that you have to specify the size you want it (because it's scalable, so the browser doesn't automatically know how big it is like it does with PNGs).
Depending on how you want to use the image, loading them this way may or may not be suitable as some SVG features aren't available, but it can be done.
I'm trying to get a bottom tab bar in Xpages Mobile controls. It's typically black with dark icons and the page changes has you press an icon.
I couldn't figure out how to get the look and feel with the actual Mobile Controls Tab bar. That seems geared for segmentedTabBar rather then I guess standard Tab bar. I tried to access Dojo manually with the code below and I got the look and feel but the tab bar is showing at the top and not the bottom of the screen.
I'd rather use the mobile controls version but regardless I'm easy. I'd love to get a bottom tab bar working in XPages.
Any advice would be appreciated.
<xe:singlePageApp id="singlePageApp1" selectedPageName="home">
<xe:appPage id="appPage1" pageName="home">
<ul data-dojo-type="dojox.mobile.TabBar" fixed="bottom">
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"/Add_32x32.png",
selected:true'>
Featured
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"/1_48x48.png"'>
Categories
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"1_48x48.png"'>
Top 25
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"Add_32x32.png"'>
Search
</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='icon1:"1_48x48.png"'>
Updates
</li>
</ul>
</xe:appPage></xe:singlePageApp></xp:view>
Look in the Extension Library book from IBM Press on page 295. This chapter on Tab Bar contains an example of an action bar at the bottom of the screen:
<xe:tabBar id="tabBar1">
<xe:tabBarButton id="tabBarButton1" label="Button 1"></xe:tabBarButton>
<xe:tabBarButton id="tabBarButton2" label="Button 2"></xe:tabBarButton>
<xe:tabBarButton id="tabBarButton3" label="Button 3"></xe:tabBarButton>
</xe:tabBar>
It appears only to be a segmented tab bar if you use barType="segmentedControl".
I am trying to accomplish the same thing myself. I suspect the issue is caused because the XPages Mobile Controls do not yet support a Mobile Scrollable Pane which would allow for the positioning of fixed size (scrollable) content between the header and the footer. The css will most likely used absolute positioning of the tab bar to prevent it scrolling with the content. But when that has been accomplished you are going to need to implement some form of scrollable pane t stop the main content from scrolling over/under the toolbar.
The following CSS works "most" of the time but I found it is sometimes reluctant to snap into the correct location.
.rpTabBar {
position: fixed;
bottom: 0;
width: 100%;
z-index: 999;
height: 50px;
margin-top: -50px;
clear: both;
}
After looking at the dojo examples I have noticed the examples of the navbar remaining fixed at the bottom use the scrollableView control. The XPages appPage control is based on the standard view control. All of those examples seem to have the navBar float at the base of the content. After trying for a few weeks, I can see why. It seems next to impossible to get the navBar to stick to the bottom when using this control.
We haven't found a way yet to implement scrollableView without throwing away all the Xpages mobile controls. Instead we created a div inside each appPage that implements the dojo scrollablePane. Using this we can provide control ids for a fixed header and a fixed footer. And the navBar now sticks nicely at the bottom of every page.
I have activated the extended menu via the Screen Options and in my menu item I have specified a class based on the css code added to the screeen.css file.
For example in the "Home" menu item I have specified a class of "red", and in the css I have added the following code.
.red { color: #FF0000}
Unfortunately this is not transposing to the template and I am not sure what I am doing wrong.
Checking this with firebug I notice the class is being added, however the color change is not appearing.
<li id="menu-item-154" class="red menu-item menu-item-type-post_type menu-item-
object-page current-menu-item page_item page-item-148 current_page_item menu-
item-154"> Home
Can anyone offer some suggestions to make this work?
The color might be specified in one of the other classes as well.
You can try to remove that or you can try to force the color via the CSS important attribute.
Try:
.red { color: #FF0000 !important;}
I'm trying to wrap my head around CSS positioning guidelines. I'm trying to figure out how to make a sticky footer but have it stop being sticky when the main content area can no longer be condensed. An example of what I'm talking about can be found here http://ryanfait.com/sticky-footer/. Can someone explain to me why the footer stops being sticky and particularly what CSS properties cause this to occur? For me, as I look at the CSS it looks like the footer should just stay sticky to the bottom of the browser window always, but this isn't the case here. Why?
Thanks for the help.
Give this one a try.
http://www.cssstickyfooter.com/ (link no longer valid)
It is similar to Ryan's one but, from memory, I think I've had better luck with this (although both are very similar).
You have to declare the footer outside of the wrapper and give some height for footer and margin-top should -(footer-height)px
<div id="wrapper">
---
------
</div>
<div id="footer">
</div>
# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}
Here's a brief summary of a layout I use fairly consistently as a basis for projects that require a sticky footer. Not sure where I initially got all the code from but it was pieced together over quite a while.
http://jsfiddle.net/biznuge/thbuf/8/
You should be able to see from the fiddle that you require a '#container' element which will wrap the whole of the page. this gives you 100% height (note the hacks for ie present in the css), and allows and child elements of this 'container' element to derive a height, or position relative to it.
Pitfalls of this method are:
You need to provide some padding/margin at the bottom of the '#main'
element so that the footer is displaced further than it naturally
would, so need to know at least a broad range of what your footer
height should be.
IE doesn't seem (<=IE8 not tested 9) to recognize browser resize
events if you only resize the bottom edge of the browser, so in
that particular case the stickiness would fail, until a horizontal
resize was also presented as an event.
if you want a fixed width to the layout you should place this
constraint not on the '#container' element, but on the '#page'
element, and perhaps introduce extra elements beneath '#footer' to
provide any width constraints there.
Good Luck!