xtal-material

Lightweight material design V1 web components, based on Jon Uhlmann's pure CSS material design form elements. For tabs we build on Ben Mildren's Material Design CSS Only Tabs.

NB: There are a number of far more robust alternative material design web components you should definitely check out.

The text input also supports autocomplete / combobox functionality. It has a property, options, which expects the following interface:

export interface IXtalInputOptions {
    data: any[],
    textFld: string,
    keyFld: string,
}

It utilizes the datalist.

The Duality Principle

It seems as though we must use sometimes JavaScript and sometimes declarative markup, while at times we may use either. We are faced with a new kind of difficulty. We have two contradictory pictures of reality; separately neither of them fully explains the phenomena of good web design, but together they do. -- Albert Einstein

If you look at the codepen examples these components derive from, one observes they do not contain any JavaScript. Unfortunately, lack of support for importing HTML kind of forces these components to adopt a slower, more complex, and less risk-free format -- JavaScript. But xtal-material is well-positioned to adopt HTML format when HTML modules land.

    <script defer src="https://cdn.jsdelivr.net/npm/es-module-shims@0.2.1/dist/es-module-shims.js"></script>
    <script type="importmap-shim">
      {
        "imports": {
          "trans-render/": "https://cdn.jsdelivr.net/npm/trans-render@0.0.75/",
          "xtal-element/": "https://cdn.jsdelivr.net/npm/xtal-element@0.0.29/",
          "xtal-material/":  "https://cdn.jsdelivr.net/npm/xtal-material@0.0.49/",
          "event-switch/":  "https://cdn.jsdelivr.net/npm/event-switch@0.0.12/"            
        }
      }
      </script>
      
    <script  type="module-shim">
      import 'xtal-material/xtal-text-input-md.js';
      import 'xtal-material/xtal-email-input-md.js';
      import 'xtal-material/xtal-checkbox-input-md.js';
      import 'xtal-material/xtal-radio-group-md.js';
      import 'xtal-material/xtal-text-area-md.js';
      import 'xtal-material/xtal-radio-tabs-md.js';
      import 'xtal-material/xtal-side-nav.js';
    </script>
    <script type="module" src="https://unpkg.com/carbon-copy@0.1.43/carbon-copy.js"></script>
    <script type="module" src="https://unpkg.com/p-d.p-u@0.0.100/dist/p-d.p-u.iife.js"></script>
    <script type="module" src="https://cdn.jsdelivr.net/npm/xtal-decorator@0.0.33/dist/xtal-decorator.iife.js"></script>

Install the Polymer-CLI

First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install your element's dependencies, then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Running Tests

WIP