From 89b9501336a1b21510ac430881b92c0e09d376f3 Mon Sep 17 00:00:00 2001 From: yekalkan Date: Tue, 24 Apr 2018 17:53:19 +0300 Subject: [PATCH 01/10] Grid & label tag helpers (Incomplete) --- .../TagHelpers/Grid/AbpColumnTagHelper.cs | 13 ++++++++++ .../Grid/AbpColumnTagHelperService.cs | 25 +++++++++++++++++++ .../TagHelpers/Grid/AbpContainerTagHelper.cs | 11 ++++++++ .../Grid/AbpContainerTagHelperService.cs | 15 +++++++++++ .../TagHelpers/Grid/AbpRowTagHelper.cs | 11 ++++++++ .../TagHelpers/Grid/AbpRowTagHelperService.cs | 15 +++++++++++ .../TagHelpers/Label/AbpLabelTagHelper.cs | 11 ++++++++ .../Label/AbpLabelTagHelperService.cs | 14 +++++++++++ 8 files changed, 115 insertions(+) create mode 100644 src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs create mode 100644 src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs create mode 100644 src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpContainerTagHelper.cs create mode 100644 src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpContainerTagHelperService.cs create mode 100644 src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelper.cs create mode 100644 src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelperService.cs create mode 100644 src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Label/AbpLabelTagHelper.cs create mode 100644 src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Label/AbpLabelTagHelperService.cs 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..ff46f6440a --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs @@ -0,0 +1,13 @@ +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +{ + public class AbpColumnTagHelper : AbpTagHelper + { + public string Breakpoint { get; set; } + + 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..8bf55192bd --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs @@ -0,0 +1,25 @@ +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.Attributes.AddClass("col"); + + SetBreakpoint(output); + } + + protected virtual void SetBreakpoint(TagHelperOutput output) + { + if (!string.IsNullOrWhiteSpace(TagHelper.Breakpoint)) + { + output.Attributes.AddClass("col-"+TagHelper.Breakpoint); + } + } + } +} \ 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..36ac30bd82 --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpContainerTagHelperService.cs @@ -0,0 +1,15 @@ +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.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..473cc1c4e9 --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelper.cs @@ -0,0 +1,11 @@ +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +{ + public class AbpRowTagHelper : AbpTagHelper + { + 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..e5bf4efb41 --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelperService.cs @@ -0,0 +1,15 @@ +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.Attributes.AddClass("row"); + } + + } +} \ 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 From 4199e7cab08f34d595b6c6b6c8f9390bf8619441 Mon Sep 17 00:00:00 2001 From: yekalkan Date: Tue, 24 Apr 2018 17:54:06 +0300 Subject: [PATCH 02/10] Modal tag helper methods made virtual --- .../TagHelpers/Modal/AbpModalFooterTagHelperService.cs | 2 +- .../TagHelpers/Modal/AbpModalHeaderTagHelperService.cs | 2 +- .../TagHelpers/Modal/AbpModalTagHelperService.cs | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) 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(); From 1edb8b6296fcb72bbf74b726c700982522bc51ba Mon Sep 17 00:00:00 2001 From: yekalkan Date: Wed, 25 Apr 2018 09:13:22 +0300 Subject: [PATCH 03/10] Vertical/Horizontal align for grid taghelpers --- .../TagHelpers/Grid/AbpColumnTagHelper.cs | 4 ++- .../Grid/AbpColumnTagHelperService.cs | 17 +++++++---- .../Grid/AbpContainerTagHelperService.cs | 1 + .../TagHelpers/Grid/AbpRowTagHelper.cs | 4 +++ .../TagHelpers/Grid/AbpRowTagHelperService.cs | 29 +++++++++++++++++-- .../TagHelpers/Grid/HorizontalAlign.cs | 12 ++++++++ .../TagHelpers/Grid/VerticalAlign.cs | 10 +++++++ 7 files changed, 69 insertions(+), 8 deletions(-) create mode 100644 src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/HorizontalAlign.cs create mode 100644 src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/VerticalAlign.cs 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 index ff46f6440a..9685490bd7 100644 --- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs @@ -2,7 +2,9 @@ { public class AbpColumnTagHelper : AbpTagHelper { - public string Breakpoint { get; set; } + public string Size { 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 index 8bf55192bd..a12980c0fa 100644 --- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs @@ -9,17 +9,24 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid { public override void Process(TagHelperContext context, TagHelperOutput output) { - output.Attributes.AddClass("col"); + output.TagName = "div"; - SetBreakpoint(output); + ProcessColClass(output); } - protected virtual void SetBreakpoint(TagHelperOutput output) + protected virtual void ProcessColClass(TagHelperOutput output) { - if (!string.IsNullOrWhiteSpace(TagHelper.Breakpoint)) + output.Attributes.AddClass("col" + (string.IsNullOrWhiteSpace(TagHelper.Size)? "" : "-" + TagHelper.Size)); + } + + protected virtual void ProcessVerticalAlign(TagHelperOutput output) + { + if (TagHelper.VAlign == VerticalAlign.Default) { - output.Attributes.AddClass("col-"+TagHelper.Breakpoint); + return; } + + output.Attributes.AddClass("align-self-" + TagHelper.VAlign.ToString().ToLowerInvariant()); } } } \ No newline at end of file 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 index 36ac30bd82..0c2c429907 100644 --- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpContainerTagHelperService.cs +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpContainerTagHelperService.cs @@ -8,6 +8,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid { public override void Process(TagHelperContext context, TagHelperOutput output) { + output.TagName = "div"; output.Attributes.AddClass("container"); } 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 index 473cc1c4e9..900b72fe25 100644 --- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelper.cs +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelper.cs @@ -2,6 +2,10 @@ { 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 index e5bf4efb41..53b7588764 100644 --- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelperService.cs +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpRowTagHelperService.cs @@ -1,4 +1,5 @@ -using System.Text; +using System.ComponentModel; +using System.Text; using Microsoft.AspNetCore.Razor.TagHelpers; using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers; @@ -8,8 +9,32 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid { 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/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 From 5bed8117a4e79c94cd58e7cbb48e1c77d3a7a7ad Mon Sep 17 00:00:00 2001 From: yekalkan Date: Wed, 25 Apr 2018 10:04:24 +0300 Subject: [PATCH 04/10] Added AbpBreakColTagHelper & Added Column Order --- .../TagHelpers/Grid/AbpBreakColTagHelper.cs | 13 +++++++++++++ .../Grid/AbpBreakColTagHelperService.cs | 18 ++++++++++++++++++ .../TagHelpers/Grid/AbpColumnTagHelper.cs | 7 ++++++- .../Grid/AbpColumnTagHelperService.cs | 11 +++++++++++ 4 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelper.cs create mode 100644 src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelperService.cs diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelper.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelper.cs new file mode 100644 index 0000000000..0c8a1042ef --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelper.cs @@ -0,0 +1,13 @@ +using Microsoft.AspNetCore.Razor.TagHelpers; + +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +{ + public class AbpBreakColTagHelper : AbpTagHelper + { + public AbpBreakColTagHelper(AbpBreakColTagHelperService tagHelperService) + : base(tagHelperService) + { + + } + } +} diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelperService.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelperService.cs new file mode 100644 index 0000000000..20eb32e0dc --- /dev/null +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelperService.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 AbpBreakColTagHelperService : 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 index 9685490bd7..019440a60a 100644 --- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs @@ -1,9 +1,14 @@ -namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid +using Microsoft.AspNetCore.Razor.TagHelpers; + +namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid { public class AbpColumnTagHelper : AbpTagHelper { public string Size { get; set; } + [HtmlAttributeName("order")] + public string ColumnOrder { get; set; } + public VerticalAlign VAlign { get; set; } = VerticalAlign.Default; public AbpColumnTagHelper(AbpColumnTagHelperService 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 index a12980c0fa..b14d87e59d 100644 --- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs @@ -12,6 +12,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid output.TagName = "div"; ProcessColClass(output); + ProcessColumnOrder(output); } protected virtual void ProcessColClass(TagHelperOutput output) @@ -28,5 +29,15 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid output.Attributes.AddClass("align-self-" + TagHelper.VAlign.ToString().ToLowerInvariant()); } + + protected virtual void ProcessColumnOrder(TagHelperOutput output) + { + if (string.IsNullOrWhiteSpace(TagHelper.ColumnOrder)) + { + return; + } + + output.Attributes.AddClass("order-" + TagHelper.ColumnOrder.ToLowerInvariant()); + } } } \ No newline at end of file From bce030576ef51cd703d946f76856afacbba3ff3f Mon Sep 17 00:00:00 2001 From: yekalkan Date: Wed, 25 Apr 2018 10:13:33 +0300 Subject: [PATCH 05/10] Added offset to column tag helper --- .../TagHelpers/Grid/AbpColumnTagHelper.cs | 2 ++ .../TagHelpers/Grid/AbpColumnTagHelperService.cs | 11 +++++++++++ 2 files changed, 13 insertions(+) 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 index 019440a60a..786dfe0b88 100644 --- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs @@ -6,6 +6,8 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid { public string Size { get; set; } + public string Offset { get; set; } + [HtmlAttributeName("order")] public string ColumnOrder { get; set; } 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 index b14d87e59d..8789d1e450 100644 --- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs @@ -13,6 +13,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid ProcessColClass(output); ProcessColumnOrder(output); + ProcessOffset(output); } protected virtual void ProcessColClass(TagHelperOutput output) @@ -39,5 +40,15 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid output.Attributes.AddClass("order-" + TagHelper.ColumnOrder.ToLowerInvariant()); } + + protected virtual void ProcessOffset(TagHelperOutput output) + { + if (string.IsNullOrWhiteSpace(TagHelper.Offset)) + { + return; + } + + output.Attributes.AddClass("Offset-" + TagHelper.Offset.ToLowerInvariant()); + } } } \ No newline at end of file From df22b687a1d76dd8b28a3ff6d43b6aa8b9543202 Mon Sep 17 00:00:00 2001 From: yekalkan Date: Wed, 25 Apr 2018 10:43:25 +0300 Subject: [PATCH 06/10] Grid tag helper examples (Also a fix for offset attr.) --- .../Grid/AbpColumnTagHelperService.cs | 2 +- .../Pages/Components/Grids.cshtml | 182 ++++++++++++++++++ .../Pages/Components/Grids.cshtml.cs | 12 ++ .../Pages/Index.cshtml | 1 + 4 files changed, 196 insertions(+), 1 deletion(-) create mode 100644 test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml create mode 100644 test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml.cs 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 index 8789d1e450..ea4744e934 100644 --- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs +++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs @@ -48,7 +48,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid return; } - output.Attributes.AddClass("Offset-" + TagHelper.Offset.ToLowerInvariant()); + output.Attributes.AddClass("offset-" + TagHelper.Offset.ToLowerInvariant()); } } } \ 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..0675ad9bf3 --- /dev/null +++ b/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml @@ -0,0 +1,182 @@ +@page +@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.GridsModel +@{ + ViewData["Title"] = "Cards"; +} + +

Cards

+ +@* +

# Example

+ +
+
+
+
+ 

+        

+    

+*@
+
+
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
+            
+        
+    

+    

+        
+<div class="container">
+    <div class="row">
+        <div class="col-sm-6">
+             One of two columns
+        </div>
+        <div class="col-sm-6">
+             One of two columns
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-sm-4">
+              One of three columns
+        </div>
+        <div class="col-sm-4">
+             One of three columns
+        </div>
+        <div class="col-sm-4">
+             One of three columns
+        </div>
+    </div>
+</div>
+

+    

+

+
+
# Break Column Example

+
+

+    

+        
+            
+                One of three columns
+                One of three columns
+                
+                One of three columns
+            
+        
+    

+    

+        
+<div class="container">
+    <div class="row">
+         <div class="col">
+             One of three columns
+         </div>
+         <div class="col">
+             One of three columns
+        </div>
+        <div class="w-100"></div>
+         <div class="col">
+             One of three columns
+        </div>
+    </div>
+</div>
+

+    

+

+
+
# Order Example

+
+

+    

+        
+            
+                 First, but unordered
+                Second, but last
+                Third, but first
+            
+            
+                 First, but unordered
+                Second, but last
+                Third, but first
+            
+        
+    

+    

+        
+<div class="container">
+    <div class="row">
+        <div class="col">
+          First, but unordered
+        </div>
+        <div class="col order-12">
+            Second, but last
+        </div>
+        <div class="col order-1">
+             Third, but first
+         </div>
+    </div>
+    <div class="row">
+        <div class="col">
+          First, but unordered
+        </div>
+        <div class="col order-last">
+            Second, but last
+        </div>
+        <div class="col order-first">
+             Third, but first
+         </div>
+    </div>
+</div>
+

+    

+

+
+
# 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
+        
+    

+    

+        
+<div class="row">
+     <div class="col-md-4">.col-md-4</div>
+     <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
+</div>
+<div class="row">
+    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
+    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
+</div>
+<div class="row">
+     <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
+</div>
+

+    

+

+
+

+
+< 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..eb327b1e1f 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,7 @@
 
 
 

From 2601e6438265dbd3b678f275e60d73e4a00cd47c Mon Sep 17 00:00:00 2001
From: yekalkan 
Date: Wed, 25 Apr 2018 11:22:16 +0300
Subject: [PATCH 07/10] Vertical and Horizontal examples in grip tag helper
 (Also a fix fox colTagHelper)

---
 .../Grid/AbpColumnTagHelperService.cs         |   1 +
 .../Pages/Components/Grids.cshtml             | 175 +++++++++++++++++-
 2 files changed, 173 insertions(+), 3 deletions(-)

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
index ea4744e934..379b13260e 100644
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs
@@ -12,6 +12,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
             output.TagName = "div";
 
             ProcessColClass(output);
+            ProcessVerticalAlign(output);
             ProcessColumnOrder(output);
             ProcessOffset(output);
         }
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
index 0675ad9bf3..7cce3f07de 100644
--- 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
@@ -1,7 +1,7 @@
 @page
 @model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.GridsModel
 @{
-    ViewData["Title"] = "Cards";
+    ViewData["Title"] = "Grids";
 }
 
 
Cards

@@ -71,7 +71,7 @@
             
                 One of three columns
                 One of three columns
-                
+                
                 One of three columns
             
         
@@ -96,6 +96,175 @@
     
 
 
+
# 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
+            
+        
+    

+    

+        
+<div class="container">
+     <div class="row align-items-start">
+        <div class="col">
+             One of three columns
+        </div>
+        <div class="col">
+            One of three columns
+        </div>
+        <div class="col">
+            One of three columns
+        </div>
+    </div>
+    <div class="row align-items-center">
+        <div class="col">
+            One of three columns
+        </div>
+        <div class="col">
+            One of three columns
+        </div>
+        <div class="col">
+            One of three columns
+        </div>
+    </div>
+    <div class="row align-items-end">
+        <div class="col">
+            One of three columns
+        </div>
+        <div class="col">
+            One of three columns
+        </div>
+       <div class="col">
+        One of three columns
+        </div>
+    </div>
+</div>
+

+    

+

+
+
# Vertical alignment Example 2

+
+

+    

+        
+            
+                One of three columns
+                One of three columns
+                One of three columns
+            
+        
+    

+    

+        
+<div class="container">
+    <div class="row">
+        <div class="col align-self-start">
+            One of three columns
+        </div>
+        <div class="col align-self-center">
+            One of three columns
+        </div>
+        <div class="col align-self-end">
+             One of three columns
+        </div>
+    </div>
+</div>
+

+    

+

+
+
# 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
+            
+        
+    

+    

+        
+<div class="container">
+    <div class="row justify-content-start">
+        <div class="col-4">
+             One of two columns
+         </div>
+         <div class="col-4">
+             One of two columns
+         </div>
+    </div>
+     <div class="row justify-content-center">
+        <div class="col-4">
+             One of two columns
+         </div>
+         <div class="col-4">
+             One of two columns
+         </div>
+    </div>
+     <div class="row justify-content-end">
+        <div class="col-4">
+             One of two columns
+         </div>
+         <div class="col-4">
+             One of two columns
+         </div>
+    </div>
+     <div class="row justify-content-around">
+         <div class="col-4">
+            One of two columns
+         </div>
+                 <div class="col-4">
+             One of two columns
+         </div>
+     </div>
+    <div class="row justify-content-between">
+        <div class="col-4">
+            One of two columns
+        </div>
+        <div class="col-4">
+             One of two columns
+        </div>
+    </div>
+</div>
+

+    

+

+
 
# Order Example

 
 

@@ -147,7 +316,7 @@
 
 

     

-        
+
         
              .col-md-4
             .col-md-4 .offset-md-4

From 563fec4fbe1afa56b1acec8a6dc671eaf0aea309 Mon Sep 17 00:00:00 2001
From: yekalkan 
Date: Wed, 25 Apr 2018 11:42:51 +0300
Subject: [PATCH 08/10] Fixes in grid tag helper examples

---
 .../Pages/Components/Grids.cshtml                  | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

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
index 7cce3f07de..f7e6749187 100644
--- 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
@@ -4,19 +4,7 @@
     ViewData["Title"] = "Grids";
 }
 
-
Cards

-
-@*
-    
# Example

-
-    

-        

-        

-        

-    

-        

-    

-*@
+
Grids

 
 
Based on  Bootstrap grid.

 

From 66ae1998dc022d7140c3fb7b73fe2de86efdf806 Mon Sep 17 00:00:00 2001
From: yekalkan 
Date: Wed, 25 Apr 2018 14:39:36 +0300
Subject: [PATCH 09/10] Grid Tag Helper Refactor

---
 ...olTagHelper.cs => AbpColBreakTagHelper.cs} |   4 +-
 ...vice.cs => AbpColBreakTagHelperService.cs} |   2 +-
 .../TagHelpers/Grid/AbpColumnTagHelper.cs     |  24 +-
 .../Grid/AbpColumnTagHelperService.cs         |  75 ++++-
 .../TagHelpers/Grid/ColumnOrder.cs            |  21 ++
 .../TagHelpers/Grid/ColumnSize.cs             |  20 ++
 .../Pages/Components/Grids.cshtml             | 297 +++++++-----------
 7 files changed, 239 insertions(+), 204 deletions(-)
 rename src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/{AbpBreakColTagHelper.cs => AbpColBreakTagHelper.cs} (54%)
 rename src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/{AbpBreakColTagHelperService.cs => AbpColBreakTagHelperService.cs} (84%)
 create mode 100644 src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnOrder.cs
 create mode 100644 src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnSize.cs

diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelper.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelper.cs
similarity index 54%
rename from src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelper.cs
rename to src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelper.cs
index 0c8a1042ef..446f52e531 100644
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelper.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelper.cs
@@ -2,9 +2,9 @@
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
 {
-    public class AbpBreakColTagHelper : AbpTagHelper
+    public class AbpColBreakTagHelper : AbpTagHelper
     {
-        public AbpBreakColTagHelper(AbpBreakColTagHelperService tagHelperService)
+        public AbpColBreakTagHelper(AbpColBreakTagHelperService tagHelperService)
             : base(tagHelperService)
         {
 
diff --git a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelperService.cs b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelperService.cs
similarity index 84%
rename from src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelperService.cs
rename to src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelperService.cs
index 20eb32e0dc..f414d7682d 100644
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelperService.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelperService.cs
@@ -5,7 +5,7 @@ using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
 {
-    public class AbpBreakColTagHelperService : AbpTagHelperService
+    public class AbpColBreakTagHelperService : AbpTagHelperService
     {
         public override void Process(TagHelperContext context, TagHelperOutput output)
         {
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
index 786dfe0b88..dc64feaeb2 100644
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs
@@ -4,12 +4,30 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
 {
     public class AbpColumnTagHelper : AbpTagHelper
     {
-        public string Size { get; set; }
+       // public string Size { get; set; }
 
-        public string Offset { 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 string ColumnOrder { get; set; }
+        public ColumnOrder ColumnOrder { get; set; }
 
         public VerticalAlign VAlign { get; set; } = VerticalAlign.Default;
 
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
index 379b13260e..bf530eb0b3 100644
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs
@@ -10,16 +10,60 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
         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");
 
-            ProcessColClass(output);
-            ProcessVerticalAlign(output);
             ProcessColumnOrder(output);
-            ProcessOffset(output);
+            ProcessVerticalAlign(output);
+        }
+
+        protected virtual void ProcessSizeClass(TagHelperOutput output, ColumnSize size, string breakpoint)
+        {
+            if (size == ColumnSize.Empty)
+            {
+                return;
+            }
+
+            var classString = "col" + breakpoint;
+
+            if (size != ColumnSize.C)
+            {
+                classString += "-" + size.ToString("D");
+            }
+
+            output.Attributes.AddClass(classString);
         }
 
-        protected virtual void ProcessColClass(TagHelperOutput output)
+        protected virtual void ProcessOffsetClass(TagHelperOutput output, ColumnSize size, string breakpoint)
         {
-            output.Attributes.AddClass("col" + (string.IsNullOrWhiteSpace(TagHelper.Size)? "" : "-" + TagHelper.Size));
+            if (size == ColumnSize.Empty)
+            {
+                return;
+            }
+
+            var classString = "offset" + breakpoint;
+
+            if (size == ColumnSize.C)
+            {
+                classString += "-0";
+            }
+            else
+            {
+                classString += "-" + size.ToString("D");
+            }
+
+            output.Attributes.AddClass(classString);
         }
 
         protected virtual void ProcessVerticalAlign(TagHelperOutput output)
@@ -34,22 +78,27 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
 
         protected virtual void ProcessColumnOrder(TagHelperOutput output)
         {
-            if (string.IsNullOrWhiteSpace(TagHelper.ColumnOrder))
+            if (TagHelper.ColumnOrder == ColumnOrder.Empty)
             {
                 return;
             }
 
-            output.Attributes.AddClass("order-" + TagHelper.ColumnOrder.ToLowerInvariant());
-        }
+            var classString = "order-";
 
-        protected virtual void ProcessOffset(TagHelperOutput output)
-        {
-            if (string.IsNullOrWhiteSpace(TagHelper.Offset))
+            if (TagHelper.ColumnOrder == ColumnOrder.First)
             {
-                return;
+                classString += "first";
+            }
+            else if (TagHelper.ColumnOrder == ColumnOrder.Last)
+            {
+                classString += "last";
+            }
+            else 
+            {
+                classString += TagHelper.ColumnOrder.ToString("D");
             }
 
-            output.Attributes.AddClass("offset-" + TagHelper.Offset.ToLowerInvariant());
+            output.Attributes.AddClass(classString);
         }
     }
 }
\ 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..89a58a2679
--- /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
+    {
+        Empty = 0,
+        C1 = 1,
+        C2 = 2,
+        C3 = 3,
+        C4 = 4,
+        C5 = 5,
+        C6 = 6,
+        C7 = 7,
+        C8 = 8,
+        C9 = 9,
+        C10 = 10,
+        C11 = 11,
+        C12 = 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..747b0d600d
--- /dev/null
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnSize.cs
@@ -0,0 +1,20 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
+{
+    public enum ColumnSize
+    {
+        Empty = 0,
+        C1 = 1,
+        C2 = 2,
+        C3 = 3,
+        C4 = 4,
+        C5 = 5,
+        C6 = 6,
+        C7 = 7,
+        C8 = 8,
+        C9 = 9,
+        C10 = 10,
+        C11 = 11,
+        C12 = 12,
+        C = -1
+    }
+}
\ 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
index f7e6749187..309bcc7c63 100644
--- 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
@@ -14,39 +14,29 @@
     

         
             
-                One of two columns
-                One of two columns
+                One of two columns
+                One of two 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
             
         
     

     

         
-<div class="container">
-    <div class="row">
-        <div class="col-sm-6">
-             One of two columns
-        </div>
-        <div class="col-sm-6">
-             One of two columns
-        </div>
-    </div>
-    <div class="row">
-        <div class="col-sm-4">
-              One of three columns
-        </div>
-        <div class="col-sm-4">
-             One of three columns
-        </div>
-        <div class="col-sm-4">
-             One of three columns
-        </div>
-    </div>
-</div>
+<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>
 

     

 

@@ -59,27 +49,21 @@
             
                 One of three columns
                 One of three columns
-                
+                 @* TODO: abp-column-break *@
                 One of three columns
             
         
     

     

         
-<div class="container">
-    <div class="row">
-         <div class="col">
-             One of three columns
-         </div>
-         <div class="col">
-             One of three columns
-        </div>
-        <div class="w-100"></div>
-         <div class="col">
-             One of three columns
-        </div>
-    </div>
-</div>
+ <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>
 

     

 

@@ -108,41 +92,23 @@
     
     

         
-<div class="container">
-     <div class="row align-items-start">
-        <div class="col">
-             One of three columns
-        </div>
-        <div class="col">
-            One of three columns
-        </div>
-        <div class="col">
-            One of three columns
-        </div>
-    </div>
-    <div class="row align-items-center">
-        <div class="col">
-            One of three columns
-        </div>
-        <div class="col">
-            One of three columns
-        </div>
-        <div class="col">
-            One of three columns
-        </div>
-    </div>
-    <div class="row align-items-end">
-        <div class="col">
-            One of three columns
-        </div>
-        <div class="col">
-            One of three columns
-        </div>
-       <div class="col">
-        One of three columns
-        </div>
-    </div>
-</div>
+<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>
 

     

 
@@ -161,19 +127,13 @@
     
     

         
-<div class="container">
-    <div class="row">
-        <div class="col align-self-start">
-            One of three columns
-        </div>
-        <div class="col align-self-center">
-            One of three columns
-        </div>
-        <div class="col align-self-end">
-             One of three columns
-        </div>
-    </div>
-</div>
+ <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>
 

     

 
@@ -184,71 +144,51 @@
     

         
             
-                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
+                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
             
         
     

     

         
-<div class="container">
-    <div class="row justify-content-start">
-        <div class="col-4">
-             One of two columns
-         </div>
-         <div class="col-4">
-             One of two columns
-         </div>
-    </div>
-     <div class="row justify-content-center">
-        <div class="col-4">
-             One of two columns
-         </div>
-         <div class="col-4">
-             One of two columns
-         </div>
-    </div>
-     <div class="row justify-content-end">
-        <div class="col-4">
-             One of two columns
-         </div>
-         <div class="col-4">
-             One of two columns
-         </div>
-    </div>
-     <div class="row justify-content-around">
-         <div class="col-4">
-            One of two columns
-         </div>
-                 <div class="col-4">
-             One of two columns
-         </div>
-     </div>
-    <div class="row justify-content-between">
-        <div class="col-4">
-            One of two columns
-        </div>
-        <div class="col-4">
-             One of two columns
-        </div>
-    </div>
-</div>
+ <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>
 

     

 
@@ -260,42 +200,30 @@
         
             
                  First, but unordered
-                Second, but last
-                Third, but first
+                Second, but last
+                Third, but first
             
             
                  First, but unordered
-                Second, but last
-                Third, but first
+                Second, but last
+                Third, but first
             
         
     
     

         
-<div class="container">
-    <div class="row">
-        <div class="col">
-          First, but unordered
-        </div>
-        <div class="col order-12">
-            Second, but last
-        </div>
-        <div class="col order-1">
-             Third, but first
-         </div>
-    </div>
-    <div class="row">
-        <div class="col">
-          First, but unordered
-        </div>
-        <div class="col order-last">
-            Second, but last
-        </div>
-        <div class="col order-first">
-             Third, but first
-         </div>
-    </div>
-</div>
+ <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>
 

     

 
@@ -304,32 +232,31 @@
 
 

     

-
         
              .col-md-4
-            .col-md-4 .offset-md-4
+            .col-md-4 .offset-md-4
         
         
-            .col-md-3 .offset-md-3
-            .col-md-3 .offset-md-3
+            .col-md-3 .offset-md-3
+            .col-md-3 .offset-md-3
         
         
-            .col-md-6 .offset-md-3
+            .col-md-6 .offset-md-3
         
     

     

         
-<div class="row">
-     <div class="col-md-4">.col-md-4</div>
-     <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
-</div>
-<div class="row">
-    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
-    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
-</div>
-<div class="row">
-     <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
-</div>
+ <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>
 

     

 


From ec3e5bf21f1ae73d9b92c791cbc75668a2ec81f6 Mon Sep 17 00:00:00 2001
From: yekalkan 
Date: Wed, 25 Apr 2018 15:29:16 +0300
Subject: [PATCH 10/10] Enum refactoring grid tag helpers

---
 .../Grid/AbpColumnTagHelperService.cs         | 14 ++++---
 .../TagHelpers/Grid/ColumnOrder.cs            | 26 ++++++------
 .../TagHelpers/Grid/ColumnSize.cs             | 29 ++++++-------
 .../Pages/Components/Forms.cshtml             | 23 ++++++++++
 .../Pages/Components/Forms.cshtml.cs          | 12 ++++++
 .../Pages/Components/Grids.cshtml             | 42 +++++++++----------
 .../Pages/Index.cshtml                        |  1 +
 7 files changed, 94 insertions(+), 53 deletions(-)
 create mode 100644 test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Forms.cshtml
 create mode 100644 test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Forms.cshtml.cs

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
index bf530eb0b3..82aa86fcd5 100644
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs
@@ -30,14 +30,18 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
 
         protected virtual void ProcessSizeClass(TagHelperOutput output, ColumnSize size, string breakpoint)
         {
-            if (size == ColumnSize.Empty)
+            if (size == ColumnSize.Undefined)
             {
                 return;
             }
 
             var classString = "col" + breakpoint;
 
-            if (size != ColumnSize.C)
+            if (size == ColumnSize.Auto)
+            {
+                classString += "-auto";
+            }
+            else if (size != ColumnSize._)
             {
                 classString += "-" + size.ToString("D");
             }
@@ -47,14 +51,14 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
 
         protected virtual void ProcessOffsetClass(TagHelperOutput output, ColumnSize size, string breakpoint)
         {
-            if (size == ColumnSize.Empty)
+            if (size == ColumnSize.Undefined)
             {
                 return;
             }
 
             var classString = "offset" + breakpoint;
 
-            if (size == ColumnSize.C)
+            if (size == ColumnSize._)
             {
                 classString += "-0";
             }
@@ -78,7 +82,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
 
         protected virtual void ProcessColumnOrder(TagHelperOutput output)
         {
-            if (TagHelper.ColumnOrder == ColumnOrder.Empty)
+            if (TagHelper.ColumnOrder == ColumnOrder.Undefined)
             {
                 return;
             }
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
index 89a58a2679..f80aef9acc 100644
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnOrder.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnOrder.cs
@@ -2,19 +2,19 @@
 {
     public enum ColumnOrder
     {
-        Empty = 0,
-        C1 = 1,
-        C2 = 2,
-        C3 = 3,
-        C4 = 4,
-        C5 = 5,
-        C6 = 6,
-        C7 = 7,
-        C8 = 8,
-        C9 = 9,
-        C10 = 10,
-        C11 = 11,
-        C12 = 12,
+        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
     }
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
index 747b0d600d..35a07b99b5 100644
--- a/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnSize.cs
+++ b/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnSize.cs
@@ -2,19 +2,20 @@
 {
     public enum ColumnSize
     {
-        Empty = 0,
-        C1 = 1,
-        C2 = 2,
-        C3 = 3,
-        C4 = 4,
-        C5 = 5,
-        C6 = 6,
-        C7 = 7,
-        C8 = 8,
-        C9 = 9,
-        C10 = 10,
-        C11 = 11,
-        C12 = 12,
-        C = -1
+        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/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
index 309bcc7c63..aa12bf5431 100644
--- 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
@@ -14,13 +14,13 @@
     

         
             
-                One of two columns
-                One of two columns
+                One of two columns
+                One of two 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
             
         
     

@@ -144,24 +144,24 @@
     

         
             
-                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
+                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
             
         
     

@@ -200,8 +200,8 @@
         
             
                  First, but unordered
-                Second, but last
-                Third, but first
+                Second, but last
+                Third, but first
             
             
                  First, but unordered
@@ -234,14 +234,14 @@
     

         
              .col-md-4
-            .col-md-4 .offset-md-4
+            .col-md-4 .offset-md-4
         
         
-            .col-md-3 .offset-md-3
-            .col-md-3 .offset-md-3
+            .col-md-3 .offset-md-3
+            .col-md-3 .offset-md-3
         
         
-            .col-md-6 .offset-md-3
+            .col-md-6 .offset-md-3
         
     

     

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 eb327b1e1f..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
@@ -10,5 +10,6 @@
     
  • Buttons
    • 
     
  • Grids
    • 
     
  • Cards
    • 
+    
  • Forms
    •