Directory

← Back

xtal-material

Lightweight Free Material Components

Author

Rating

Popularity

<100

Published on webcomponents.org

Light weight 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

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • trans-render#0.0.110
  • xtal-element#0.0.58
  • event-switch#0.0.12
Released
2019-04-28
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 3.0+ in 0.0.22
Browser
Browser Independent

xtal-material - Vaadin Add-on Directory

Lightweight Free Material Components xtal-material - Vaadin Add-on Directory
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/bahrus/xtal-material) Light weight material design V1 web components, based on Jon Uhlmann's [pure CSS material design form elements](https://codepen.io/jonnitto/pen/OVmvPB). For tabs we build on Ben Mildren's [Material Design CSS Only Tabs](https://codepen.io/mildrenben/pen/bdGdOb). NB: There are a number of [far](https://github.com/material-components/material-components-web-components) [more](https://vaadin.com/components/browse) [robust](https://www.webcomponents.org/collection/PolymerElements/paper-elements) [alternative](https://ionicframework.com/docs/components/) [material](https://web-padawan.github.io/aybolit/?path=/story/bootstrap--abs-button) 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: ```TypeScript export interface IXtalInputOptions { data: any[], textFld: string, keyFld: string, } ``` It utilizes the [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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](https://en.wikipedia.org/wiki/Wave%E2%80%93particle_duality) 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.
``` --> ## Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) 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
Online