Usage
Displayed below we are using different levels of elevation in two different ways. All our components that have elevation also have the Elevation Property
where the elevation level, or shadow can be set.
The same elevation types can be used with our predefined CSS classes.
0
1
4
0
1
4
<MudPaper Elevation="0" Class="py-8 px-10">0</MudPaper> <MudPaper Elevation="1" Class="py-8 px-10">1</MudPaper> <MudPaper Elevation="4" Class="py-8 px-10">4</MudPaper> <div class="mud-elevation-0 py-8 px-10 rounded white">0</div> <div class="mud-elevation-1 py-8 px-10 rounded white">1</div> <div class="mud-elevation-4 py-8 px-10 rounded white">4</div>
Elevation Levels
Every component that has Elevation Property
takes the range betwen 0 - 25 or you can access them with the CSS classes displayed below.
.mud-elevation-0
.mud-elevation-1
.mud-elevation-2
.mud-elevation-3
.mud-elevation-4
.mud-elevation-5
.mud-elevation-6
.mud-elevation-7
.mud-elevation-8
.mud-elevation-9
.mud-elevation-10
.mud-elevation-11
.mud-elevation-12
.mud-elevation-13
.mud-elevation-14
.mud-elevation-15
.mud-elevation-16
.mud-elevation-17
.mud-elevation-18
.mud-elevation-19
.mud-elevation-20
.mud-elevation-21
.mud-elevation-22
.mud-elevation-23
.mud-elevation-24
.mud-elevation-25