diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelper.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelper.cs new file mode 100644 index 0000000000..446f52e531 --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelper.cs @@ -0,0 +1,13 @@ +using Microsoft.AspNetCore.Razor.TagHelpers; + +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +{ + public class AbpColBreakTagHelper : AbpTagHelper + { + public AbpColBreakTagHelper(AbpColBreakTagHelperService tagHelperService) + : base(tagHelperService) + { + + } + } +} diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelperService.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelperService.cs new file mode 100644 index 0000000000..f414d7682d --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelperService.cs @@ -0,0 +1,18 @@ +using System; +using System.Text; +using Microsoft.AspNetCore.Razor.TagHelpers; +using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers; + +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +{ + public class AbpColBreakTagHelperService : AbpTagHelperService + { + public override void Process(TagHelperContext context, TagHelperOutput output) + { + output.TagName = "div"; + output.Attributes.AddClass("w-100"); + output.TagMode = TagMode.StartTagAndEndTag; + } + + } +} \ No newline at end of file diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs new file mode 100644 index 0000000000..dc64feaeb2 --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs @@ -0,0 +1,40 @@ +using Microsoft.AspNetCore.Razor.TagHelpers; + +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +{ + public class AbpColumnTagHelper : AbpTagHelper + { + // public string Size { get; set; } + + public ColumnSize Size { get; set; } + + public ColumnSize SizeSm { get; set; } + + public ColumnSize SizeMd { get; set; } + + public ColumnSize SizeLg { get; set; } + + public ColumnSize SizeXl { get; set; } + + public ColumnSize Offset { get; set; } + + public ColumnSize OffsetSm { get; set; } + + public ColumnSize OffsetMd { get; set; } + + public ColumnSize OffsetLg { get; set; } + + public ColumnSize OffsetXl { get; set; } + + [HtmlAttributeName("order")] + public ColumnOrder ColumnOrder { get; set; } + + public VerticalAlign VAlign { get; set; } = VerticalAlign.Default; + + public AbpColumnTagHelper(AbpColumnTagHelperService tagHelperService) + : base(tagHelperService) + { + + } + } +} diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs new file mode 100644 index 0000000000..82aa86fcd5 --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs @@ -0,0 +1,108 @@ +using System; +using System.Text; +using Microsoft.AspNetCore.Razor.TagHelpers; +using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers; + +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +{ + public class AbpColumnTagHelperService : AbpTagHelperService + { + public override void Process(TagHelperContext context, TagHelperOutput output) + { + output.TagName = "div"; + output.Attributes.AddClass("col"); + + ProcessSizeClass(output, TagHelper.Size, ""); + ProcessSizeClass(output, TagHelper.SizeSm, "-sm"); + ProcessSizeClass(output, TagHelper.SizeMd, "-md"); + ProcessSizeClass(output, TagHelper.SizeLg, "-lg"); + ProcessSizeClass(output, TagHelper.SizeXl, "-xl"); + + ProcessOffsetClass(output, TagHelper.Offset, ""); + ProcessOffsetClass(output, TagHelper.OffsetSm, "-sm"); + ProcessOffsetClass(output, TagHelper.OffsetMd, "-md"); + ProcessOffsetClass(output, TagHelper.OffsetLg, "-lg"); + ProcessOffsetClass(output, TagHelper.OffsetXl, "-xl"); + + ProcessColumnOrder(output); + ProcessVerticalAlign(output); + } + + protected virtual void ProcessSizeClass(TagHelperOutput output, ColumnSize size, string breakpoint) + { + if (size == ColumnSize.Undefined) + { + return; + } + + var classString = "col" + breakpoint; + + if (size == ColumnSize.Auto) + { + classString += "-auto"; + } + else if (size != ColumnSize._) + { + classString += "-" + size.ToString("D"); + } + + output.Attributes.AddClass(classString); + } + + protected virtual void ProcessOffsetClass(TagHelperOutput output, ColumnSize size, string breakpoint) + { + if (size == ColumnSize.Undefined) + { + return; + } + + var classString = "offset" + breakpoint; + + if (size == ColumnSize._) + { + classString += "-0"; + } + else + { + classString += "-" + size.ToString("D"); + } + + output.Attributes.AddClass(classString); + } + + protected virtual void ProcessVerticalAlign(TagHelperOutput output) + { + if (TagHelper.VAlign == VerticalAlign.Default) + { + return; + } + + output.Attributes.AddClass("align-self-" + TagHelper.VAlign.ToString().ToLowerInvariant()); + } + + protected virtual void ProcessColumnOrder(TagHelperOutput output) + { + if (TagHelper.ColumnOrder == ColumnOrder.Undefined) + { + return; + } + + var classString = "order-"; + + if (TagHelper.ColumnOrder == ColumnOrder.First) + { + classString += "first"; + } + else if (TagHelper.ColumnOrder == ColumnOrder.Last) + { + classString += "last"; + } + else + { + classString += TagHelper.ColumnOrder.ToString("D"); + } + + output.Attributes.AddClass(classString); + } + } +} \ No newline at end of file diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpContainerTagHelper.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpContainerTagHelper.cs new file mode 100644 index 0000000000..bc6c21c842 --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpContainerTagHelper.cs @@ -0,0 +1,11 @@ +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +{ + public class AbpContainerTagHelper : AbpTagHelper + { + public AbpContainerTagHelper(AbpContainerTagHelperService tagHelperService) + : base(tagHelperService) + { + + } + } +} diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpContainerTagHelperService.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpContainerTagHelperService.cs new file mode 100644 index 0000000000..0c2c429907 --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpContainerTagHelperService.cs @@ -0,0 +1,16 @@ +using System.Text; +using Microsoft.AspNetCore.Razor.TagHelpers; +using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers; + +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +{ + public class AbpContainerTagHelperService : AbpTagHelperService + { + public override void Process(TagHelperContext context, TagHelperOutput output) + { + output.TagName = "div"; + output.Attributes.AddClass("container"); + } + + } +} \ No newline at end of file diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelper.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelper.cs new file mode 100644 index 0000000000..900b72fe25 --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelper.cs @@ -0,0 +1,15 @@ +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +{ + public class AbpRowTagHelper : AbpTagHelper + { + public VerticalAlign VAlign { get; set; } = VerticalAlign.Default; + + public HorizontalAlign HAlign { get; set; } = HorizontalAlign.Default; + + public AbpRowTagHelper(AbpRowTagHelperService tagHelperService) + : base(tagHelperService) + { + + } + } +} diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelperService.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelperService.cs new file mode 100644 index 0000000000..53b7588764 --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelperService.cs @@ -0,0 +1,40 @@ +using System.ComponentModel; +using System.Text; +using Microsoft.AspNetCore.Razor.TagHelpers; +using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers; + +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +{ + public class AbpRowTagHelperService : AbpTagHelperService + { + public override void Process(TagHelperContext context, TagHelperOutput output) + { + output.TagName = "div"; + output.Attributes.AddClass("row"); + + ProcessVerticalAlign(output); + ProcessHorizontalAlign(output); + } + + protected virtual void ProcessVerticalAlign(TagHelperOutput output) + { + if (TagHelper.VAlign == VerticalAlign.Default) + { + return; + } + + output.Attributes.AddClass("align-items-" + TagHelper.VAlign.ToString().ToLowerInvariant()); + } + + protected virtual void ProcessHorizontalAlign(TagHelperOutput output) + { + if (TagHelper.HAlign == HorizontalAlign.Default) + { + return; + } + + output.Attributes.AddClass("justify-content-" + TagHelper.HAlign.ToString().ToLowerInvariant()); + } + + } +} \ No newline at end of file diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnOrder.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnOrder.cs new file mode 100644 index 0000000000..f80aef9acc --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnOrder.cs @@ -0,0 +1,21 @@ +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +{ + public enum ColumnOrder + { + Undefined = 0, + _1 = 1, + _2 = 2, + _3 = 3, + _4 = 4, + _5 = 5, + _6 = 6, + _7 = 7, + _8 = 8, + _9 = 9, + _10 = 10, + _11 = 11, + _12 = 12, + First = 13, + Last = 14 + } +} \ No newline at end of file diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnSize.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnSize.cs new file mode 100644 index 0000000000..35a07b99b5 --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnSize.cs @@ -0,0 +1,21 @@ +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +{ + public enum ColumnSize + { + Undefined = 0, + _1 = 1, + _2 = 2, + _3 = 3, + _4 = 4, + _5 = 5, + _6 = 6, + _7 = 7, + _8 = 8, + _9 = 9, + _10 = 10, + _11 = 11, + _12 = 12, + Auto = 13, + _ = -1 + } +} \ No newline at end of file diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/HorizontalAlign.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/HorizontalAlign.cs new file mode 100644 index 0000000000..bc3d7f55e6 --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/HorizontalAlign.cs @@ -0,0 +1,12 @@ +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +{ + public enum HorizontalAlign + { + Default, + Start, + Center, + Around, + Between, + End + } +} \ No newline at end of file diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/VerticalAlign.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/VerticalAlign.cs new file mode 100644 index 0000000000..1d5c3954f6 --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/VerticalAlign.cs @@ -0,0 +1,10 @@ +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +{ + public enum VerticalAlign + { + Default, + Start, + Center, + End + } +} \ No newline at end of file diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Label/AbpLabelTagHelper.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Label/AbpLabelTagHelper.cs new file mode 100644 index 0000000000..b8b439ff3f --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Label/AbpLabelTagHelper.cs @@ -0,0 +1,11 @@ +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Label +{ + public class AbpLabelTagHelper : AbpTagHelper + { + public AbpLabelTagHelper(AbpLabelTagHelperService tagHelperService) + : base(tagHelperService) + { + + } + } +} diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Label/AbpLabelTagHelperService.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Label/AbpLabelTagHelperService.cs new file mode 100644 index 0000000000..45bafc780b --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Label/AbpLabelTagHelperService.cs @@ -0,0 +1,14 @@ +using System.Text; +using Microsoft.AspNetCore.Razor.TagHelpers; + +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Label +{ + public class AbpLabelTagHelperService : AbpTagHelperService + { + public override void Process(TagHelperContext context, TagHelperOutput output) + { + //TODO: fill + } + + } +} \ No newline at end of file diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalFooterTagHelperService.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalFooterTagHelperService.cs index b906a3a613..ac5365c989 100644 --- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalFooterTagHelperService.cs +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalFooterTagHelperService.cs @@ -22,7 +22,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal output.Content.SetHtmlContent(CreateContent()); } - private string CreateContent() + protected virtual string CreateContent() { var sb = new StringBuilder(); diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalHeaderTagHelperService.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalHeaderTagHelperService.cs index 9e86d52999..bbd739c789 100644 --- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalHeaderTagHelperService.cs +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalHeaderTagHelperService.cs @@ -13,7 +13,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal output.Content.SetHtmlContent(CreateContent()); } - private string CreateContent() + protected virtual string CreateContent() { var sb = new StringBuilder(); diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelperService.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelperService.cs index f9e0e97609..4abb99b5f4 100644 --- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelperService.cs +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelperService.cs @@ -12,7 +12,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal output.PostContent.SetHtmlContent(CreatePostContent()); } - private string CreatePreContent() + protected virtual string CreatePreContent() { var sb = new StringBuilder(); @@ -23,7 +23,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal return sb.ToString(); } - private string CreatePostContent() + protected virtual string CreatePostContent() { var sb = new StringBuilder(); diff --git a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Forms.cshtml b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Forms.cshtml new file mode 100644 index 0000000000..30d8008e0e --- /dev/null +++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Forms.cshtml @@ -0,0 +1,23 @@ +@page +@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.FormsModel +@{ + ViewData["Title"] = "Forms"; +} + +

Forms

+ +

Based on Bootstrap form.

+ +

# Example

+ +
+
+ +
+
+ 
+
+
+
+
+ diff --git a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Forms.cshtml.cs b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Forms.cshtml.cs new file mode 100644 index 0000000000..ab186db51a --- /dev/null +++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Forms.cshtml.cs @@ -0,0 +1,12 @@ +using Microsoft.AspNetCore.Mvc.RazorPages; + +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components +{ + public class FormsModel : PageModel + { + public void OnGet() + { + + } + } +} \ No newline at end of file diff --git a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml new file mode 100644 index 0000000000..aa12bf5431 --- /dev/null +++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml @@ -0,0 +1,266 @@ +@page +@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.GridsModel +@{ + ViewData["Title"] = "Grids"; +} + +

Grids

+ +

Based on Bootstrap grid.

+ +

# Example

+ +
+
+ + + One of two columns + One of two columns + + + One of three columns + One of three columns + One of three columns + + +
+
+ 
+<abp-container>
+     <abp-row>
+         <abp-column size-sm="C6">One of two columns</abp-column>
+         <abp-column size-sm="C6">One of two columns</abp-column>
+     </abp-row>
+     <abp-row>
+         <abp-column size-sm="C4">One of three columns</abp-column>
+         <abp-column size-sm="C4">One of three columns</abp-column>
+         <abp-column size-sm="C4">One of three columns</abp-column>
+     </abp-row>
+</abp-container>
+
+
+
+ +

# Break Column Example

+ +
+
+ + + One of three columns + One of three columns + @* TODO: abp-column-break *@ + One of three columns + + +
+
+ 
+ <abp-container>
+     <abp-row>
+         <abp-column>One of three columns</abp-column>
+         <abp-column>One of three columns</abp-column>
+         <abp-col-break /> @* TODO: abp-column-break *@
+         <abp-column>One of three columns</abp-column>
+     </abp-row>
+ </abp-container>
+
+
+
+ +

# Vertical alignment Example

+ +
+
+ + + One of three columns + One of three columns + One of three columns + + + One of three columns + One of three columns + One of three columns + + + One of three columns + One of three columns + One of three columns + + +
+
+ 
+<abp-container>
+     <abp-row v-align="Start">
+        <abp-column>One of three columns</abp-column>
+        <abp-column>One of three columns</abp-column>
+        <abp-column>One of three columns</abp-column>
+     </abp-row>
+     <abp-row v-align="Center">
+         <abp-column>One of three columns</abp-column>
+         <abp-column>One of three columns</abp-column>
+         <abp-column>One of three columns</abp-column>
+     </abp-row>
+     <abp-row v-align="End">
+         <abp-column>One of three columns</abp-column>
+         <abp-column>One of three columns</abp-column>
+         <abp-column>One of three columns</abp-column>
+     </abp-row>
+ </abp-container>
+
+
+
+ +

# Vertical alignment Example 2

+ +
+
+ + + One of three columns + One of three columns + One of three columns + + +
+
+ 
+ <abp-container>
+    <abp-row>
+        <abp-column v-align="Start">One of three columns</abp-column>
+        <abp-column v-align="Center">One of three columns</abp-column>
+        <abp-column v-align="End">One of three columns</abp-column>
+     </abp-row>
+ </abp-container>
+
+
+
+ +

# Horizontal alignment Example

+ +
+
+ + + One of three columns + One of three columns + + + One of three columns + One of three columns + + + One of three columns + One of three columns + + + One of three columns + One of three columns + + + One of three columns + One of three columns + + +
+
+ 
+ <abp-container>
+    <abp-row h-align="Start">
+        <abp-column size="C4">One of three columns</abp-column>
+        <abp-column size="C4">One of three columns</abp-column>
+    </abp-row>
+    <abp-row h-align="Center">
+        <abp-column size="C4">One of three columns</abp-column>
+        <abp-column size="C4">One of three columns</abp-column>
+    </abp-row>
+    <abp-row h-align="End">
+        <abp-column size="C4">One of three columns</abp-column>
+        <abp-column size="C4">One of three columns</abp-column>
+    </abp-row>
+        <abp-row h-align="Around">
+        <abp-column size="C4">One of three columns</abp-column>
+        <abp-column size="C4">One of three columns</abp-column>
+    </abp-row>
+    <abp-row h-align="Between">
+        <abp-column size="C4">One of three columns</abp-column>
+        <abp-column size="C4">One of three columns</abp-column>
+    </abp-row>
+ </abp-container>
+
+
+
+ +

# Order Example

+ +
+
+ + + First, but unordered + Second, but last + Third, but first + + + First, but unordered + Second, but last + Third, but first + + +
+
+ 
+ <abp-container>
+    <abp-row>
+        <abp-column> First, but unordered</abp-column>
+        <abp-column order="C12">Second, but last</abp-column>
+        <abp-column order="C1">Third, but first</abp-column>
+    </abp-row>
+    <abp-row>
+        <abp-column> First, but unordered</abp-column>
+        <abp-column order="Last">Second, but last</abp-column>
+        <abp-column order="First">Third, but first</abp-column>
+    </abp-row>
+ </abp-container>
+
+
+
+ +

# Offset Example

+ +
+
+ + .col-md-4 + .col-md-4 .offset-md-4 + + + .col-md-3 .offset-md-3 + .col-md-3 .offset-md-3 + + + .col-md-6 .offset-md-3 + +
+
+ 
+ <abp-row>
+    <abp-column> .col-md-4</abp-column>
+    <abp-column size-md="C4" offset-md="C4">.col-md-4 .offset-md-4</abp-column>
+ </abp-row>
+ <abp-row>
+    <abp-column size-md="C3" offset-md="C3">.col-md-3 .offset-md-3</abp-column>
+    <abp-column size-md="C3" offset-md="C3">.col-md-3 .offset-md-3</abp-column>
+ </abp-row>
+ <abp-row>
+    <abp-column size-md="C6" offset-md="C3">.col-md-6 .offset-md-3</abp-column>
+ </abp-row>
+
+
+
+ +
+ +< back \ No newline at end of file diff --git a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml.cs b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml.cs new file mode 100644 index 0000000000..87e82dca94 --- /dev/null +++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml.cs @@ -0,0 +1,12 @@ +using Microsoft.AspNetCore.Mvc.RazorPages; + +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components +{ + public class GridsModel : PageModel + { + public void OnGet() + { + + } + } +} \ No newline at end of file diff --git a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml index 14795c2a97..39f05f6f61 100644 --- a/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml +++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml @@ -8,6 +8,8 @@