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

column

Browse Source
main
Peace 10 months ago
parent 6de1e88583
commit f8dc4834ee
3 changed files with 198 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. 1
      ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
  2. 196
      ComponentPractice/ComponentPractice/Components/Pages/LayoutColumn.razor
  3. 2
      ComponentPractice/ComponentPractice/wwwroot/app.css

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

@ -35,6 +35,7 @@
<RadzenPanelMenuItem Text="Layout" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layout" />
<RadzenPanelMenuItem Text="Stack" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutstack" />
<RadzenPanelMenuItem Text="Row" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutrow" />
<RadzenPanelMenuItem Text="Column" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutcolumn" />
</RadzenPanelMenuItem>
</RadzenPanelMenu>
</RadzenStack>

196
ComponentPractice/ComponentPractice/Components/Pages/LayoutColumn.razor
Unescape View File

@ -0,0 +1,196 @@
@page "/layoutcolumn"
<style>
.prop {
padding-left: 0.1rem;
padding-right: 0.1rem;
background-color: lightgreen;
}
</style>
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">Auto-layout columns</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
<RadzenText TextStyle="TextStyle.Body1">
If Column size is not specified, the column width is automatically calculated with the available space.
</RadzenText>
<RadzenRow class="rz-mt-3 rz-text-align-center rz-border-info-light" Gap="1rem">
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter">
Col 1 of 4
</RadzenColumn>
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter">
Col 2 of 4
</RadzenColumn>
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter">
Col 3 of 4
</RadzenColumn>
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter">
Col 4 of 4
</RadzenColumn>
</RadzenRow>
</RadzenCard>
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">Column sizes</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
<RadzenText TextStyle="TextStyle.Body1">
When setting column size, make sure that the totoal sum of all column sizes is not greater than 12. Otherwise, columns might be wrapped.
</RadzenText>
<RadzenText TextStyle="TextStyle.H6" class="rz-mt-3">One column with predefined size</RadzenText>
<RadzenRow class="rz-mt-3 rz-text-align-center rz-border-info-light" Gap="1rem">
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter" Size="4">
Size="4"
</RadzenColumn>
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter">
Auto
</RadzenColumn>
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter">
Auto
</RadzenColumn>
</RadzenRow>
<RadzenText TextStyle="TextStyle.H6" class="rz-mt-3">All columns with a predefined size</RadzenText>
<RadzenRow class="rz-mt-3 rz-text-align-center rz-border-info-light" Gap="1rem">
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter" Size="4">
Size="4"
</RadzenColumn>
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter" Size="5">
Size="5"
</RadzenColumn>
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter" Size="3">
Size="3"
</RadzenColumn>
</RadzenRow>
</RadzenCard>
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">Responsive column sizes</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
<RadzenText TextStyle="TextStyle.Body1">
Column adapts to the predefined breakpoint sizes.
</RadzenText>
<RadzenRow class="rz-mt-3 rz-text-align-center rz-border-info-light" Gap="1rem">
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter" Size="12" SizeXS="12" SizeSM="9" SizeMD="7" SizeLG="5" SizeXL="3" SizeXX="1">
Size="12" SizeXS="12" SizeSM="9" SizeMD="7" SizeLG="5" SizeXL="3" SizeXX="1"
</RadzenColumn>
</RadzenRow>
</RadzenCard>
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">Column wrapping</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
<RadzenText TextStyle="TextStyle.Body1">
If the totoal sum of all column sizes is greater than 12, columns might be wrapped. Use <span class="prop">RowGap</span> property to specify the vertical spacing.
</RadzenText>
<RadzenRow class="rz-mt-3 rz-text-align-center rz-border-info-light" Gap="1rem">
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter" Size="12" SizeXS="12" SizeSM="9" SizeMD="7" SizeLG="5" SizeXL="3" SizeXX="1">
Size="12" SizeXS="12" SizeSM="9" SizeMD="7" SizeLG="5" SizeXL="3" SizeXX="1"
</RadzenColumn>
</RadzenRow>
</RadzenCard>
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">Column Offset</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
<RadzenText TextStyle="TextStyle.Body1">
The <span class="prop">Offset</span> property moves the column to the right.
</RadzenText>
<RadzenRow class="rz-mt-3 rz-text-align-center rz-border-info-light" Gap="1rem">
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter" Size="6" Offset="3">
Size="6" Offset="3"
</RadzenColumn>
</RadzenRow>
</RadzenCard>
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">Nested Layout</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
<RadzenText TextStyle="TextStyle.Body1">
The rows and columns can be nested.
</RadzenText>
<RadzenText class="rz-mt-3" TextStyle="TextStyle.H6">Auto-layout columns</RadzenText>
<RadzenRow class="rz-mt-3 rz-text-align-center rz-border-info-light" Gap="1rem">
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter rz-py-5">
Level 1
</RadzenColumn>
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter rz-py-5">
<RadzenRow>
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter rz-py-5">
Level2-1
</RadzenColumn>
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter rz-py-5">
<RadzenRow>
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter rz-py-5">
Level3-1
</RadzenColumn>
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter rz-py-5">
Level3-2
</RadzenColumn>
</RadzenRow>
</RadzenColumn>
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter rz-py-5">
Level2-2
</RadzenColumn>
</RadzenRow>
</RadzenColumn>
</RadzenRow>
<RadzenText class="rz-mt-3" TextStyle="TextStyle.H6">Columns with a predefined size</RadzenText>
<RadzenRow class="rz-mt-3 rz-text-align-center rz-border-info-light" Gap="1rem">
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter rz-py-5" Size="3">
Size="3"
</RadzenColumn>
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter rz-py-5">
AutoSize
<RadzenRow class="rz-text-align-center rz-border-info-light rz-mt-5">
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter rz-py-5" Size="3">
Size="3"
</RadzenColumn>
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter rz-py-5" Size="6">
Size="6"
<RadzenRow class="rz-text-align-center rz-border-info-light rz-mt-5">
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter rz-py-5" Size="6">
Size="6"
</RadzenColumn>
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter rz-py-5" Size="6">
Size="6"
</RadzenColumn>
</RadzenRow>
</RadzenColumn>
<RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter rz-py-5" Size="3">
Size="3"
</RadzenColumn>
</RadzenRow>
</RadzenColumn>
</RadzenRow>
</RadzenCard>
<RadzenCard class="rz-p-4 rz-mt-6">
<RadzenText TextStyle="TextStyle.H5">Gutters</RadzenText>
<hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
<RadzenText TextStyle="TextStyle.Body1">
Spacing between columns can be controlled by setting the <span class="prop">Gap</span> property of the parent <span class="prop">RadzenRow</span> component.
</RadzenText>
<RadzenRow class="rz-text-align-center rz-border-info-light" Gap="1rem">
<RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter">1</RadzenColumn>
<RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter">2</RadzenColumn>
<RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter">3</RadzenColumn>
<RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter">4</RadzenColumn>
<RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter">5</RadzenColumn>
<RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter">6</RadzenColumn>
<RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter">7</RadzenColumn>
<RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter">8</RadzenColumn>
<RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter">9</RadzenColumn>
<RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter">10</RadzenColumn>
<RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter">11</RadzenColumn>
<RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter">12</RadzenColumn>
</RadzenRow>
<RadzenRow class="rz-text-align-center rz-border-info-light" Gap="1rem">
<RadzenColumn class="rz-background-color-info-lighter rz-color-on-info-lighter">Col 1 of 3</RadzenColumn>
<RadzenColumn class="rz-background-color-info-lighter rz-color-on-info-lighter">Col 2 of 3</RadzenColumn>
<RadzenColumn class="rz-background-color-info-lighter rz-color-on-info-lighter">Col 3 of 3</RadzenColumn>
</RadzenRow>
</RadzenCard>
@code {
}

2
ComponentPractice/ComponentPractice/wwwroot/app.css
Unescape View File

@ -48,4 +48,4 @@ h1:focus {
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
}
Write Preview
Loading…
Cancel
Save