New Layout Components: MudPage & MudSection

[mckaragoz]

Description

This PR fills the last missing thing about layout. Now we can use CSS Grid's power in a Mud component.

https://user-images.githubusercontent.com/78308169/173829997-7905a9a4-1a08-4761-9d51-a2313b6db7a7.mp4

It supports up to 12 column and row like the MudGrid. And it has extra features that control the MudPage's height. Users can set the page to a fullscreen with a single parameter. MudPage will be really useful to use as the most outer component of a page (not the layout).

https://user-images.githubusercontent.com/78308169/173830366-9fdfed8d-3ece-4ff1-91ab-42c8482d4d03.mp4

And users can divide their application with MudPage with MudSections easily. Here is a basic result.

Now users no need to create their own offset parameters for the MudGrid and MudItems. With MudPage they can place content that no required to next to another one.

How Has This Been Tested?

Visually tested.

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

• [x] The PR is submitted to the correct branch (dev).
• [x] My code follows the code style of this project.
• [ ] I've added relevant tests.

[codecov[bot]]

Codecov Report

Merging #4748 (6f582f7) into dev (76787af) will decrease coverage by 0.01%. The diff coverage is 82.60%.

@@            Coverage Diff             @@
##              dev    #4748      +/-   ##
==========================================
- Coverage   91.38%   91.36%   -0.02%     
==========================================
  Files         365      369       +4     
  Lines       12537    12560      +23     
==========================================
+ Hits        11457    11476      +19     
- Misses       1080     1084       +4     

Impacted Files	Coverage Δ
src/MudBlazor/Base/MudBooleanInput.cs	95.00% <ø> (ø)
src/MudBlazor/Components/Page/MudSection.razor.cs	77.77% <77.77%> (ø)
src/MudBlazor/Components/Page/MudPage.razor.cs	83.33% <83.33%> (ø)
src/MudBlazor/Components/Page/MudPage.razor	100.00% <100.00%> (ø)
src/MudBlazor/Components/Page/MudSection.razor	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 76787af...6f582f7. Read the comment docs.

[mckaragoz]

@MudBlazor/contribution-team this one is ready to review.

[mckaragoz]

For someone who are waiting for the components, we added these components in extension package with full features described in this PR, ready for use.

Nuget: https://www.nuget.org/packages/CodeBeam.MudExtensions GitHub: https://github.com/CodeBeamOrg/CodeBeam.MudExtensions Playground: https://codebeam-mudextensions.pages.dev/