So we can build upon it for Vue.js

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} />

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

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

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

Hi, I'm using this package in my project, but when I was trying to use the icon, I found there's not too much options.

So I was wondering if you could include the google/material-design-icons?

Thanks for making this!

I tried Safari, Chrome (Canary) and Firefox on OSX and I can't see any Icons at http://material-ui.com/#/components/menus when I look at the Icon Menu.

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

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.

You're using transform without -webkit-transform, so stuff breaks on Safari. Likewise, they probably break on iOS Safari and Android's stock browser.

It would be nice to implement tabs.

http://www.google.com/design/spec/components/tabs.html

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.

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!

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

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.

If you reveal the menu then click where an option is/will be before the animation completes, it will never run the animation again and all but the selected item will remain hidden and all items will be clickable/selectable.

Chrome 38 stable.

Played with on this page: http://material-ui.com/#/components/dropdown-menu

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

https://github.com/callemall/material-ui/blob/3324f57d1b4f65d4cddb610a9c8f0c51b13d3cf6/docs/dist/js/dialog.jsx#L13

https://github.com/callemall/material-ui/blob/3324f57d1b4f65d4cddb610a9c8f0c51b13d3cf6/docs/dist/js/dialog.jsx#L33

Inconsistent indentation: https://github.com/callemall/material-ui/blob/3324f57d1b4f65d4cddb610a9c8f0c51b13d3cf6/docs/dist/js/menu.jsx vs https://github.com/callemall/material-ui/blob/3324f57d1b4f65d4cddb610a9c8f0c51b13d3cf6/docs/dist/js/dialog.jsx

Has this been discussed? Since both are widely used, it would be terrific if users could choose to which they preferred.

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

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

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

Ripples should trigger on mousedown. See:

https://www.polymer-project.org/components/paper-ripple/demo.html

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.

Let's add the ability to apply a label to the checkbox/radio.

Hi,

I tried your demos and the menu doesn't seem to work. FF web console doesn't show any errors but lots of warnings.

FF 33 on Ubuntu 14.04

I couldn't find a way to mutate input value (selected item in dropdown or value in input). It would be nice if we could use standard interactive props from React.

See http://facebook.github.io/react/docs/forms.html and interactive inputs

I came up with a simple idea to make material-ui exportable as bootstrap 3/foundation 5 extension so it will be possible to apply material-ui colors, addons and overrides to these frameworks.

http://material-ui.com/#/components/dropdown-menu
It's not immediately obvious that this component is a dropdown, because the arrow is too far to the right.

Compare with: http://www.google.co.uk/design/spec/components/menus.html#menus-usage

HN discussion: https://news.ycombinator.com/item?id=8582779

Slow as hell on rMBP / Safari. It provides very bad user experience.

Anything we can do about it?

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.

I could use navigation yesterday but now it does not react when I try to go to other section of the documentation.

Demo has artifact on Safari(Version 8.0 (10600.1.25)).

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

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:

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

Move component CSS into Javascript to remove the need for adding CSS/Less files to projects.

Suggest comes from seeing this slideshow https://speakerdeck.com/vjeux/react-css-in-js from @vjeux

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.

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.

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!

GitHub Pages branch is broken on mobile.

Transition and your react not working on firefox and have a notice..

saw your site in product hunt. Opened link from iPhone into Chrome. Page was not rendering properly with many layout issues.

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?

It'd be nice to be able to do something like

<Input onChange={this._changeHandler} />

Is it possible to integrate in an angular.js app?

Hi, first thanks for your contribution.

It would be really useful to make a meteor package, and make it easy to install in meteor projects. Here are some links.

https://www.meteor.com/
https://atmospherejs.com/
https://atmospherejs.com/i/installing

Thanks.

Hi, the style of dropdown menu is broken on Safari. http://callemall.github.io/material-ui/#/components/menus

My browser:

User-Agent  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10) AppleWebKit/600.1.25 (KHTML, like Gecko) Version/8.0 Safari/600.1.25

Before selecting:

While selecting:

After selecting:

Not work =(

I'm not able to set a ref attribute on the Input component.

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.

This little snippet solves the problem

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

Dialog should close by pressing the escape key.

Screenshot taken on Chrome for Mac. In the Demos, your left nav shadow is slightly visible on the left side of the screen even while it is docked.