Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Nov 12 23:32

    mlaursen on gh-pages

    Updated to be a redirect to htt… (compare)

  • Nov 12 23:14

    mlaursen on v1

    Fixed github links to be v1 ins… (compare)

  • Nov 12 19:51

    mlaursen on next

    Updated readme for linking to v1 (compare)

  • Nov 12 19:40

    mlaursen on v1

    (compare)

  • Nov 12 16:29
    mlaursen edited #826
  • Nov 11 14:42

    mlaursen on next

    Small fixes (compare)

  • Nov 11 06:36

    mlaursen on next

    ResizeObserver Behavior Fixes a… Fixed missing tooltip dependency Fixed sandboxes that were in fo… (compare)

  • Nov 11 02:41

    mlaursen on next

    Fixed z-index for theme preview (compare)

  • Nov 11 02:33

    mlaursen on next

    Fixed the sheet rendering defau… Documentation Fixes Fixed the … Updated sandboxes for Configura… (compare)

  • Nov 10 23:32
    mlaursen commented #826
  • Nov 10 23:30
    mlaursen commented #826
  • Nov 10 23:16

    mlaursen on next

    More tab fixes and lint fix Added a swipeable tabs example (compare)

  • Nov 10 21:16

    mlaursen on next

    Updated divider spacing vars Updated the AppBarTitle to have… Simplified the AppBar Demo Cont… and 3 more (compare)

  • Nov 10 02:00

    mlaursen on next

    Added localStorage theme backup… (compare)

  • Nov 10 01:28

    mlaursen on next

    Fixed the sandbox aliased paths… (compare)

  • Nov 09 23:34
    mlaursen commented #826
  • Nov 09 22:44

    mlaursen on next

    Initial Tabs Package Work Fixed some list icon/avatar sty… Updated customization routes an… and 7 more (compare)

  • Nov 05 04:19
    mlaursen commented #826
  • Nov 05 03:30

    mlaursen on next

    Fixed theme scssVariables after… (compare)

  • Nov 05 03:28

    mlaursen on next

    Added a new derived height for … Added Stacked Configuration for… Exported the ItemRef and added … and 5 more (compare)

gyorgygutai
@gyorgygutai
this is an example with the bottom navigation, but i see the same on buttons. tested on android google chrome and ios safari. the top one is mobile, bottom one is desktop
Mikkel Laursen
@mlaursen
@gyorgygutai Is the ink problem for the Bottom navigation component only or all ink? I thought I fixed the ink problem on mobile, but that might not be the case. There was a problem where the mobile got ink from touch and focus, so two inks were created and only one removed. I'll have to look into that again
gyorgygutai
@gyorgygutai
All ink as far as i know. Bottom nav, buttons and tabs work as depicted on the gifs.
Mikkel Laursen
@mlaursen
Ok thanks!
Mikkel Laursen
@mlaursen
So, I'm not sure if anyone actually checks in here.. but I have released the the alpha version of v1.0.0. It ended up changing a lot, but it has some pretty good improvements (IMO). I am just working on finish updating the docs and going to complete #143, #144, and #145. https://github.com/mlaursen/react-md/blob/release/1.0.x/docs/src/shared/readmes/upgrade-guides/v1.0.0.md is probably a good place to start for comparisons but it isn't fully up-to-date.
Mikkel Laursen
@mlaursen
Justin Polis
@JustasPolis
Hey, anyone got luck with incorporating react-md into create-react-app ? Tried everything, something does not work.
timworx
@timworx
Hey @JustasPolis, which part are you stuck on, I imagine the Sass integration?
timworx
@timworx

It was a bit wonky for me too. I started by following the steps in facebookincubator/create-react-app#1007.
However, things do deviate a bit in the src/sass/base.css file.

Instead of importing normalize.css and react-md the way it is shown in the react-md installation, I found that I had to import normalize as

@import '../node_modules/normalize.css;'

and, get this, the path for react-md will work as either

@import 'node_modules/react-md/src/scss/react-md';

or

@import '../../node_modules/react-md/src/scss/react-md';

I haven't put too much thought on why that's acting so odd, but it's something I'll have to come back to.

Mikkel Laursen
@mlaursen

If you were following the steps from facebookincubator/create-react-app#1007, you needed to specify the relative paths because it was being run by node-sass instead of webpack; so you didn't get the webpack resolving with the compilation.

I have also updated the installation guide for two addition create-react-app setups, so that might help more for the future.

timworx
@timworx
Nice find with those flags!
Syed Atif
@atifsyedali
anyone know how I can get MenuButton to work correctly with fixed=true? Currently, the Menu shows up elsewhere...
Roderik van der Veer
@roderik
@mlaursen is there a way to get a react element below the navigation in the drawer of the NavigationDrawer? Need some sort of easily available space to display live updating system information, which seems like a good place to do so.
Roderik van der Veer
@roderik
Never mind, found it!
Mikkel Laursen
@mlaursen

@atifsyedali I think that might be impossible at the moment. My Menu component relies on a position: relative parent to display correctly. You could always do something like this(I think):

<div style={{ position: 'fixed', bottom: 16, right: 16 }}>
  <MenuButton {...props} />
</div>

If I can fix my Menu component for #145, it should be possible without the additional wrapper

Mikkel Laursen
@mlaursen

@/all I am probably going to be switching over from gitter to slack since I am more comfortable with integrations/UI and will basically be more available on it.

You can gain access by navigating to https://react-md.herokuapp.com/ and after that just navigate to https://react-md.slack.com

Daniël Terwiel
@Egidius
ok :) see you on the other side
Brandon Johnson
@johnsoncode
I'm coming off of material-ui and am really impressed with this library. One thing that comes to mind though is that there aren't many, if any, examples of how to use react-router in a drawer. Could anyone help me out and point me in the right direction? Thank you!
Mikkel Laursen
@mlaursen

@johnsoncode I hadn't thought about including a react-router example, but that would probably be super beneficial since it is one of the main routers used in react. I can try to update the website to include one for that.

For now.. The only example I have is my documentation website's implementation which might be a bit complicated for an example.

See also:

Brandon Johnson
@johnsoncode
Thank you @mlaursen . I'll take a look at your links for reference, but if you get the chance, I think a full example or two would be hugely beneficial. Thanks again!
Michael Irigoyen
@goyney
Hi, is there a demo or documentation on how to properly set and unset the active state of ListItems ? I can set the initially selected item view the active prop, however the function call for onClick has nothing about the selected index. Thanks!
Mikkel Laursen
@mlaursen
@goyney I will actually have to add a new feature for that. Most of my use-cases for the active prop were by setting active by pathname or setting active by SelectField value match. I'll think about a way to implement it
Shashwat Singh
@shashwattt-Pretlist
@mlaursen Thanks for this awesome library, I am a newbie and this is the best I have seen for React+MDL, a quick query, as per the documentation component's media queries will automatically be included by default when the component's mixin is included, I did @include react-md-everything; and implemented a NavigationDrawer, I am using different vales(types) for drawerType & mobileType, but its not making a difference on change, am I doing something wrong? help is apprecated, thanks in advance :)
Mikkel Laursen
@mlaursen
@shashwattt-Pretlist would you happen to have a repo or code example of usage? If you are using the drawerType prop, that will be the type that will always be displayed on any screen size. It would be up to you to make sure that when the media changes, the drawerType is also correctly updated.
Shashwat Singh
@shashwattt-Pretlist
@mlaursen got that ...Thanks a lot !!
Julien Tanay
@Djiit
Hi there
does anyone know if react-me is based on material design lite or material-components-web ?
Mikkel Laursen
@mlaursen
@Djiit react-md is just based on the docs at https://material.google.com
Julien Tanay
@Djiit
Thanks ;)
Brandon Johnson
@johnsoncode
Is there a way in the data grid to make all the column the same size?
Karega McCoy
@karega
hello
is react-md ES6?
Orlando Ramirez
@oramirez1
I got a quick question. I am trying to add a Link to my Toolbar
I created a MenuButton, and added a ListItem
<ListItem primaryText="Logout" component={Link} />
If I don't added the to="" it will complain
arning: Failed prop type: The prop to is marked as required in Link, but its value is undefined.
Which is correct.
but if I add the to I get this error.
<ListItem primaryText="Logout" component={Link to='/logout'} />
Syntax error: Unexpected token, expected } (12:51)
Orlando Ramirez
@oramirez1
My question is how do I add correctly the Link component in the ListItem component.
Nevermind, I just saw my solution in comments of mlaursen
<ListItem primaryText="Logout" component={Link} to='/logout' />
thanks!
José Diaz Seng
@joseds
Hi, I evaluated material-ui, react toolbox and react-md and stuck with react-md, it fits my webpack workflow best and looks nice, too :smile:, awesome work! I have a question regarding drawers and lists. I would like to put a navigation list (like the one on the react-md documentation) on a drawer which can be toggled. I could not get it working, could you give me an indication how to do this or point to an example?
Mikkel Laursen
@mlaursen
Hey all, if you can try switching to my slack channel https://react-md.slack.com (to get an invite https://react-md.herokuapp.com/) I'll be quicker to respond. I normally don't watch gitter anymore
@joseds I think you might be looking for using one of the persistent or temporary drawer types? So maybe something like this codepen? http://codepen.io/mlaursen03/pen/VpyEWB
José Diaz Seng
@joseds
(discussion continued on slack...)
pedrofolim
@pedrofolim
Srs, how are you? Help me, I need to remove the footer from the expansion panel component for a delivery tomorrow. I have already verified that you corrected this, is there any current version in the npm repository with this fix?