Giter VIP home page Giter VIP logo

material-ui's Introduction

MUI Core 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 library of beautifully designed React UI components built to spark joy.

  • Base UI is a library of unstyled React UI components and hooks. With Base UI, 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.

license npm latest package npm next package npm downloads CircleCI Coverage Status Follow on X Renovate status Average time to resolve an issue Open Collective backers and sponsors CII Best Practices

Documentation

Material UI

Visit https://mui.com/material-ui/ to view the full documentation.

Older versions

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

Joy UI

Visit https://mui.com/joy-ui/getting-started/ to view the full documentation.

Note: Joy UI is still in beta. We are adding new components regularly and you're welcome to contribute!

Base UI

Visit https://mui.com/base-ui/ to view the full documentation.

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

MUI System

Visit https://mui.com/system/getting-started/ to view the full documentation.

Sponsors

Diamond 💎

octopus doit marblism

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

Gold 🏆

via Open Collective or via Patreon

tidelift.com Spotify Icons8 RxDB text-em-all.com megafamous.com dialmycalls.com goread.io

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

More backers

See the full list of our backers.

Questions

For how-to questions that don't involve making changes to the code base, please use Stack Overflow instead of GitHub issues.

Examples

Our documentation features a collection of example projects.

Premium templates

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 is about more than just issues and pull requests! There are many other ways to support Material UI 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 the 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.

BrowserStack logo

BrowserStack lets us test in real browsers.

CodeCov logo

CodeCov lets us monitor test coverage.

material-ui's People

Contributors

alexfauquette avatar 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 m4theushw avatar mbrookes avatar merceyz avatar michaldudak avatar mj12albert avatar mmrtnz avatar mnajdova avatar nathanmarks avatar newoga avatar oliviertassinari avatar renovate[bot] avatar rosskevin avatar sai6855 avatar samuelsycamore avatar shaurya947 avatar siriwatknp avatar vicasas 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

Format code properly

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

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

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);
}

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.

Browser support

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

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

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.

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.

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!

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.

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>
    );

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?

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

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.

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

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!

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.

[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)

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.

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.

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.