Material-Marko

Material design components for MarkoJS.

What is Material-Marko

Material Marko is an implementation of Material Web Components using MarkoJS. This project makes it easy to add material components to your MarkoJS project. Once completed all Material Web Components will have a MarkoJS component implementation.

Material Marko will make it easy to create elegant webapps while minimizing the amount of code you need to write.

Usage

For the purposes of this tutorial I assume that you already have a working MarkoJS environment.

The easiest way to install Material-Marko is using npm.

npm i material-marko

MarkoJS will automatically locate the material components.

All material components start with m- making them easy to identify and use. Documentation for each component including what attributes and events are available is in the works.

Sample Webpage / Development

To run the sample webpage clone this repo and run npm start.

To help with development clone this repo and run npm run dev to use browser refresh. This makes it easy to view changes in the browser as you make them.

Navigate to http://localhost:8080/ in your browser to view the sample website.

Available Material Components

The following components are available in some form. While they are all usable not all of them are feature complete. Follow the links for component specific documentation.

• m-button
• m-card
• m-drawer
• m-layout-grid
• m-switch
• m-textfield
• m-top-app-bar
• m-list

In addition the follow typography elements have been implemented:

• m-body
• m-button-typography
• m-caption
• m-h1
• m-h2
• m-h3
• m-h4
• m-h5
• m-h6
• m-overline
• m-require
• m-subtitle

Examples:

You can use each component like you would any other tag in MarkoJS. Here are a few examples:

m-button

m-button raised icon="bookmark" -- Save Post

Roadmap

Moving forward I plan to implement all MDC web components as found here: Material Components Web

I also want to add easy theming for material components and a few helper components to make designing webpages easier.

Authors

• Hunter Stratton