Giter VIP home page Giter VIP logo

material-ui's Introduction

MUI logo

MUI Core

MUI Core contains foundational React UI component libraries for shipping new features faster.

  • Material UI is a comprehensive library of components that features our implementation of Google's Material Design system.

  • Joy UI is a beautifully designed library of React UI components.

  • MUI Base is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features.

  • MUI System is a collection of CSS utilities to help you rapidly lay out custom designs.

Installation

Material UI

Material UI is available as an npm package.

npm:

npm install @mui/material @emotion/react @emotion/styled

yarn:

yarn add @mui/material @emotion/react @emotion/styled
Older versions

Note: @next only points to pre-releases. Use @latest for the latest stable release.

MUI Base

MUI Base is available as an npm package.

npm:

npm install @mui/base

yarn:

yarn add @mui/base

Note: MUI Base is still in alpha. We are adding new components regularly and you're welcome to contribute!

MUI System

MUI System is available as an npm package.

npm:

npm install @mui/system @emotion/react @emotion/styled

yarn:

yarn add @mui/system @emotion/react @emotion/styled

Or if you want to use styled-components as a styling engine:

npm:

npm install @mui/material @mui/styled-engine-sc styled-components

yarn:

yarn add @mui/material @mui/styled-engine-sc styled-components

Visit our styled-engine guide for more information about how to configure styled-components as the style engine.

Sponsors

Diamond ๐Ÿ’Ž

octopus doit zesty.io

Diamond Sponsors are those who have pledged $1,500/month or more to MUI.

Gold ๐Ÿ†

via OpenCollective or via Patreon

tidelift.com bit.dev text-em-all.com netticasinohex.com megafamous.com dialmycalls.com goread.io Icons8 ipinfo.ai RIDI

Gold Sponsors are those who have pledged $500/month or more to MUI.

More backers

See the full list of our backers.

Getting started with Material UI

Here is an example of a basic app using Material UI's Button component:

import * as React from 'react';
import Button from '@mui/material/Button';

function App() {
  return <Button variant="contained">Hello World</Button>;
}

In the interactive demo below, try changing the code and see how it affects the output. (Hint: change variant to "outlined" and color to "secondary". For more options, see the Button component page in our docs.)

Edit Button

Questions

For how-to questions that don't involve making changes to the code base, please use Stack Overflow instead of GitHub issues. Use the "mui" tag on Stack Overflow to make it easier for the community to find your question.

Examples

Our documentation features a collection of example projects using Material UI.

Documentation

Premium themes

You can find complete templates and themes in the MUI Store.

Contributing

Read the contributing guide to learn about our development process, how to propose bug fixes and improvements, and how to build and test your changes.

Contributing to MUI Core is about more than just issues and pull requests! There are many other ways to support MUI beyond contributing to the code base.

Changelog

The changelog is regularly updated to reflect what's changed in each new release.

Roadmap

Future plans and high-priority features and enhancements can be found in our roadmap.

License

This project is licensed under the terms of the MIT license.

Security

For details of supported versions and contact details for reporting security issues, please refer to the security policy.

Sponsoring services

These great services sponsor MUI's core infrastructure:

GitHub logo

GitHub lets us host the Git repository and coordinate contributions.

Netlify logo

Netlify lets us distribute the documentation.

GitHub logo

BrowserStack lets us test in real browsers.

CodeCov logo

CodeCov lets us monitor test coverage.

material-ui's People

Contributors

alitaheri avatar cherniavskii avatar danilo-leal avatar dependabot-preview[bot] avatar dependabot[bot] avatar dmtrkovalenko avatar eps1lon avatar hai-cea avatar hbjorbj avatar jkruder avatar joshwooding avatar jtollerene avatar m4theushw avatar mbrookes avatar merceyz avatar michaldudak avatar mmrtnz avatar mnajdova avatar nathanmarks avatar newoga avatar oliviertassinari avatar pelotom avatar renovate[bot] avatar rosskevin avatar samuelsycamore avatar shaurya947 avatar siriwatknp avatar vicasas avatar zadielerick avatar zeeshantamboli 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-ui's Issues

What is jQuery needed for?

I'd like to use parts of this, but without the jQuery dependency.

I've search for jQuery and found some files that say they require jQuery but never actually use it (like table-header.jsx).

Is there a list of features jQuery is used for? Or is there a plan to get rid of the dependency?

Font files?

The doc says:

"The Roboto font and 3 font weights (light, regular, and medium) are automatically included from Google Fonts."

The problem is that I can't find the font files included anywhere in the source code (I'm using npm) neither a font-face definition on the less files.

[DropDownMenu] Typeahead

Very nice! Would love to see type ahead functionality, which consists AFAIC of three elements.

  • typeahead
  • typeahead tag selection
  • typeahead within textarea (@Friend names)

Browser support

What's the browser support for this framework, especially for Android?

Paper Buttons should be real buttons

The PaperButton component is a div at the moment. This is not an ideal a solution cause you lost the feature to accessing the button by tab clicks. I would propose a change in the Paper component so that it will support the setting of the element type like this:

var Root = React.createFactory(this.props.elementType || 'div');
    return (
      <Root className={classes} onClick={this._onClick} onMouseDown={this._onMouseDown} onMouseUp={this._onMouseUp}>
        <div className={insideClasses}>
          {this.props.children}
        </div>
      </Root>
    );

Set user-select to none

A bit of clicking around causes some of the contents of the components to be selected. Setting user-select to none should fix this problem.

Format code properly

Bugs on Firefox

Transition and your react not working on firefox and have a notice..
screen shot 2014-11-10 at 7 53 59 pm

Compile React

Hi,

I'm pretty new to programming and I was wondering if anyone could help me get started using this project. I've got the .less file for the example to compile, but I'm not sure how to compile the .jsx into .js. If anyone could provide some detailed instructions, I'd really appreciate it.

Thanks!

Dropdown linebreaks

If there's a space in the text for an item in a dropdown, and it's to longest text in the dropdown, it will get word-wrapped.

image

This little snippet solves the problem

.mui-menu-item > * {
  white-space: nowrap;
}

But it seems to produce an awful lot of unnecessary padding to the right for some reason

image

Is it possible for me to make this work if I'm using React version 0.12.0?

Right now I'm seeing problems because internally material-ui is using React 0.11.1 to create the elements and when I try to use them in React 0.12.0 I see an error. Is there something I can do about this on my end or should I just wait for you to update?

Thanks, I'm looking forward to trying this out!

[request] LeftNav can be RightNav?

hello mate!

nice framework you have! =) ... excellent job!

Quick question... i have a website on demand to finish, and your LeftNav component will be superb on that, but, in a certain time I will need it as a right one.... is it possible to do this?

thanks very much! =)

looks bad on iPhone 6

I like the idea of this project, but I would expect the demo page to work well on mobile. But it doesn't, looks complete broken on an iPhone 6. I'd only consider using a library these days that's mobile-first. Resizing on desktop chrome also doesn't work properly.

Add styles for all input types

At the moment only text and password types has proper styles.
number, date, time, range, color styles should be fixed.

Embrace DOM-like structure

Right now subcomponents are passed as a list of special objects to some specific prop, like there:

menuItems = [
  { route: 'get-started', text: 'Get Started' },
  { route: 'css-framework', text: 'CSS Framework' },
  { route: 'components', text: 'Components' },
  { type: MenuItem.Types.SUBHEADER, text: 'Resources' },
  { 
     type: MenuItem.Types.LINK, 
     payload: 'https://github.com/callemall/material-ui', 
     text: 'GitHub' 
  },
];

//Docked Left Nav
<LeftNav menuItems={menuItems} />

I'd argue it would be much more composable and extensible to reworking API to have something like this:

<LeftNav>
  <MenuItem><Route to="get-started">Get Started</Route></MenuItem>
  <Subheader>Resources</Subheader>
  <MenuItem><a href="...">GitHub</a></MenuItem>
</LeftNav>

The same for all menus.

Totally lost on how to build this

I'm completely new to the world of CSS frameworks, and I'm having a lot of trouble getting material-ui to work for me. My steps so far:

Installed Node.js and npm. npm installed less, browserify, reactify, and material-ui. Then I used less to compile components.less and scaffolding.less into a main.css. My understanding is that these two .less files will incorporate all of the other css in the directory. I copied this main.css file into my document root, and added a link to the stylesheet in the index.html. This seemed to work as my text changed to look like the example page. Then I used browserify on the index.js file in the src directory to create a main.js file. At the bottom of my body tag in my index.html I added a <script src = main.js> tag to include the main.js file.

So the next step was to start using the components, but I can't get any of them to work, for example
does nothing, and none of the other example components do either. The instructions listed in the "Usage" section of the instructions don't really make sense to me. I've tried including that code in a script tag in my index.html and it didn't do anything, and Webstorm had a bunch of issues with the code too. So I'm not really sure where else to put that, or how else to start including components.

Can anyone point me in the right direction? I've tried googling around but I haven't been able to find any resources that seem to be relevant.

Build fails due to invalid fonticons path

When I try to build my project I get the following error:

events.js:72
throw er; // Unhandled 'error' event
^
Error: '../../node_modules/material-design-fonticons/styles/mdfi.css' wasn't found in file node_modules\material-ui\docs\dist\less\scaffolding.less line no. 9

But if I go into scaffolding.less and change the path from:

@import (less)"../../node_modules/material-design-fonticons/styles/mdfi.css";

to:

@import (less)"../../../node_modules/material-design-fonticons/styles/mdfi.css";

then it works again.

Can't use with server-side rendering

Many of the components use React "addons", which is aliased from react/addons to just react in the browser field in package.json.

On the server, this breaks rendering because it does not pull in the addons. There is no way to do the browserify-style aliasing on the server (as far as I know).

I think the solution should be to get rid of the browser aliasing in package.json and just use require('react/addons') instead of require('react') within the components.

Rapidly pressing paper-buttons selects the label text

I noticed this when testing the ripple effect of the paper-buttons. Double-clicking the button results in the inner label text getting selected.

screenshot:
screen shot 2014-10-18 at 18 23 42

This is quite ugly, one way to prevent this from happening is adding some css to the inner label:
All of the correct CSS variations are:

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Buttons is one place where this is happening, This can be reproduced on your github.io page as well. Toolbar buttons also have this problem.

Why use 2 box-shadow in paper

This Code:

    &.mui-z-depth-1 {
        .lh-box-shadow(0 1px 4px rgba(0, 0, 0, 0.24)); 
        & > .mui-z-depth-bottom { .lh-box-shadow(0 1px 6px rgba(0, 0, 0, 0.12)); }
    }

I can't understand why use two box-shadow. In Google material, It just like this:

button{
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}

Keyboard and general accessibility

It would be nice if the components also worked for keyboard users (also providing the focus styling defined in the Material Design guidelines) and assistive technologies...

[DropDownMenu] Add option to make dropdowns editable

Nice work.

I have two issues tho, on the dropdown.

  • When you double-click on the dropdown on Chrome on Mac, then it breaks the dropdown.
  • Further more, it should be possible to click twice, and then type in letters on the keyboard to navigate the dropdown.

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.