SRBS

ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor

@@ -43,6 +43,12 @@
                 <RadzenIcon Icon="aspect_ratio" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;Borders
             </NavLink>
         </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="srbs">
+                <RadzenIcon Icon="event_seat" class="bi" aria-hidden="true"></RadzenIcon>&nbsp;&nbsp;SRBS
+            </NavLink>
+        </div>
     </nav>
 </div>
 

ComponentPractice/ComponentPractice/Components/Pages/SRBS.razor

@@ -0,0 +1,92 @@
+@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 {
+
+}