mvdom-ui

mvdom-ui is a simple, modern, DOM native component set base on native web component web components based on google material styling and mvdom DOM Native library.

Demo: https://ui.mvdom.io/

Approach

• Based on DOM native browser web component support (.e.g., customElements)
  • i.e., NO virtual DOM, NO parallel component model, NO polyfill, just based on HTMLElement customElement base class.
• Use modern CSS (CSS Var, CSS Grid)
• Default Google Material Style and Component Sets
• UI and CSS Designed to be highly stylable (UI states expressed in concise css class name, css driven layout)
• Target only for modern browser: Chrome, Firefox, Safari, and Edge Chromium.

IMPORTANT This component set is still under development. 0.1.x is going to be mostly releases for our own projects as API / Style might change significantly. Base component set will be stabilized in subsequent major or minor releases.

Install

• npm install mvdom (install the core mvdom library, DOM Centric MVC)
• npm install mvdom-ui
• Add the ./node_module/mvdom-ui/dist/css/all.css in your html or css bundle.
• Or if you use pcss you can do like

@import './node_module/mvdom-ui/pcss/all.pcss' 

• Add the following in your main javascript file

// load all ui components (as the constructors will be called by the browser)
import 'mvdom-ui'; 
 
// Load default icon set as <svg><symbol>..</svg> doc in the html head. 
import { defaultIcons } from 'mvdom-ui';
defaultIcons.load();

Current components

• m-input
• m-check
• m-select
• m-ico
• m-symbol

Future components

• m-popup
• m-dialog
• m-img
• m-combo