I am using ng2-material library (built on top of angular2). The documentation and demos are clearly out dated and not updated as per the new angular 2 release. However, having made the necessary adjustments so far, I want a menu icon inside a button which is located on the toolbar of the page. I am able to load the material icon of menu, but still cannot give it a button-icon styling. This is how I am doing it:
<button md-button class="md-icon-button" aria-label="Settings">
<i class="mdclass-dark material-icons" md-icon >menu</i>
</button>
This is giving the menu icon the styling, that of a button, rather than that of an md-icon.. Can someone please let me know how to do that?
use md-icon-button directive instead of md-button.
and you can also use <md-icon> element instead of <i> to display material icons.
<button md-icon-button aria-label="Settings">
<md-icon>menu</md-icon>
</button>
Related
My goal is to change a font-awesome icon for list items displayed with Vue on mouse hover. Basically, I want to recreate this functionality with Vue.js.
I know there are plenty of ways to do this with css and js, and have even included how to do it using pure css in the link above, but I'm curious if I can do this using vue alone.
Here's the code generating the list of data displayed:
<div id="file-content" class="hover file-row-container fr-open-dir"
v-on:click="SetSelected(dirObj.id)"
v-for="dirObj in displayedFolders">
<div class="file-row">
<div class="file-row-icon">
<i class="fa fa-folder-o" aria-hidden="true"></i>
</div>
<span class="file-row-text hover-ul">
{{dirObj.name}}
</span>
</div>
</div>
css is the best option here. Yes you can but I do not recommend. Because it's not optimal for your operation.
You can use #mouseover and #mouseleave event for handle this
I am trying to create material icon clickable however getting linting error
Visible, non-interactive elements should not have mouse or keyboard event listeners jsx-a11y/no-static-element-interactions
Below is the syntax I am using
<i className="material-icons control-arrow" onClick={this.sideNav} >arrow_back</i>
Please suggest me how can I achieve this without changing the element.
Just add a role, for example button:
<i
className="material-icons control-arrow"
onClick={this.sideNav}
role="button">
arrow_back
</i>
more info in the jsx-a11y/no-static-element-interactions docs
My question is about Gentelella Alela template
In this HTML page, there is an icon with class="fa fa-chevron-up" that displays an icon to close the panel (See HTML code at line: 294). When the panel is closed, another icon image should appear to re-open the panel again but I can't find it in the HTML page.
its a CSS you will not found it in your HTML
but you can reach the style at this file:
[url..]/assest/template/vendors/font-awesome/css/font-awesome.min.css
The "magic" is somewhere in the custom(.min).js
$(".collapse-link").on("click",function(){
...
t.toggleClass("fa-chevron-up fa-chevron-down")
there is a click handler that changes the class from fa-chevron-up to fa-chevron-down and back again every time you click.
Thank you guys for your help.
In fact, I did a big mistake! I changed the "fa fa-chevron-up" icon to a Bootstrap glyphicon (in HTML line 249)! In fact, if you change that icon name in HTML to a "Bootstrap glyphicon" the provided javascript will not display the "fa-chevron-down" icon!
Thank you.
I'm implementing a function such that when you hover a link it will show a tooltip.
Here is an example:
Is there any other javascript library that implements this functionality?(preferably the same one as the image)
If you are using Bootstrap you have Popover.js available
//JS
$(function () {
$('[data-toggle="popover"]').popover()
})
//HTML
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">
Click to toggle popover
</button>
You can change the trigger value for the Popover to be a hover also.
Second option for Bootstrap is Tooltip although it does not look like your example.
Also jQuery UI has it's own version of Tooltip
Also recommend you to see on hint.css - Pure css hint library
This might help.
You can do it with help of css or title in any tag in HTML.
http://webdesign.tutsplus.com/articles/quick-tip-tooltips-courtesy-of-html5-data-attributes--webdesign-4826
I would like to disable the click event that opens the accordion if I click anywhere on the heading.Instead I would like to click only on the right most symbol....
Here it's opening if I click on the Save button..
<accordion-group is-open="status.open" template-url="accordion-group.html">
<accordion-heading>
I can have markup, too! <button type="button">Save</button> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
Here's the plunker..
link
in your html file i modified:
<accordion close-others="oneAtATime">
<accordion-group style="pointer-events:none !important;" is-open="status.open" template-url="accordion-group.html">
<accordion-heading style="pointer-events:none !important;">
I can have markup, too! <button style="pointer-events:none !important;" type="button">Save</button> <i class="pull-right glyphicon" style="pointer-events:auto !important;" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
</accordion>
You should add css property: "pointer-events: none !important" on elements which you won't to react on mouse click event, and set "pointer-events: auto !important" on your icon indicator only. The accordion should be opened only when you click on the arrow icon. That should work :)
To make your solution more elegant you can make CSS classes like:
.disable-click-event {
pointer-events: none !important;
}
.enable-click-event {
pointer-events: auto !important;
}
There's also an option that prevents event bubbling ($event.stopPropagation()) but in this case i dont know where exactly event is invoked so it needs hard investigation to find it out.
One more hint: if any problem can be solve with CSS instead of JS it's completly worth to do it :) JavaScript events are not so easy to debug, so CSS fix will be much faster to find than dirty bug with event bubbling. I can recommend you to use simple CSS solutions with a clear conscience :) cheers