I want to set one word in a sentence to have md-primary color, and another word to have the accent color. I assumed something like this:
<div>
Hello <span class="md-primary">friend</span>.
How are <span class="md-accent">you</span>?
</div>
But those classes work only for some specified components.
What's the way to do it?
I was just able to do this using Angular Material 1.1.0.
You use the md-colors directive similar to how you would ng-class:
<span md-colors="{color:'primary'}">...</span>
The above code will color the text the primary color. The object that you pass to md-colors uses the key as the css property (i.e. 'color', 'background', etc) and the value as the theme and/or palette and/or hue you want to use.
Source Docs
Angular Material's docs explicitly enumerate list of components, which you able to differentiate with md-theme attribute:
md-button
md-checkbox
md-progress-circular
md-progress-linear
md-radio-button
md-slider
md-switch
md-tabs
md-text-float
md-toolbar
From Angular Material documentation, under Theming / Declarative Syntax.
So I think the short answer is: you can't do it.
EDITED 2015/07/23
TitForTat's comment has better solution
https://github.com/angular/material/issues/1269#issuecomment-121303016
I created a module:
(function () {
"use strict";
angular
.module('custiom.material', ['material.core'])
.directive('cMdThemeFg', ["$mdTheming", function ($mdTheming) {
return {
restrict: 'A',
link: postLink
};
function postLink(scope, element, attr) {
$mdTheming(element);
element.addClass('c-md-fg');
}
}])
.directive('cMdThemeBg', ["$mdTheming", function ($mdTheming) {
return {
restrict: 'A',
link: postLink
};
function postLink(scope, element, attr) {
$mdTheming(element);
element.addClass('c-md-bg');
}
}]);
})();
and then append
.c-md-fg.md-THEME_NAME-theme.md-primary { color: '{{primary-color}}'; }
.c-md-fg.md-THEME_NAME-theme.md-accent { color: '{{accent-color}}'; }
.c-md-fg.md-THEME_NAME-theme.md-warn { color: '{{warn-color}}'; }
.c-md-bg.md-THEME_NAME-theme.md-primary { background-color: '{{primary-color}}'; }
.c-md-bg.md-THEME_NAME-theme.md-accent { background-color: '{{accent-color}}'; }
.c-md-bg.md-THEME_NAME-theme.md-warn { background-color: '{{warn-color}}'; }
into angular-material.js at 13783 line
angular.module("material.core").constant("...... HERE")
Then, I can simply apply c-md-theme-fg and/or c-md-theme-bg to element to apply theme colors. Like this:
<div c-md-theme-bg class="md-primary md-hue-3">dasdasdasd</div>
<span c-md-theme-bg class="md-primary">test</span>
It works.
ps: sorry about english, come from Taiwan :)
I think the only way is to create your own custom palette as demonstrated in the docs:
https://material.angularjs.org/latest/#/Theming/03_configuring_a_theme
under the paragraph Defining Custom Palette.
There you can define 'contrastDefaultColor' to be light or dark.
If I am correct, that should do it.
However, I want to use a standard palette and override the text color to light, not define a whole new palette.
You can also (and I would suggest this) extend an existing palette with 'extendPalette'. This way you wouldn't have to define all hue's but only set the 'contrastDefaultColor' accordingly.
*edit: just tested a solution
Add this to your config function (look for angular code example on link provided above about configuring theme)
var podsharkOrange;
podsharkOrange = $mdThemingProvider.extendPalette('orange', {
'600': '#689F38',
'contrastDefaultColor': 'light'
});
$mdThemingProvider.definePalette('podsharkOrange', podsharkOrange);
$mdThemingProvider.theme('default').primaryPalette('podsharkOrange', {
'default': '600'
});
I just set the 600 HUE to a green color to verify if the theme change works, so you can ignore that line in the extendPalette.
So this only changed the colour to light, not a specific colour. So it didn't answer your question, but might still come in handy.
The latests bits bring good news to this issue... This functionality has been added to the 1.1.0-rc3 (2016-04-13) version. It's not stable yet, but my first test on it are satisfactory.
Now you can use the mdColors directive and $mdColors service in conjunction with themes to achieve what you're looking for.
Please, take a look at:
https://github.com/angular/material/blob/master/CHANGELOG.md#110-rc3-2016-04-13
to see the announcement, and look for the mdColor directive and $mdColor service in the docs for some examples.
there is an issue in github that disccused this, like mentioned above
TitForTat's comment in that issue almost had the perfect solution,
but it doesn't work with costume palettes, i add a comment there with a
fixed solution, you can check it out:
https://github.com/angular/material/issues/1269#issuecomment-124859026
Anchor element () is reacting to the Angular Material current theme setting since version 1.0.0-rc1: https://github.com/angular/material/blob/master/CHANGELOG.md#110-rc1-2016-03-09.
This answer is outdated please check #factalspawn answer
With 'pure' angular-material you can't. But you can try usign this: https://gist.github.com/senthilprabhut/dd2147ebabc89bf223e7
For me i assume everything that starts with md- you can only apply theme colors to them.
In the documentation there are some components that are not documented where you can use theme colors.
Example:
<md-subheader class="md-warn"> my subheader </md-subheader>
<md-icon class="md-accent"> </md-icon>
Related
From the docusaurus docs, the navbar items can only have certain types like link, dropdown and search.
How do I add custom buttons like if I want to add login button ?
This would really depend on the type of functionality you're wanting to see out of the item you add to the navbar, but the development patterns should be similar across various implementations.
If you're trying to trigger something like a login modal when the user clicks your custom button, you could specify the following in docusaurus.config.js:
module.exports = {
themeConfig: {
navbar: {
items: [
{
href: '#login',
label: 'Login'
}
]
}
},
scripts: [
'https://yourdomain.com/customscript.js'
]
};
Then in a script, customscript.js, you could include the following:
document.querySelector('[href="#login"]')
.addEventListener('click', () => {
console.log('Login button clicked.');
});
Docusaurus requires that either href or to is given on each navbar item, so that's why I chose the weird selector, but if you wished, you could also specify className on the item, and then use that as a selector too. If you want the item to be something other than a link, you could set the outerHTML in your custom script or use replaceWith().
Keep in-mind that depending on the way your site's routing is configured, you may need to re-apply the logic in your custom script if the link node is re-written to the DOM by React.
As far as I know, there isn't really a perfect way to accomplish this at the moment, but v2 is also still in development, so the plugin exposures are getting better with each release.
The temporary workaround works well
https://github.com/facebook/docusaurus/issues/7227
I'm using the autocomplete editor of HOT, but needed to have my own template of the option-list. I've been able to accomplish that, by removing the default display and replacing it with my own while doing a lazy load of its content. But I need to perform specific tasks on each of the options being clicked.
The issue is that I cannot find a way to have my <a ng-click='doSomething()'> or <a onclick = 'doSomething()'> tags to find my "doSomething" function.
I've tried the extend prototype of the autocomplete instance, have put my function out there on my controller to no avail. Is there any way I can insert a delegate function inside this editor that could be triggered from inside my custom-made template? (Using angularjs, HOT version 0.34)
Dropdown options cannot interpret HTML instead of Headers.
To perform action when an option is selected you can use Handsontable callback : AfterChange or BeforeChange
Here you can find all HOT callbacks https://docs.handsontable.com/0.34.0/tutorial-using-callbacks.html
This JSFiddle can help you http://jsfiddle.net/fsvakoLa/
beforeChange: function(source, changes){
console.log(source, changes)
},
afterChange: function(source, changes){
console.log(source, changes);
if(!source) return;
if(source[0][1] == 0){//if ocurs on col 0
let newsource = optionsWBS[source[0][3]];
cols[1] = {
type : 'dropdown',
source: newsource,
strict: false
};
hot.updateSettings({columns: cols});
hot.render();
};
}
Thanks, I actually needed actions specific to each area being clicked. What I did to make it work was this: while inserting the items for the list, I created the element and bound it to the function right away: liElement = document.createElement('li') .... liElement.onclick = doSomething(){} .... got it working this way ..
Using the package, Angular-flash and having issues adding custom animations to the showing and hiding of an alert.
From the docs
If you want to use animations, include ngAnimate module. You can then
use regular Angular animation technique for applying your own
transitions.
.alert {...}
.alert.ng-enter, .alert.ng-enter.ng-enter-active {...}
.alert.ng-leave, .alert.ng-leave.ng-leave-active {...}
I feel like I've tried all possible combinations but struggle to get the in . out effects.
My HTML
<flash-message>
<div>{{ flash.text }}</div>
</flash-message>
<button ng-click="showFlash()">PRESS ME</button>
Controller
$scope.showFlash = function() {
var message = '<strong>Hello!</strong> ';
var id = Flash.create('info', message, 4000, false);
};
Just to test my CSS animation is working I just added an animation to the alert class. This provides the show animation only.
.alert {
animation: 1.5s zoomIn ease;
}
I need to be able to attach it to the "Alert Show Event" and then attach a zoom out to the "Alert Hide Event", allowing a specific show and hide effect.
I've tried these in multiple combinations but struggle to find what class to associate with the show / hide animations.
.alertIn,
.alertOut
.alert.ng-hide-add-active
.alert.ng-hide-remove-active
Thanks
I developed a flash message package and uploaded it in npmjs.com, i think the package will help you,
Package Name: Flash-Text
author: VamshiDureddy
Using Bootstrap and Angularjs I'd like to create a button that doesn't ever appear to be "active". I'd like the button to darken slightly when the mouse is over it, and I'd like it to darken further when it's clicked. When the mouse leaves the button, however, I'd like it to return to its original appearance.
Semantically, I'm using the button to "reset" part of my app. I want to execute some code when it's clicked. After it's been pressed, though, it doesn't make sense for the button to remain in a "depressed" state.
Here's a live example.
Any ideas?
Alternatively you could use the ng-mouseenter and ng-mosueleave directives.
For example:
<div ng-app="ButtonApp">
<div ng-controller="MainCtrl">
<button ng-class="buttonClass"
ng-mouseenter="onMouseEnter()"
ng-mouseleave="onMouseLeave()"> Click Me!
</div>
</div>
And in your controller:
var app = angular.module('ButtonApp',[]);
app.controller('MainCtrl', ['$scope',function($scope){
var defaultButtonClass = ['btn','btn-foxtrot'];
$scope.buttonClass = defaultButtonClass;
$scope.onMouseEnter = function(){
$scope.buttonClass = ['btn','btn-bravo'];
};
$scope.onMouseLeave = function() {
$scope.buttonClass = defaultButtonClass;
}
}]);
You can see my JSFiddle.
To generate the button colors you could use something like Beautiful Buttons for
Twitter Bootstrappers.
I'd give it another class, say btn-reset and add the following CSS.
// the order of these two is also important
.btn-reset:hover{
background-color: Dark !important;
}
.btn-reset:active{
background-color: Darkest !important;
}
// you need this to reset it after it's been clicked and released
.btn-reset:focus{
background-color: Normal !important;
}
It's working here http://plnkr.co/edit/QVChtJ8w70HXmyAaVY4A?p=preview
The issue is that the :focus pseudo class has a darker colour than the standard button so after it's been clicked it still has focus so still has the darker colour, if you want to stick with the standard colours you can just add a new selector for the :focus pseudo class.
The Problem:
I have an anchor tag with a class name 'hasChildren' which in turn has a span element containing the text. When using EXT's .on('mouseenter',function()) on the anchor tag, it fires the event on both the span and/or the anchor tag.
expected result:
hovering over either the span or the anchor tag, the class should be added to the anchor tag alone
current result:
hovering over either the span or the anchor tag, the class is added to the element which receives focus first.
As in the JS you'll see I tried the hover function but gives the same results.
The HTML:
<a class="hasChildren" href="#"><span>web 2.0</span></a>
The CSS:
.hasChildren {
display:block;
width:100px;
background-color:#333;
}
.hasChildren span {
background-color:#EEE;
display:block;
line-height:40px;
margin-left:10px;
padding:0 20px 10px 10px;
}
The JavaScript:
function over(e,t){
Ext.get(t).addClass('red');
}
function out(e,t){
Ext.get(t).removeClass('red');
}
Ext.onReady(function() {
//Ext.select('.hasChildren').hover(over,out,this);
Ext.select('.hasChildren').on('mouseenter',over);
Ext.select('.hasChildren').on('mouseleave',out);
});
FYI: I'm using ext-core-3.1.0 and I can get this working by using jQuery but as the lead developer requested that I only use extJS, I'd like to get this working without adding another javascript library.
Use this function of Ext.Element : addClassOnOver(). So, for your case, it will be:
Ext.onReady(function() {
Ext.select('.hasChildren').addClassOnOver('red');
});
It will automatically toggle the CSS class.
Try and surround your anchor tag in a div and then attach the listeners on the div. I think you want to try and attach the events to the outermost container in this case.
I eventually found what I was looking for. The javascript functions should change to look like this:
function over(e,t){
Ext.get(e.getTarget('a')).addClass('red');
}
function out(e,t){
Ext.get(e.getTarget('a')).removeClass('red');
}
The explanation: Previously I tried to add the class to 't' as in get(t), which rightfully could be either the parent or child element. But by using (e.getTarget('a')) I tell it to select the anchor tag and apply the class to that element alone.
This method gives one control over propagation, funny thing is the following could also work for the 'out' function and it would do exactly the same (in theory):
function out(e,t){
Ext.get(e.getTarget('span')).parent().removeClass('red');
}
Another thing I discovered: The Ext.onReady functions can also be written as:
Ext.select('.hasChildren').on( { mouseenter: { fn: over } } );
This way makes it easier to add more events to the target element(s)
Ext.select('.hasChildren').on( { mouseenter: { fn: over } }, { mouseleave: { fn: out } });