Giter Club home page Giter Club logo

material-components-web's Introduction

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<HTMLElement>('.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<HTMLElement>('.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.

material-components-web's People

Contributors

abhiomkar avatar acdvorak avatar addyosmani avatar allan-chen avatar amsheehan avatar asyncliz avatar bonniezhou avatar codr avatar crisbeto avatar e111077 avatar estebang23 avatar garbee avatar greenkeeper[bot] avatar jasonmayes avatar joyzhong avatar kfranqueiro avatar kvizcarra avatar lynnmercier avatar material-web-copybara avatar mco-gh avatar nicolasgarnier avatar patrickrodee avatar sayris avatar sgomes avatar sindresorhus avatar surma avatar traviskaufman avatar williamernest avatar x1ddos avatar yeelan0319 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

material-components-web's Issues

Implement "FAB-Single Sheet Menu" component

There are internal motion mocks for these transitions that I can get when it comes time to implement.

Copied from google/material-design-lite#4483

Make snackbar more resilient to text overflow

For a single-line snackbar, we could make it so that the text will not cause line breaks (and show an ellipses instead, perhaps). For multiline, we'd have to trust the user not to put in arbitrarily long strings of text.

Some browsers also support clamping to a certain number of lines, so we can progressively enhance for that as well

Copied from google/material-design-lite#4828

mdc-animation: Implement event name queries

We've got stuff in our constants files that look like:

return {
   ANIM_END_EVENT: (() => {
     const d = document.createElement('div');
     return 'transition' in d.style ? 'transition' : 'webkitTransition';
   })();
};

This is problematic since these constants files are evaluated at module load time, and used within foundation classes, which means that it implicitly makes our foundation classes require a DOM context before they're initialized. This has negative implications for frameworks which leverage server-side rendering.

We need to break these out into helper methods and put them in mdl-animation e.g.

export function getTransitionEndEvent(windowObj) {
}

// ....

This will ensure that we're not trying to work with any web platform context within our foundations until at least init() is called.

  • Determine whether or not we need webkitPrefix

Copied from google/material-design-lite#4745

Full width search (as in MD spec)

The MDL search should behave as desceribed in the MD styleguide - please see examples here.

I've already seen the issue #192 which has been closed. The "layout demo page" mentioned there is not available (404). I don't see there also any solution. I think we should consider reopening it.

Such component like examples shown in the MD spec would be not only "nice to have" but rather an important feature. For now an existing one is buggy (sometimes overlaps other objects when width is small). It's also limited - it doesn't give a nice user experience when write long phrases inside. My comments are about the trunk version.

It would be really great to have something like this example (an animated GIF demo).

In meantime could you please advice how to make the existing solution 100% width (I mean "search" as in examples here)? I tried simple CSS modifications, but I'm not sure that there is some easy way to do it.

The issue #192 has been closed with annotation that it could be reopened. Could you please back to this topic?

Copied from google/material-design-lite#4554

Better customisation docs

The customize page of the docs do a great job of showing how to customize the color theme. However, some users may want more customization. I happen to know that simply adding an extra css file that loads last, with whatever customization a user wants, will override anything in MDL, but not every user will be aware that. Adding something to that effect might be helpful.

Great job so far. I'm especially impressed how fast issues are being addressed. Thanks for this.

Copied from google/material-design-lite#841

Implement "FAB-toolbar" component

There are internal motion mocks for these transitions that I can get when it comes time to implement.

Copied from google/material-design-lite#4482

Generate text colors from provided primary/accent/background

In order to simplify CSS Custom Property-level theming, we should have a utility method that a developer can call to generate all the text colors, using the color contrast algorithm based off of the provided primary, accent and background colors.

mdl.theme.applyTheme(
    document.querySelector(':root'),
    {primary: '#3f51b5', accent: '#ff4081', background: '#fff')
);

resulting in:

:root {
  --mdl-theme-primary: #3f51b5;
  --mdl-theme-accent: #ff4081;
  --mdl-theme-background: #fff;
  --mdl-theme-text-primary-on-primary: white;
  --mdl-theme-text-secondary-on-primary: rgba(255, 255, 255, 0.7);
  --mdl-theme-text-hint-on-primary: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-disabled-on-primary: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-icon-on-primary: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-primary-on-accent: white;
  --mdl-theme-text-secondary-on-accent: rgba(255, 255, 255, 0.7);
  --mdl-theme-text-hint-on-accent: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-disabled-on-accent: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-icon-on-accent: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-primary-on-background: rgba(0, 0, 0, 0.87);
  --mdl-theme-text-secondary-on-background: rgba(0, 0, 0, 0.54);
  --mdl-theme-text-hint-on-background: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-disabled-on-background: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-icon-on-background: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-primary-on-light: rgba(0, 0, 0, 0.87);
  --mdl-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54);
  --mdl-theme-text-hint-on-light: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-icon-on-light: rgba(0, 0, 0, 0.38);
  --mdl-theme-text-primary-on-dark: white;
  --mdl-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7);
  --mdl-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
  --mdl-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5);
}

Copied from google/material-design-lite#4927

Investigate speeding up our webpack build

Our webpack build is very, very, very slow right now. My original guess was that this had to do with the fact that we're using a multi-entry build. However, it actually looks like this is more efficient than splitting up our build files.

I'd like to investigate why our builds are particularly slow and see if there's anything we can do to optimize them.

Additionally, this would be a great time to look into switching over to Webpack 2.0, as it supports tree shaking which could help us slim down the size of our output.

Copied from google/material-design-lite#4881

Implement Snackbar Component

Spec Reference: https://www.google.com/design/spec/components/snackbars-toasts.html

It's been called a "Toast" in the past, but the thing that's not Android-specific is a snackbar.

  • Initial Implementation
  • Dark Theme (background: #fafafa, text: text-primary-on-dark, action: theme primary color)
  • Keyboard Focus Handling
  • In demo, ensure that "Action on Bottom" is unchecked and disabled when "multiline" is unchecked
  • End-to-end usage example in README (instantiation, using it in response to an event)
  • Start-aligned snackbars (left for LTR, right for RTL)
  • Add dismissOnAction option, which defaults to true. When true, snackbar dismisses as soon as a user interacts with its action button (see #28).
  • Address #564

Copied from google/material-design-lite#4490

Implement Slider Component

@sgomes already doing some work on this.

Notes

Step values need to be able to be quantized to decimal places, e.g. min = 0, max = 5, step = .2. Possible algorithm: Take the raw value, divide it by step, round that number, and then multiply the original step value by the rounded number. E.g.

function quantize(val, min, max, step) {
  const numSteps = Math.round(val / step);
  const quantizedVal = numSteps * step;
  return Math.max(min, Math.min(max, quantizedVal));
}

const min = 0, max = 5, step = .2;
quantize(3.56, min, max, step); // 3.6
quantize(2.148692, min, max, step) // 2.2
quantize(1.061733, min, max, step) // 1

Copied from google/material-design-lite#4494

Build hosting

We should have a mechanism in place for hosting builds of MDL on gh-pages, for testing/review purposes. Some options:

  • An edge or master folder that hosts a build of the current state of master, through a commit hook.
  • A stable or latest folder that hosts a build of the latest release, through a publish hook.
  • A collection of manually uploaded static builds, if needed.

Copied from google/material-design-lite#4892

Radios should activate ripple when their corresponding label is pressed

What MDL Version are you using? (please be specific, e.g. major.minor.patch)

v2 @ master

What browser(s) is this bug affecting (including version)?

all

What OS (and version) are you using?

OS X El Capitan

What are the steps to reproduce the bug? Can you create a plunker/codepen/jsfiddle which reproduces it?

  1. Type npm run dev and navigate to http://localhost:8080/radio.html
  2. Click on a label for a radio

What is the expected behavior?

The ink ripple should activate

What is the actual behavior?

Only the focus ripple activates

Any other information you believe would be useful?

This is due to the fact that isSurfaceActive is always set to false in the radio's ripple adapter. Instead, we need to set it conditionally based on whether or not the label is being interacted with.

Copied from google/material-design-lite#4830

Investigate TravisCI Flakiness

Our CI seems to be flaky yet again. Once we finish up the alpha milestone, we should prioritize diagnosing and fixing this issue so we can handle PR submissions reliably. Possible diagnosis off the top of my head would be that the karma tap reporter is streaming out more than TravisCI or SauceLabs can handle. The tests seem to have gotten flakier as we've added more. We may have to investigate either sharding our tests and running them via a CI matrix, figuring out how to suppress console output without losing vital information such as info on test failures, or - at worst - switching over to a different test framework which can scale out better.

Copied from google/material-design-lite#4922

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.