All Projects → material-components → Material Components Web

material-components / Material Components Web

Licence: mit
Modular and customizable Material Design UI components for the web

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects
SCSS
7915 projects
shell
77523 projects

Projects that are alternatives of or similar to Material Components Web

Cafebar
An upgraded Snackbar for Android that provides more options and easy to use
Stars: ✭ 142 (-99.11%)
Mutual labels:  material-design, material-components
Materialdesign2
A beautiful app designed with Material Design 2 using Android X.
Stars: ✭ 170 (-98.93%)
Mutual labels:  material-design, material-components
Material
A lightweight Material Design library for Angular based on Google's Material Components for the Web.
Stars: ✭ 143 (-99.1%)
Mutual labels:  material-design, material-components
Blazormaterial
Blazor components implementing Google's Material components for web - https://material.io/components/web
Stars: ✭ 136 (-99.15%)
Mutual labels:  material-design, material-components
Bottomsheet
BottomSheet dialog library for Android
Stars: ✭ 219 (-98.63%)
Mutual labels:  material-design, material-components
Android Cards
CardView with Material Design using ConstraintLayout
Stars: ✭ 136 (-99.15%)
Mutual labels:  material-design, material-components
Materialnavigationview Android
📱 Android Library to implement Rich, Beautiful, Stylish 😍 Material Navigation View for your project with Material Design Guidelines. Easy to use.
Stars: ✭ 168 (-98.95%)
Mutual labels:  material-design, material-components
Mediapicker
Easy customizable picker for all your needs in Android application
Stars: ✭ 105 (-99.34%)
Mutual labels:  material-design, material-components
React Md
React material design - An accessible React component library built from the Material Design guidelines in Sass
Stars: ✭ 2,284 (-85.66%)
Mutual labels:  material-design, material-components
React Material Components Web
React wrapper of Google's Material Components Web
Stars: ✭ 184 (-98.85%)
Mutual labels:  material-design, material-components
Material Intro
A simple material design app intro with cool animations and a fluent API.
Stars: ✭ 1,718 (-89.22%)
Mutual labels:  material-design, material-components
Materialbanner
A library that provides an implementation of the banner widget from the Material design.
Stars: ✭ 241 (-98.49%)
Mutual labels:  material-design, material-components
Balm Ui
♦️ A modular and customizable UI library based on Material Design and Vue
Stars: ✭ 133 (-99.17%)
Mutual labels:  material-design, material-components
Ibackdrop
A library to simply use Backdrop in your project (make it easy). Read more ->
Stars: ✭ 137 (-99.14%)
Mutual labels:  material-design, material-components
Smart Webcomponents
Web Components & Custom Elements for Professional Web Applications
Stars: ✭ 110 (-99.31%)
Mutual labels:  material-design, material-components
Materialdrawer
The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.
Stars: ✭ 11,498 (-27.83%)
Mutual labels:  material-design, material-components
Cyanea
A theme engine for Android
Stars: ✭ 1,319 (-91.72%)
Mutual labels:  material-design, material-components
Material Design Dimens
Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library.
Stars: ✭ 1,378 (-91.35%)
Mutual labels:  material-design, material-components
Material Components Android
Modular and customizable Material Design UI components for Android
Stars: ✭ 13,128 (-17.59%)
Mutual labels:  material-design, material-components
Material Admin
Free Material Admin Template
Stars: ✭ 219 (-98.63%)
Mutual labels:  material-design, material-components

Version Chat

Material Components for the web

Material Components for the web helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional web projects.

Material Web strives to seamlessly incorporate into a wider range of usage contexts, from simple static websites to complex, JavaScript-heavy applications to hybrid client/server rendering systems. In short, whether you're already heavily invested in another framework or not, it should be easy to incorporate Material Components into your site in a lightweight, idiomatic fashion.

Material Components for the web is the successor to Material Design Lite. In addition to implementing the Material Design guidelines, it provides more flexible theming customization, not only in terms of color, but also typography, shape, states, and more. It is also specifically architected for adaptability to various major web frameworks.

NOTE: Material Components Web tends to release breaking changes on a monthly basis, but follows semver so you can control when you incorporate them. We typically follow a 2-week release schedule which includes one major release per month with breaking changes, and intermediate patch releases with bug fixes.

Important links

Quick start

Using via CDN

<!-- Required styles for Material Web -->
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">

<!-- Render textfield component -->
<label class="mdc-text-field mdc-text-field--filled">
  <span class="mdc-text-field__ripple"></span>
  <span class="mdc-floating-label" id="my-label">Label</span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="my-label">
  <span class="mdc-line-ripple"></span>
</label>

<!-- Required Material Web JavaScript library -->
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<!-- Instantiate single textfield component rendered in the document -->
<script>
  mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
</script>

Please see quick start demo on codepen for full example.

Using NPM

This guide assumes you have webpack configured to compile Sass into CSS. To configure webpack, please see the full getting started guide. You can also see the final code and result in the Material Starter Kit.

Install textfield node module to your project.

npm install @material/textfield

HTML

Sample usage of text field component. Please see Textfield component page for more options.

<label class="mdc-text-field mdc-text-field--filled">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="my-label">
  <span class="mdc-floating-label" id="my-label">Label</span>
  <span class="mdc-line-ripple"></span>
</label>

CSS

Load styles required for text field component.

@use "@material/floating-label/mdc-floating-label";
@use "@material/line-ripple/mdc-line-ripple";
@use "@material/notched-outline/mdc-notched-outline";
@use "@material/textfield";

@include textfield.core-styles;

JavaScript

Import MDCTextField module to instantiate text field component.

import {MDCTextField} from '@material/textfield';
const textField = new MDCTextField(document.querySelector('.mdc-text-field'));

This'll initialize text field component on a single .mdc-text-field element.

Please see quick start demo on glitch for full example.

Need help?

We're constantly trying to improve our components. If Github Issues don't fit your needs, then please visit us on our Discord Channel.

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].