blob: 1945e2861df8bc5eec7d87d43be8f76b131788da [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001<h5 class="mdlext-demo-header">mdl-ext</h5>
2<p>Material Design Lite Ext (MDLEXT).
3 Components built with the
4 <a href="https://github.com/google/material-design-lite">Google Material Design Lite</a>
5 framework.
6</p>
7
8<h3>Components provided</h3>
9
10<h4>Accordion</h4>
11<p>A WAI-ARIA friendly accordion component with vertcial or horizontal layout.</p>
12
13<h4>Bordered Fields</h4>
14<p>The Material Design Lite Ext (MDLEXT) bordered fieldscomponent demonstrates
15 how you can create your own theme of MDL text fields.
16</p>
17
18<h4>Collapsible</h4>
19<p>A collapsible is a component to mark expandable and collapsible regions.</p>
20
21<h4>Color Themes</h4>
22<p>MDL provides only one color theme. Many designs require more than one theme, e.g. a dark theme and a light theme.</p>
23
24<h4>Grid</h4>
25<p>A responsive grid based on element queries in favour of media queries.</p>
26
27<h4>Image Carousel</h4>
28<p>A responsive, WAI-ARIA friendly, image carousel.</p>
29
30<h4>Lightboard</h4>
31<p>A lightboard is a translucent surface illuminated from behind, used for
32 situations where a shape laid upon the surface needs to be seen with high contrast.
33 In the "old days" of photography photograpers used a lightboard to get a quick
34 view of, sorting and organizing their slides.
35</p>
36
37<h4>Lightbox</h4>
38<p>A lightbox displays an image filling the screen, and dimming out the rest of
39 the web page. It acts as a modal dialog using the <code>&lt;dialog&gt;</code>
40 element as a container for the lightbox.
41</p>
42
43<h4>Menu Button</h4>
44<p>A WAI-ARIA friendly menu button component/widget with roles, attributes and behavior in accordance with the
45 specification given in WAI-ARIA Authoring Practices, section 2.20.
46</p>
47
48<h4>Selectfield</h4>
49<p>The Material Design Lite Ext (MDLEXT) select field component is an enhanced version
50 of the standard [HTML <code>&lt;select&gt;</code> element.
51</p>
52
53<h4>Sticky Header</h4>
54<p>A sticky header makes site navigation easily accessible anywhere on the page and saves content space at the same.</p>