This project has been deprecated. Please find more custom elements at https://github.com/allenhwkim/html-custom-elements
Materialized Custom Element
- Small and fast.
- No depenancy on framework or library. Vanilla JS only.
- Common-sense engineering; Element itself(not JS object) has properties and functions.
- Minimal coding, easy to maintain. Take a look at code
It follows specification of custom element and material design.
Articles
Examples
mce-router
You don't need Angular, React, or Vue to create a simple SPA with routing capability. router example
mce-leaflet
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
mce-blocker
Do you show a loading sign on a specific section. Use mce-blocker to show loading sign exactly overlayed on an element.
blocker example
mce-inview
Your page scrolls, and you don't want to load all elements that are not inviewport. inview example
mce-list-item
You have list, and you want to click, navigate, select with keyboard/mouse. list item example
Installation
By simply adding the following <script> tag to your html, you are ready to go.
<script defer src="https:/unpkg.com/mce"></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:/fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900">
<link rel="stylesheet" href="https:/fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/font-awesome.css">
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 https://github.com/allenhwkim/mce.git
$ cd mce
$ npm i
$ npm start # to see all components in development. mode
For NodeJS users, install mce package
npm install mce --save-dev