I'm using the material design package for my application layout menu.
I have 2 menus items where I can't find an icon that fits, so I got 2 SVG files that I added to the project.
I want to use this as the material-list-item icon instead of a material-icon.
Is there a way to do this by either adding a custom icon to the material-icon library or replacing the icon in the list.
If yes, please I need a complete example as I am new to DartAngular, still trying to figure out some stuff.
There is a mixin for material-icon which will get allow you to change a material-icon into using an SVG. https://github.com/dart-lang/angular_components/blob/c6cb3d783e72ff1ed7974f18b7f169778c73d39b/angular_components/lib/material_icon/_mixins.scss#L49
There is indeed a mixin for this as pointed out in Ted Sander's answer, but for the moment it does not seem to work. I've asked this on Gitter but did not get an answer, and I also opened a ticket on Github for this seemingly broken feature.
It's a telltale sign that even the official Angular Components Gallery has a broken SVG icon example.
I'd suggest to implement this by using separate list item rendering for those that have an official material-icon representation and those that need a custom SVG image, and conditionally render them with the ngIf directive.
Related
I have found "Material Design Iconic Font" library which is similar to md-icon and allow to create a stacked icon:
http://zavoloklom.github.io/material-design-iconic-font/examples.html
But wasn't able to create a stacked icon combining angular material icons.
https://material.angularjs.org/latest/api/directive/mdIcon
I'm already using angular material icons in my project, and don't want to include another library just for stacked icon.
Is there any way/work around we can combine md-icons to create a stacked angular material icons?
I laso had this problem once, if you want to do that you will need to use CSS for that.
Create 2 icon tags, put them in a container tag, and give this container a class.
Now you need to use CSS to stack the icons.
(you might want to set the position of the 3 tags to relative so they stack easily).
I want to create a layout with a titled border just like in the Java application screenshot below:
Is it possible?
Does it have to be 100% like the image above? If not, you can try the Panel class with default (valo) theme, there's a sample with code at http://demo.vaadin.com/sampler/#ui/structure/panel
There is no layout which displays the same layout as you shown in image. However vaadin gives flexibility to play around its components look and feel. As #Jorge mentioned, you can have panel and then play around CSS to get the layout like you shown.
There is no ready to use layout like that in vaadin and even don't see the reason to have it one in core vaadin. if someone builds the add-on is different story.
I need to show custom data. For example I need to show a contact list with name, description, photo. And ideally I would also like to show custom data there, e.g. a button to launch telephone call. The default styles do not quite do what I want, but fairly close.
Thus, as far as I can tell, TListBox could be a decent control for this if I could create custom styles? Is that possible? (Anotther problem of course is setting the values of the custom data controls.)
You should take a good look at the FMX CustomListBox example AFAIK even the example alone already seems to have exactly what you need, already set in place.
It took me about 10 minutes to produce this result straight out of the CustomListBox example with your description:
One thing that the included FMX example demonstrates perfectly is how easy it is to add any FMX control to the ListBox via the TStyleBook Layouts such as buttons, images etc... basically any visual control upon which you then implement the HitTest, again, all very detailed in the FMX Delphi example.
Throughout the jQuery Mobile docs, they use a left-side menu for navigation that changes to a more mobile friendly version when the browser width is smaller. You can see an example on this page.
They use this layout throughout the docs, and I can see in the source that they use two divs with the IDs "content-primary" and "content-secondary." My question relates to the fact that I can't find anything about this structure actually discussed in the documentation. It seems very strange that they would not include such a useful widget in the Framework. Did they use custom code to make this, or did I miss it in the documentation somehow?
I'm frankly quite surprised to see how challenging it's been to find a left nav example that works consistently and as expected in JQM.
I wound up copying code directly from the JQM docs, including grabbing their custom .js and .css scripts (which defines the .content-primary and .content-secondary classes, as well as the various #media queries which make the menu responsive).
The JQM docs do not use the "multi-page" format. Instead, each nav menu item links to a wholly separate URL (presumably prefetched into the DOM by adding data-prefetch="true" to the link), so each new page/URL must redefine the same nav menu over again.
This immediately makes my developer brain think "let's abstract the menu and include it on each page automatically". But how to 'include' the menu on each page without PHP (or other server-side language)? This is the problem I have yet to solve.
You may be able to call the $(document).bind('pageinit', function to manually inject your menu into the loading page by using javascript/jquery, but I have yet to figure out how to do this properly.
I'll keep you posted if/when I have a workable solution.
Actually this is not specific to jquery mobile, this is CSS3. You can check documentation here: http://www.css3.info/preview/media-queries/. Essentially what they do is specify style rules for different screen width using media query as shown in this example:
#media all and (min-width: 650px) { // you can define your width here
// style rules here
}
Are you talking about something like the left menu at http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html# ? Haven't played with it but it looks like these days it just takes
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal">
We would like to be able to customize the areas outside the form elements area itself, such that customers can have all their forms including the areas surrounding the form in their own style. For instance in the area on the top we would like to have a different color and we would like to replace the Orbeon logo by the logo of the customer. Also we would like to hide/remove/customize some buttons that appear below the form. For instance we don't need the buttons for PDF, Email and Close and we want to change the text in the Save button to Submit.
Is that possible? If so, how do we do that? Is there some instruction somewhere for this?
Yes, you can do all of this through properties:
You can change the color at the top by overriding the .fr-top rule defined in form-runner-orbeon.css. For more on how to override CSS, see: Default CSS.
You can replace or remove the default logo with the oxf.fr.default-logo.uri.*.* property. See Default logo.
You can choose which buttons are shown on the Form Runner "details" page by overriding the oxf.fr.detail.buttons.*.* property. See Buttons on the detail page.
You can change the label on a button by overriding resources. See Overriding resources.
I was faced with the problem to change the icon in the browser address and found the answer of Alessandro Vernet:
http://discuss.orbeon.com/page-address-bar-browser-icon-td4660752.html .
But this solution has the drawback that I had to change the orbeon-form-runner.jar, and this with every new orbeon forms release, what I wanted to avoid.
So the idea was to give my icons the same name as the orbeon icons and to load them in a corresponding directory of the resource directory.
So I named my icon orbeon-icon-16.ico and orbeon-icon-16.png and loaded the two files in orbeon/WEB-INF/resources/ops/images.
For Firefox this was OK, but IE continued to show the orbeon icon. Then I noticed that in orbeon-core.jar there where also the 32 pixel icon.
So I added the two files orbeon-icon-32.ico and orbeon-icon-32.png and than also IE was showing our icon.