Giter VIP home page Giter VIP logo

mui / material-ui Goto Github PK

View Code? Open in Web Editor NEW
91.3K 1.4K 31.3K 535.42 MB

MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

Home Page: https://mui.com/core/

License: MIT License

JavaScript 44.32% HTML 0.02% TypeScript 55.50% CSS 0.15%
react-components react material-design design-systems hacktoberfest

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

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

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.

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.

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.

Format code properly

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

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!

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.

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.

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?

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

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

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

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.

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.

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!

Browser support

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

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

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