developit / Preact Mdl
Licence: mit
💥 A collection of Preact Components that encapsulate Google's Material Design Lite.
Stars: ✭ 179
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Preact Mdl
Shards Dashboard
🔥A beautiful Bootstrap 4 admin dashboard templates pack.
Stars: ✭ 1,143 (+538.55%)
Mutual labels: material-design, material, ui-kit
Vuetify
🐉 Material Component Framework for Vue
Stars: ✭ 33,085 (+18383.24%)
Mutual labels: material-design, material, ui-kit
Svelte Materialify
A Material UI Design Component library for Svelte heavily inspired by vuetify.
Stars: ✭ 351 (+96.09%)
Mutual labels: material-design, material, ui-kit
Material Design For Bootstrap
Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
Stars: ✭ 9,463 (+5186.59%)
Mutual labels: material-design, material, ui-kit
React Native Material Dialog
Material design dialogs for React Native 💬
Stars: ✭ 135 (-24.58%)
Mutual labels: material-design, material
Bootstrap Table
An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
Stars: ✭ 11,068 (+6083.24%)
Mutual labels: material-design, material
Ibackdrop
A library to simply use Backdrop in your project (make it easy). Read more ->
Stars: ✭ 137 (-23.46%)
Mutual labels: material-design, material
Chromaterial
ChroMATERIAL is an IntelliJ Platform coloring scheme that expresses the chromatic nature of Material Design within IntelliJ and Android Studio. It is intended to highlight the most import aspects of your code.
Stars: ✭ 143 (-20.11%)
Mutual labels: material-design, material
Motion
A library used to create beautiful animations and transitions for iOS.
Stars: ✭ 1,726 (+864.25%)
Mutual labels: material-design, material
Material
A lightweight Material Design library for Angular based on Google's Material Components for the Web.
Stars: ✭ 143 (-20.11%)
Mutual labels: material-design, material
Material
A UI/UX framework for creating beautiful applications.
Stars: ✭ 11,870 (+6531.28%)
Mutual labels: material-design, material
Material Intro
A simple material design app intro with cool animations and a fluent API.
Stars: ✭ 1,718 (+859.78%)
Mutual labels: material-design, material
Balm Ui
♦️ A modular and customizable UI library based on Material Design and Vue
Stars: ✭ 133 (-25.7%)
Mutual labels: material-design, ui-kit
Noty
A simple library for creating animated warnings/dialogs/alerts for Android.
Stars: ✭ 136 (-24.02%)
Mutual labels: material-design, material
Google Maps Autocomplete
Autocomplete input component and directive for google-maps built with angular and material design | ANGULAR V9 SUPPORTED
Stars: ✭ 134 (-25.14%)
Mutual labels: material-design, material
Jekyll Theme Mdui
🍷A Jekyll theme based on MDUI
Stars: ✭ 143 (-20.11%)
Mutual labels: material-design, material
React Native Paper Dates
Smooth and fast cross platform Material Design date and time picker for React Native Paper
Stars: ✭ 173 (-3.35%)
Mutual labels: material-design, material
Vuetify Todo Pwa
✔️ A simple Todo PWA built with Vue CLI 3 + Vuex + Vuetify.
Stars: ✭ 160 (-10.61%)
Mutual labels: material-design, material
Material Apex
A Material Design Theme for Oracle APEX
Stars: ✭ 161 (-10.06%)
Mutual labels: material-design, material
preact-mdl
A collection of Preact Components that encapsulate Google's Material Design Lite.
Quick Start
Grab the App Skeleton from JSFiddle, Codepen, or Code Sandbox
Using TypeScript? preact-mdl-example is an instant full project setup.
Documentation
Installation
npm install --save material-design-lite preact-mdl
What does it look like?
See for yourself - preact-mdl powers ESBench and Nectarine.
Here's some live-action demos:
Usage
- Add MDL stylesheets to your html
<!DOCTYPE html>
<html style="height: 100%; width: 100%;">
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
<title>Preact-mdl Example</title>
</head>
<body style="height: 100%; width: 100%;">
<script src="/bundle.js"></script>
</body>
</html>
- Import mdl module and components from preact-mdl
import { h, Component } from 'preact';
import mdl from 'material-design-lite/material';
import { Button } from 'preact-mdl';
export default class MyButton extends Component {
render() {
return(
<div>
<Button>I am button!</Button>
</div>
)
}
}
Demos
For now, browse these Open Source projects using preact-mdl:
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].