Materialized Custom Element

  1. Small and fast(Less than 9KB gzipped).
  2. No depenancy on framework or library. Vanilla JS only.
  3. Common-sense engineering; Element itself(not JS object) has properties and functions.
  4. Minimal coding, easy to maintain. Take a look at code


It follows specification of custom element and material design.




You don't need Angular, React, or Vue to create a simple SPA with routing capability. router example


Do you want to show a map with marker and popup. It's as easy as writing HTML with <mce-leaflet> tag.
map example marker example


Do you show a loading sign on a specific section. Use mce-blocker to show loading sign exactly overlayed on an element. blocker example


Your page scrolls, and you don't want to load all elements that are not inviewport. inview example


You have list, and you want to click, navigate, select with keyboard/mouse. list item example


By simply adding the following <script> tag to your html, you are ready to go.

<script defer src="https:/"></script>

Optionally, and for better design, you can add Google Roboto font, Material Design Icons, and/or, Font-Awesome icons.

<link rel="stylesheet" href="https:/,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900">
<link rel="stylesheet" href="https:/">
<link rel="stylesheet" href="">

How To Use

Just use it in your html. No other step is required.

<mce-text-field label="Simple"></mce-text-field>

For Whom With Curiousity

$ git clone
$ cd mce
$ npm i
$ npm start # to see all components in development. mode

For NodeJS users, install mce package

npm install mce --save-dev

results matching ""

    No results matching ""