I'm going through Angular Material Design Gridlist and they have not mentioned anything about handling hover/click on the grids.
So, is there a way to do it or should I use buttons inside each grid to handle click events ?
For anyone coming across this using material-ui, you can use the onClick attribute to the same effect.
You could just add a ng-click="foo(bar)" to the <md-grid-tile> element:
http://codepen.io/anon/pen/pJggEb
Why not just add the ng-click event to the grid-list. See:
codepen example
(click yellow)
Just giving 1 more option for this to work:
Angular Bottom Sheet. Here click on the 'Show as Grid' to see clickable grid items.
Related
Is there any component similar to ext.window in react?
I checked bootstrap/material ui and the closest thing to a window are modals, but I would like to find something resizable and draggable.
You can try specific components that do this, like react-rnd.
See the demo, you can both resize and drag the created component.
Here, you have a live example in codesandbox.
What you need is a draggable modal with React implementation:
Bootstrap draggable modal
https://gist.github.com/burgalon/870a68de68c5ed15c416fab63589d503
Material UI draggable modal
https://codesandbox.io/s/nnq98zlrrl
I've been using Material-Ui for a while.
There's a standard modal and dialog (like a modal but with default template for easier customization)
Isn't modal (dialog) sufficient for the job that you want?
I am use UI Grid to draw a table.
Here is UI Grid offical webiste:
http://ui-grid.info/docs/#/tutorial/215_treeView
Now, I want to switch collapse icon and selectAll icon.
By default UI Grid, the collapse is first element, selectAll Icon is second element.
I want to switch of them.
Here is the sample
http://embed.plnkr.co/DODIxKaQ5nrqNO9eUObe/
Anyone can help with this ? Thanks a lot.
I don't believe it's possible, yet... you might want to add your vote here...
https://github.com/angular-ui/ui-grid/issues/4862
I just added my two cents worth.
Using ExtJS5 I want my toolbar buttons to look like the normal ExtJS buttons. In the documentation I see the CSS Mixins but I am not putting things together. Can someone give me a kick in the right direction? Thanks.
Use defaultButtonUI in your toolbar:
defaultButtonUI : 'default'
See documentation of defaultButtonUI:
A default ui to use for Button items. This is a quick and simple way
to change the look of all child Buttons.
If there is no value for defaultButtonUI, the button's ui value will
get -toolbar appended so the Button has a different look when it's a
child of a Toolbar.
See https://fiddle.sencha.com/#fiddle/jpo
I've been fiddling with Angular-Material and it does seem pretty slick. One of the issues though, that we're having is the lack of the ability to close a tab using an 'X' button next to the tab's label. This is similar to what any browser tab UI will have to offer.
In the current UI framework we use (Angular Bootstrap UI) you could define the rendering of the tab header to add such a button.
Any ideas on how to implement it with Material's md-tab directive?
Thanks.
The docs at: https://material.angularjs.org/#/api/material.components.tabs/directive/mdTab
Say:
If the label attribute is not specified, then an optional
tag can be used to specify more complex tab header
markup. If neither the label nor the md-tab-label are specified, then
the nested markup of the is used as the tab header markup.
Why not define your in a tag?
I'm using extjs 4.0.7 library. I have created UI as follows.
Landing page is a panel with border-layout.its north region have a panel with id: 'filterPanel'. This panel have a 'multiselect' component. Center region of landing page a tab panel, each panel having a grid.
Landing page has a listener, afterrender, on this listener I made filterPanel as collapsed by using Ext.getCmp('filterPanel').collapse().
The issue is, system not showing vertical scroll-bar when I expand 'filterPanel'.
If I remove panel collapse code from listener, scroll-bar is displaying.
Our requirement is filterPanel should be collapsed while rendering the UI, that's why I tried to collapse filter panel on landing-page afterrender listener.
Is this approach correct?
Regards,
Ajil
I got a work around for this issue. The steps which i followed is given below,
Add an expand listener for the panel here its 'filterPanel'
Remove all element from multiselect component store.
Reload multiselect store.
I'm sure its not a good fix , but time being its work for me.
Thank you all.