Quetzal

Quetzal is a collection of general-purpose standards-based HTML web components. This is not a framework, just a set of reusable HTML elements created with new standards. You can add these elements to your own web applications. The Quetzal source code is on GitHub.

The Quetzal element collection relies on Google's Polymer project to support aspects of custom elements which are not yet supported in all browsers.

For the time being, use Google Chrome Canary to view this page. Results are also more predictable if you open chrome://flags and Enable Experimental Platform Features.

globalize-culture Programmatic or user selection of a culture. lorem-pixel Selects a random photo from lorempixel.com. quetzal-auto-size-text-box A text area that expands to contain its text. quetzal-button Shows its content inside a simple button. Button quetzal-calendar-month A calendar showing a single month. Highly customizable. quetzal-calendar-month-with-headings A month calendar with month name, year, and day of week headings. Locale- specific calendar preferences are automatically localized via the Globalize library of 300+ cultures. quetzal-combo-box An input area with a dropdown arrow that invokes a popup. This is intended for use as base class for custom combo boxes. You can populate a popup like this with choices for the user to pick. quetzal-fixed-aspect Shows its content at the largest size that maintains the aspect ratio specified by its aspect attribute.
This box has a 1:2 aspect ratio.
quetzal-infinite-scroll A scrolling surface that adds elements as necessary to ensure the user can continue scrolling indefinitely. By default, simply repeats its content, but can also be extended to load data or perform other work when new items are added.
Hello!
 quetzal-list-box A list of items that supports single selection and keyboard navigation (Up/Down, Page Up/Down, Home/End).
Blue
Brown
DarkBlue
DarkGreen
DarkRed
Gold
Goldenrod
Green
Indigo
LightCoral
LightGray
LightSeaGreen
LightSkyBlue
MediumPurple
OrangeRed
PaleGoldenRod
PaleVioletRed
Red
Sienna
SlateBlue
SteelBlue
Tan
Teal
Yellow
YellowGreen
 quetzal-list-combo-box A combo box in which choices are rendered in a dropdown list box. Blue Brown DarkBlue DarkGreen DarkRed Green LightCoral LightGray LightSeaGreen LightSkyBlue OrangeRed Red SlateBlue SteelBlue Tan Yellow quetzal-popup-button A button which, when clicked, shows a popup which is positioned above or below the button. Here's the popup Click for a popup quetzal-popup-source A base class for elements which produce a popup when clicked. See also popup-button. Here's the popup Click me quetzal-calendar-week A highly-customizable week calendar. See also quetzal-calendar-month.