I'm trying to create a mat-accordion that has mat-expansion panels in for loop. The problem is, I need to do some customization like adding a checkbox in front of each expansion and the expansion icon should be placed after some specific text(in this case its book title). The alignments are a mess and as per my understanding, the expansion panels icon can be placed either at the end or beginning. As I think mat-expansion is the correct component to achieve the same. Need some guidance on how to achieve with mat-expansion or should I consider another approach?
Don't try re-styling the mat-accordion for such a huge changes - it was designed to strictly follow material guidelines. Instead, create your own component based on cdk-accordion - basically it's a mat-accordion without any styles, so it gives you much more flexibility.
You can read the official docs (including examples of implementation) here.
Related
I am in the process of setting up a website via Enjin's web hosting for a game server I run. I have an HTML module that will display a map of the island our game server takes place on, with a grid overlay already.
What I am trying to do (if possible), is to create a dynamic grid with css and html (javascript if needed) that overlays the grid of the image and highlights each cell as a user hovers over it, with a small pop-up with details on a specific coordinate (such as any bases, or other special information about a specific area)
I have tried looking around via google, but all searches come up with creating a grid out of multiple images (which is not what I am after), or using the area tag without much explanation on how to turn it into a fullout grid.
I am unfamiliar with how to approach this problem, and would like any input or advice if possible. Thanks!
NOTE: For those wishing to see the map in question I am using, to better help understand my question and assist me, please see here.
i want to create a side bar using polymers paper tabs i want them stacked up and down not left to right. is this possible? if not is there another tab system i can use that can. I do not want to use links in my tabs.
AFAIK, material design doesn't have a design for this...which is why you don't see this option on paper-tabs.
It would be cool if paper-tabs easily supported a vertical property or allowed you to easily set the flex-direction of the tabs. However, that would require some work. If you'd like to see this added, I'd suggest filing a feature request (https://github.com/Polymer/paper-tabs/issues/new) and see what the designers think.
paper-menu could be a alternative if features like the underline transition aren't necessary?
This seems like a simple enough question, yet I've spent 3 hours and found no information on how to do it. I purchased Ext JS 4, and I'm trying to get the "Locking Grid" to appear on one of my web pages. The grid will be very simple in the end, with no fancy ajax or anything, just a grid to display some info. I went through their quick start tutorial, and it simply tells you to paste some code into a javascript file, and include a ref to that javascript file in the header of your page.
Well, that does nothing. No grid appears. And why would it, I haven't told the grid where to appear. How do you tell the grid to appear in a particular div on my page, or to appear on my page at all?
Either use the renderTo config or use the render method. Be sure to read the notes for these, specifically that you should not use render/renderTo on items going inside a container, only top level components.
I am writing a custom application in C using GTK+2.0 and Cairo. Just for learning purposes (and if successful, then for deployment), I wish to recreate something similar to a overlay toolbar/widget (I am sorry if the terminology is not correct) that appears when a mouse moves over a given area on the window, and disappears when the mouse moves away. The toolbar, as I imagine, should appear on top of the existing widgets without displacing them or altering the widget packing in any way. Is it possible to accomplish? If yes, can you please point me to relevant tutorials/examples and/or outline a way to do the same?
Thanks in advance.
Not sure this is easily doable in GTK2. However, I learned recently that there's the GtkLayout widget which allows pixel exact rendering of widgets, so you can even display some widgets over others. Or you may implement your own container widget.
Please note that since GTK3, there's GtkOverlay which seem to do what you want.
You may also give a look to Clutter, which might allow this. Furthermore, there are projects of merging GTK and Clutter for GTK 4.
The little known GtkHandleBox is capable of doing what you want. I must warn you it is deprecated in GTK+3 because is going against the usual UI direction. Also, the correct positioning will be subject to the windows manager quirks, so I'd expect some issue in this regard.
The discussion on this answer to the question "How can I use Google's new imageless button?" Has prompted this question.
Google seems to think that going imageless is good for some reason, but from the comments cited, I fail to see the advantage. Is it worth it to send dozens of lines of HTML and who knows how much CSS to render these imageless buttons, rather than simply load another image, especially when techniques like CSS sprites are available?
When would this technique be preferred? The other question asks how it can be done, but I want to know why it should be done.
Localization (it's easier to translate text than images)
Skinning/themeing (it's easier to change the look and feel with single CSS than recreate multiple images)
Accessibility (screen readers can read properly, text scaling works properly)
Performance (the CSS is shared and so is loaded once from the server)
Functionality (it's easier to expand the button with new UX elements like dropdown arrow when you don't have to change the whole picture)
Btw, the "imageless" button might as well contain an image inside the visual template. This approach is quite similar to XAML's approach to templating and styling the visual tree.
I think in this specific case I can only see the advantage that the buttons can be programatically generated. If you don't know what your button will say it's probably easy to make this way than generating it using somekind of image library generator.
Also changing one CSS can make you change the look-and-feel of all buttons at once. Using image buttons you'll need to update everyone and each of images.
Isn't this done because the height of the button may vary (for example the text size)?
The page load is smoother as no images have to be loaded and will appear later than the rest
The button text is also readable in the case somebody cannot read/view images, yet you have the graphical look. (building a graphical button with images in the traditional way around real text is as complicated HTML as this method)
As they mentioned in their blog, these buttons are skinnable without creating and storing custom images.
Basically, you get all the advantages of plain text buttons over custom imaging, while still having a nice, skinnable graphical look.