Choosing Material Theme does not really look "Material UI" like?

UI Components for React
Post Reply
reyem
Posts: 1
Joined: 03 Nov 2020, 09:14

03 Nov 2020, 09:25

Hi there,

I`m looking for a powerful component library for React following Material Design Guidelines. PrimeReact is functional very interesting. But I`m a bit confused, when it comes to Material Design look and feel. I have found 2 ways.

1.) you allow on your components menu to choose different "Material" Themes. But using them, does not really look like "Material Design". E.g. the input text is a box and not just a line like defined in Material Design.
2.) I found your "Sapphire" Template. This really has a Material Look&Feel. But actually I would only need components. The overall page layout we have done our own.

is there a Theme Option for #1 making it look like in #2? If not, can I use only components from #2 and put them into my own layout?

Thank you for clarification.

cagatay.civici
Prime
Posts: 18450
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

04 Nov 2020, 18:28

1) Material Design is updated by Google time to time, the line based inputs are long gone since they are not usable, they are deprecated by Google and we follow the latest specification.

Some resources;

https://material.io/components/text-fields
https://medium.com/google-design/the-ev ... 3688b3fe03

2.) If you have your own layout, then you just need PrimeReact itself, material themes are included. If you need to change colors with SASS, Theme Designer is the one you need. If not, you can just use the free material themes.

pavel.tavoda@f4s.eu
Posts: 12
Joined: 21 Oct 2020, 10:54

05 Nov 2020, 13:47

I have same problem, how to achieve animation. Label is inside element and when focused label is animated and moved to top.
Is here some setting which I'm missing? At least in https://primefaces.org/primereact/showcase/#/formlayout
there is no such example.

Thanks

mert.sincan
Posts: 4484
Joined: 29 Jun 2013, 12:38

14 Nov 2020, 00:13

Hi,

Please see;
https://primefaces.org/primereact/showcase/#/floatlabel
(Note: you can try it with our Material Themes. I suggest you try configuration options on the left side.)

Best regards,

pavel.tavoda@f4s.eu
Posts: 12
Joined: 21 Oct 2020, 10:54

14 Nov 2020, 13:53

OK, that's what I was looking for, thanks.

JosephWhitfield
Posts: 1
Joined: 17 Nov 2020, 14:36

17 Nov 2020, 14:39

travel.voda@fa.eu wrote:
02 Nov 2020, 02:27
I have same problem, how to achieve animation. Label is inside element and when focused label is animated and moved to top.
Is here some setting which I'm missing? At least in https://primefaces.org/primereact/showcase/#/formlayout
there is no such example.

Thanks
Material UI is a component library for React teeming with powerful components that you should be using in your projects. If you're just looking to create a good looking app, Material UI can provide you with solid pre-styled components that will get the job done.

mert.sincan
Posts: 4484
Joined: 29 Jun 2013, 12:38

19 Nov 2020, 12:45

Thanks a lot! Also, you can easily switch to Bootstrap, Material or custom themes on PrimeReact. Please see all options and Premium layouts in configurator menu.

We'll update all layouts and add new layouts according to Material, Bootstrap and custom design. Please see 'Premium Application Templates' section;
https://primefaces.org/primeng/showcase/#/ (There'll be the same layouts in PrimeReact.)

Best Regards,

pavel.tavoda@f4s.eu
Posts: 12
Joined: 21 Oct 2020, 10:54

22 Nov 2020, 16:07

JosephWhitfield wrote:
17 Nov 2020, 14:39
Material UI is a component library for React teeming with powerful components that you should be using in your projects. If you're just looking to create a good looking app, Material UI can provide you with solid pre-styled components that will get the job done.
I know material UI component library very well. I used it for 3 projects already. Problem is with styling. MUI theming is difficult and fragile. Primefaces allow you to switch theme from Bootstrap to MaterialUI with one codebase. When are you developing generic framework for more customers you never know what they prefer. With PrimeFaces you are free from making this difficult decision (Bootstrap vs MaterialUI). Plus they allow some other looks. I also found very handy SASS layout sources provided for templates. I as developer don't have to care too much about details. Our graphics guys can tune whatever they like afterwards and they don't need me. Just update SASS compile and refresh -> new look, ... ;-)

mert.sincan
Posts: 4484
Joined: 29 Jun 2013, 12:38

23 Nov 2020, 11:54

Hi pavel.tavoda@f4s.eu,

Thank you very much for sharing your experiments with us!!!

These feedbacks motivate us more. ;)
Best Regards,

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: ceyiris and 1 guest