| <h5 class="mdlext-demo-header">mdl-ext</h5> |
| <p>Material Design Lite Ext (MDLEXT). |
| Components built with the |
| <a href="https://github.com/google/material-design-lite">Google Material Design Lite</a> |
| framework. |
| </p> |
| |
| <h3>Components provided</h3> |
| |
| <h4>Accordion</h4> |
| <p>A WAI-ARIA friendly accordion component with vertcial or horizontal layout.</p> |
| |
| <h4>Bordered Fields</h4> |
| <p>The Material Design Lite Ext (MDLEXT) bordered fieldscomponent demonstrates |
| how you can create your own theme of MDL text fields. |
| </p> |
| |
| <h4>Collapsible</h4> |
| <p>A collapsible is a component to mark expandable and collapsible regions.</p> |
| |
| <h4>Color Themes</h4> |
| <p>MDL provides only one color theme. Many designs require more than one theme, e.g. a dark theme and a light theme.</p> |
| |
| <h4>Grid</h4> |
| <p>A responsive grid based on element queries in favour of media queries.</p> |
| |
| <h4>Image Carousel</h4> |
| <p>A responsive, WAI-ARIA friendly, image carousel.</p> |
| |
| <h4>Lightboard</h4> |
| <p>A lightboard is a translucent surface illuminated from behind, used for |
| situations where a shape laid upon the surface needs to be seen with high contrast. |
| In the "old days" of photography photograpers used a lightboard to get a quick |
| view of, sorting and organizing their slides. |
| </p> |
| |
| <h4>Lightbox</h4> |
| <p>A lightbox displays an image filling the screen, and dimming out the rest of |
| the web page. It acts as a modal dialog using the <code><dialog></code> |
| element as a container for the lightbox. |
| </p> |
| |
| <h4>Menu Button</h4> |
| <p>A WAI-ARIA friendly menu button component/widget with roles, attributes and behavior in accordance with the |
| specification given in WAI-ARIA Authoring Practices, section 2.20. |
| </p> |
| |
| <h4>Selectfield</h4> |
| <p>The Material Design Lite Ext (MDLEXT) select field component is an enhanced version |
| of the standard [HTML <code><select></code> element. |
| </p> |
| |
| <h4>Sticky Header</h4> |
| <p>A sticky header makes site navigation easily accessible anywhere on the page and saves content space at the same.</p> |