Hi Experts
My question is :
how we can achieve UI as shown in above image using angular-material?
if it is not possible using angular-material then which framework I can use
The Tabs for FLight, Hotel, Buses, Holiday this kind of tab using icon and text with transparent background.
the search text boxes using autocomplete.
I am using angularJs and angular-material.
Any Help would be a great support.. Thanks
All the basic components you mentioned are available in angular material:
Auto-complete
Tabs
You have also a lot of icons But i suggest you though to use FontAwesome
However for other things you asked, you have to absolutely learn css since no any framework can visually fit to your design choices.
Related
This "image slider? thing. What is it called?
If you go to myanimelist.net, there is this very nice and simple image slider and upon clicking it, it redirects you to the specific anime details page according to what you clicked. What is this widget called and where can I learn to create something like this?
A beginner programmer that wants to create a website but no idea how to start.
The page uses css mostly. if you are really starting and want to learn try with JQuery is a Java framework with "widgets" like you call them.
a duplicate of what you need is here: https://www.jqueryscript.net/demo/Fully-Responsive-Flexible-jQuery-Carousel-Plugin-slick/
This is image slider or carousel slider. You can make it easy by using bootstrap 4 carousels. Bootstrap is very easy to learn and for image slider, you don't need to learn Jquery. Here is a link which will help you to make carousal Bootstrap Carousel
If you wanna use direct code then you can check this link Jassor Image slider
This is called a Carousel or Slider. You should be able to create this with just HTML and CSS and a tad bit of JavaScript. I first learnt building one by going through this link in W3C. When I got older and experienced I stopped building one from scratch for every project, instead started using Bootstrap Carousel. A good resource to learn this is from here.
I don't have much idea about Angular JS so please bear with me if I go wrong with the way I ask this. What we need is a single select dropdown menu which can have images as well. I want the dropdown to be customisable in the sense that the border colour and the background colour of the button that shows the dropdown menu can be transparent. Currently we are using typeahead but we do not want the keyboard to show when tapping on the input field.
Again, I apologise for the horrible way this question has been asked. I am an iOS developer asking this on behalf of one of my colleagues. Any library you can point me towards would be highly helpful.
I'm creating a game using WebGL. I'm currently working on menu design, and it occured to me that one of the great advantages I have in using web technologies is that I can use HTML for the GUI.
The game uses pixel art, so in keeping with that art style I want the menu to have pixelated buttons and text as well. I'm wondering if using CSS filters or something similar I'm able to pixelate my rendering of DOM elements, or if I'll need to create full button images beforehand (much less appealing).
Thanks!
I'm currently working on a project and I'm interested in having a sort of "elevator pitch carousel", a feature as seen on websites like www.salesforce.com. I took a look at their source code, but I'm relatively new to HTML and CSS editing I'm pretty confused as to how to go about this.
I don't want something that is exactly as salesforces, but just generally a way how to make text in a text box change after a person presses particular heading option on the top of the text box.
Hey you can accomplish this using javascript tabs. Bootstrap has some pretty simple ones to implement and there are other jquery plugins that would do the basic thing. You will need to edit the css to get the appearance you want here is a link to bootstrap 3 and their tabs feature.
http://getbootstrap.com/javascript/#tabs
some other tabs plugins
http://www.unheap.com/?s=tabs
hope that helps
-John
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.