SamProf / MatBlazor

Material Design components for Blazor and Razor Components
http://www.matblazor.com
MIT License
2.84k stars 386 forks source link

Suggestion: Show examples of the components in the demo just like material design does #568

Open EduVencovsky opened 4 years ago

EduVencovsky commented 4 years ago

Hello guys, it's been a while I haven't done anything to contribute to this repo, but I came with an idea.

Sometimes when you are in the docs, you see a huge page with a lots of examples and sometimes there is some combinations of parameters that aren't shown in the demo. One example is the TextField where there is a lot of parameters, but the demo don't show all of it.

So to solve this, I thought of doing something like the material design web components demo, where you have checkboxes, tabs and radio buttons for changing the parameters and enabling you to see all parameters combine.

image

image

This would be something very useful for the TextField if you only want to se the design and if you want to see the code, you can go to de other examples.

It will also make the documentation look much better.

In short, my suggestion is:

I would like to know the contributors opinion on this before doing it.

Thanks for the awesome lib guys!

lindespang commented 4 years ago

Hi! I think this is a great idea. Maybe you can put up a draft and see how it looks? You can branch from my branch lindespang/matblazor_redesign and take it from there (It has not been merged yet but me and Samprof has agreed on the design)

henon commented 4 years ago

Awesome idea @EduVencovsky. Exactly what I was suggesting today in #603. Here is what I wrote:

I have a suggestion: when you are a new user checking out the lib you want to see how the components look and behave, so you click through all the components. But the first thing you see is always the table of properties and every time you have to scroll down to the examples. So I think it would be a good thing to add a small but representative example to the top of each component page. Here is an example how Vuetify does it:

image

or MDC:

image

or Skclusive Material Components, another good looking MDC library for Blazor:

image

EduVencovsky commented 4 years ago

@lindespang great! I will work on that. Today I'm kind of busy but this week I will work something out!