Getting started with Material UI

react
9

I should also have mentioned - the demo app is a (minimal) Meteor application.

10

Just my 2 cents - I’d avoid Materialize if I were you. I started with it and then recently spent two weeks ripping it out of our production app because it caused so many weird css issues. I’ve started using Semantic UI for most things and it seems to work great. I also think it looks a lot cleaner than the Material look (which I’m not a fan of).

1 Like
11

Does anyone else think that it is very slow compared to the alternatives?

I like the idea of Material UI (not Materialize or MDL) because it is primarily a collection of React components as opposed to a full on framework.

I got Material UI working in Meteor using npm and browserify. It was a little difficult because there are major changes in the latest version that break the Leaderboard example.

I found an excellent example on Github by rkstar that addresses the numerous pitfalls. The only issue I had is that I had to build it first with Material UI version 0.12.3 and then once it was running I updated the packages.json file to version 0.12.4. Not sure why this was necessary.

There is also a Meteor package izzilab:material-ui that worked, but I think it is a few minor versions behind.

12

Demo app - very cool. But select not working on my desctop )-: On tablet everything was OK.
But I have a lot of questions, some about material ui, some about formsy:

  1. isWord validation not working with cyrillic, I have to add new rule, I think
  2. localization: is it possible to change locale for DatePicker?
  3. I know, Material mostly for mobile, but where is multiselect select?!
  4. And how to make Text fields(FormsyText) more compact?
13

Not sure, but I think that may be a Material-Ui bug. I need to dig in to it, but I’m not doing anything unusual with that form element.

Also text field validation should only be happening onBlur, not for every character typed. Haven’t had a chance to dig into that either.

14

I also moved to react… With using Meteor Webpack it is easily to import npm modules. For my front end stuff I use ANTD. Main page is in chinese, but with chrome right click, you can translate to your language.

1 Like
15

nice widgets… I have to try this… again
My Chinese is bad, but where is something about localisation?

16

I fixed the onBlur issue - new version published. I haven’t looked at the selectfield isse yet. Regarding your other questions:

  1. Yes, you can create custom rules per the formsy-react docs.
  2. Yes for the result - there is a callback to customise the date format, but not for the widget itself. There is an open issue regarding localisation.
  3. Ask on the material-ui repo.
  4. Pass style props per the Material-UI docs.
17

I found an example that is 10 days old with flow router, react and Material UI:


It has a demo site too:
http://top-shop.meteor.com/

18

That was because 0.12.4 introduced React 0.14, which was a breaking change. That’s now fixed again with 0.12.5 which uses React 0.13.x. Material-UI 0.13 reintroduces React 0.14, so avoid that version of Material-UI until Meteor supports React 0.14.

19

Thanks, that’s very helpful. Do you think it’s better to build with npm manually or use one of the existing Material UI packages on Atmosphere?

I really like how terse the code is with Material UI compared with other UI frameworks that have such long class definitions. I’ve been testing all day and I haven’t noticed any speed issues.

20

The only speed issue I’ve noticed with Material-UI is usage of the DatePicker component - hovering over dates is very laggy, as is submitting a date (to close the dialog).

Besides that, im very impressed with the overall quality of this framework, its made learning react a lot of fun.

21

You can speed up the DatePicker by making the date range smaller. It defaults to 200 years.

minDate = {new Date('January 01, 2015 00:0:00')} 
maxDate = {new Date('January 01, 2020 00:0:00')}
22

Ah, that makes sense - I had reduced the range to a year, but even still it was pretty slow. I just reduced the range even further to 4 months, and it is much faster. Thanks for the input.

One other issue I have noticed though is a flickering of the browser scroll bar when Dialogs are opened (including DatePicker), which shifts all elements over to the right and then back to the left really quickly. It only happens on pages where the scrollbar is rendered (page content height is greater than browser window height). Have you noticed this at all?

23

All clear about 1 and 2
And
3. Multiselect, theoretically, exists https://github.com/callemall/material-ui/issues/1956
4. Not so easy, I found this issue https://github.com/callemall/material-ui/issues/835

24

@rdagger - I prefer to install with meteorhacks:npm, and cosmos:broserify

https://react-in-meteor.readthedocs.org/en/latest/client-npm/

Example app:

25

I performed the manual install based on your link and everything works, but I noticed there are now 2 react folders that appear to be identical:

\packages\npm-container\.npm\package\node_modules\react
and
\.meteor\local\isopacks\npm-container\npm\node_modules\react
26

@rdagger - That seems to be normal.

27

You also have isSpecialWords: https://github.com/christianalfoni/formsy-react/blob/master/API.md#validators

28

Hi!
Can you look to this repo? Maybe I did smth wrong or wrong version )-: