Peace
/
BlazorRadzenPracs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

stack

Browse Source
main
Peace 10 months ago
parent 2d413425da
commit a5095e744a
2 changed files with 61 additions and 1 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
  2. 59
      ComponentPractice/ComponentPractice/Components/Pages/LayoutStack.razor

3
ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
Unescape View File

@ -43,7 +43,8 @@
</RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="Layout" Icon="dashboard">
<div onclick="document.querySelector('.navbar-toggler').click()">
<RadzenPanelMenuItem Text="Basic" Icon="dashboard_customize" Path="layout" />
<RadzenPanelMenuItem Text="Layout" Icon="dashboard_customize" Path="layout" />
<RadzenPanelMenuItem Text="Stack" Icon="dashboard_customize" Path="layoutstack" />
</div>
</RadzenPanelMenuItem>
</RadzenPanelMenu>

59
ComponentPractice/ComponentPractice/Components/Pages/LayoutStack.razor
Unescape View File

@ -0,0 +1,59 @@
@page "/layoutstack"
@rendermode RenderMode.InteractiveServer
<RadzenCard class="rz-p-12 rz-m-12">
<RadzenText TextStyle="TextStyle.H5">Stack</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
@* Option card *@
<RadzenCard class="my-4">
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Start" Wrap="FlexWrap.Wrap">
<RadzenStack Orientation="Orientation.Vertical" Gap="4px">
Orientation
<RadzenDropDown @bind-Value="@orientation" TextProperty="Text" ValueProperty="Value" InputAttributes="@(new Dictionary<string, object>() {{ "aria-label", "orientation"}})"
Data="@(Enum.GetValues(typeof(Orientation)).Cast<Orientation>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" />
</RadzenStack>
<RadzenStack Orientation="Orientation.Vertical" Gap="4px">
Alignments
<RadzenDropDown @bind-Value="@alignItems" TextProperty="Text" ValueProperty="Value" InputAttributes="@(new Dictionary<string, object>() {{ "aria-label", "alignItems"}})"
Data="@(Enum.GetValues(typeof(AlignItems)).Cast<AlignItems>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" />
</RadzenStack>
<RadzenStack Orientation="Orientation.Vertical" Gap="4px">
JustifyContent
<RadzenDropDown @bind-Value="@justifyContent" TextProperty="Text" ValueProperty="Value" InputAttributes="@(new Dictionary<string, object>() {{ "aria-label", "justifyContent"}})"
Data="@(Enum.GetValues(typeof(JustifyContent)).Cast<JustifyContent>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" />
</RadzenStack>
<RadzenStack Orientation="Orientation.Vertical" Gap="4px">
FlexWrap
<RadzenDropDown @bind-Value="@flexWrap" TextProperty="Text" ValueProperty="Value" InputAttributes="@(new Dictionary<string, object>() {{ "aria-label", "flexWrap"}})"
Data="@(Enum.GetValues(typeof(FlexWrap)).Cast<FlexWrap>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" />
</RadzenStack>
<RadzenStack Orientation="Orientation.Vertical" Gap="4px">
Gap
<RadzenTextBox @bind-Value="@gap" aria-label="gap" />
</RadzenStack>
<RadzenStack Orientation="Orientation.Vertical" Gap="4px">
Reverse
<RadzenSwitch @bind-Value="@reverse" class="rz-m-3" InputAttributes="@(new Dictionary<string, object>() {{ "aria-label", "reverse"}})" />
</RadzenStack>
</RadzenStack>
</RadzenCard>
@* Stack *@
<RadzenCard class="p-0">
<RadzenStack Orientation="@orientation" Gap="@gap" Reverse="@reverse" JustifyContent="@justifyContent" AlignItems="@alignItems" Wrap="@flexWrap">
<RadzenCard class="p-1 rz-background-color-info rz-color-on-info rz-text-align-center">A</RadzenCard>
<RadzenCard class="p-1 rz-background-color-success rz-color-on-success rz-text-align-center" Style="height:40px; width:40px">B</RadzenCard>
<RadzenCard class="p-1 rz-background-color-warning rz-color-on-warning rz-text-align-center" Style="height:60px; width:60px">C</RadzenCard>
<RadzenCard class="p-1 rz-background-color-danger rz-color-on-danger rz-text-align-center" Style="height:80px; width:80px">D</RadzenCard>
</RadzenStack>
</RadzenCard>
</RadzenCard>
@code {
Orientation orientation = Orientation.Horizontal;
AlignItems alignItems = AlignItems.Normal;
JustifyContent justifyContent = JustifyContent.Normal;
FlexWrap flexWrap = FlexWrap.NoWrap;
string gap = "10px";
bool reverse;
}
Write Preview
Loading…
Cancel
Save