You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
3.4 KiB
92 lines
3.4 KiB
@page "/srbs"
|
|
|
|
@rendermode RenderMode.InteractiveServer
|
|
|
|
<style>
|
|
.shadows div {
|
|
padding: 1rem;
|
|
width: 10rem;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
|
|
<RadzenText TextStyle="TextStyle.H5">Shadows</RadzenText>
|
|
<RadzenStack class="shadows rz-p-12" Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap" JustifyContent="JustifyContent.Center" Gap="3rem">
|
|
<div class="rz-shadow-0">
|
|
<span>.rz-shadow-0</span>
|
|
</div>
|
|
<div class="rz-shadow-2">
|
|
<span>.rz-shadow-2</span>
|
|
</div>
|
|
<div class="rz-shadow-4">
|
|
<span>.rz-shadow-4</span>
|
|
</div>
|
|
<div class="rz-shadow-6">
|
|
<span>.rz-shadow-6</span>
|
|
</div>
|
|
<div class="rz-shadow-8">
|
|
<span>.rz-shadow-8</span>
|
|
</div>
|
|
<div class="rz-shadow-10">
|
|
<span>.rz-shadow-10</span>
|
|
</div>
|
|
</RadzenStack>
|
|
|
|
<RadzenText TextStyle="TextStyle.H5">Ripple Button</RadzenText>
|
|
<div class="rz-p-12 rz-text-align-center">
|
|
<RadzenButton Text="Click Me!" class="rz-ripple"/>
|
|
</div>
|
|
|
|
<RadzenText TextStyle="TextStyle.H5">Ripple Link</RadzenText>
|
|
<div class="rz-p-12 rz-text-align-center">
|
|
<RadzenLink Text="Click Me!" class="rz-ripple" Path="srbs"/>
|
|
</div>
|
|
|
|
<RadzenText TextStyle="TextStyle.H5">Ripple HTML div</RadzenText>
|
|
<div class="rz-p-12 rz-text-align-center rz-color-primary rz-ripple">
|
|
Click Me!
|
|
</div>
|
|
|
|
<RadzenText TextStyle="TextStyle.H5">Breakpoints</RadzenText>
|
|
<RadzenStack class="rz-p-12" Orientation="Orientation.Vertical" Wrap="FlexWrap.Wrap" JustifyContent="JustifyContent.Center" Gap="1rem">
|
|
<div><strong>xs</strong> Extra Small >= 575px</div>
|
|
<div><strong>sm</strong> Small >= 768px</div>
|
|
<div><strong>md</strong> Medium >= 1024px</div>
|
|
<div><strong>lg</strong> Large >= 768px</div>
|
|
<div><strong>xl</strong> Extra Large >= 1920px</div>
|
|
<div><strong>xx</strong> Extra Extra Large >= 2560px</div>
|
|
</RadzenStack>
|
|
|
|
<RadzenText TextStyle="TextStyle.H5">Spacing (Margin)</RadzenText>
|
|
<RadzenStack class="rz-p-12" Orientation="Orientation.Vertical" Wrap="FlexWrap.Wrap" JustifyContent="JustifyContent.Center" Gap="1rem">
|
|
<div><strong>.rz-m-{size}</strong> , where {size} is from 0 to 12, or auto</div>
|
|
<div></div>
|
|
<div><strong>.rz-mx-{size}</strong></div>
|
|
<div><strong>.rz-my-{size}</strong></div>
|
|
<div><strong>.rz-mt-{size}</strong></div>
|
|
<div><strong>.rz-mr-{size}</strong></div>
|
|
<div><strong>.rz-mb-{size}</strong></div>
|
|
<div><strong>.rz-ml-{size}</strong></div>
|
|
</RadzenStack>
|
|
|
|
<RadzenText TextStyle="TextStyle.H5">Spacing (Padding)</RadzenText>
|
|
<RadzenStack class="rz-p-12" Orientation="Orientation.Vertical" Wrap="FlexWrap.Wrap" JustifyContent="JustifyContent.Center" Gap="1rem">
|
|
<div><strong>.rz-p-{size}</strong> , where {size} is from 0 to 12, or auto</div>
|
|
<div></div>
|
|
<div><strong>.rz-px-{size}</strong></div>
|
|
<div><strong>.rz-py-{size}</strong></div>
|
|
<div><strong>.rz-pt-{size}</strong></div>
|
|
<div><strong>.rz-pr-{size}</strong></div>
|
|
<div><strong>.rz-pb-{size}</strong></div>
|
|
<div><strong>.rz-pl-{size}</strong></div>
|
|
</RadzenStack>
|
|
|
|
<RadzenText TextStyle="TextStyle.H5">Spacing (Size)</RadzenText>
|
|
<RadzenStack class="rz-p-12" Orientation="Orientation.Vertical" Wrap="FlexWrap.Wrap" JustifyContent="JustifyContent.Center" Gap="1rem">
|
|
<div><strong>0</strong> 0px</div>
|
|
<div><strong>05</strong> 2px</div>
|
|
<div><strong>1~12</strong> 4~28px, increse 4px each</div>
|
|
</RadzenStack>
|
|
@code {
|
|
|
|
}
|
|
|