tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Grid Tag Helper Refactor

pull/272/head
yekalkan 9 years ago
parent
563fec4fbe
commit
66ae1998dc
7 changed files with 239 additions and 204 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelper.cs
  2. 2
      src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelperService.cs
  3. 24
      src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs
  4. 75
      src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs
  5. 21
      src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnOrder.cs
  6. 20
      src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnSize.cs
  7. 297
      test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml

4
src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelper.cs → src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelper.cs
View File

@ -2,9 +2,9 @@
namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
{ {
public class AbpBreakColTagHelper : AbpTagHelper<AbpBreakColTagHelper, AbpBreakColTagHelperService> public class AbpColBreakTagHelper : AbpTagHelper<AbpColBreakTagHelper, AbpColBreakTagHelperService>
{ {
public AbpBreakColTagHelper(AbpBreakColTagHelperService tagHelperService) public AbpColBreakTagHelper(AbpColBreakTagHelperService tagHelperService)
: base(tagHelperService) : base(tagHelperService)
{ {

2
src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpBreakColTagHelperService.cs → src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColBreakTagHelperService.cs
View File

@ -5,7 +5,7 @@ using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers
namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
{ {
public class AbpBreakColTagHelperService : AbpTagHelperService<AbpBreakColTagHelper> public class AbpColBreakTagHelperService : AbpTagHelperService<AbpColBreakTagHelper>
{ {
public override void Process(TagHelperContext context, TagHelperOutput output) public override void Process(TagHelperContext context, TagHelperOutput output)
{ {

24
src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelper.cs
View File

@ -4,12 +4,30 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
{ {
public class AbpColumnTagHelper : AbpTagHelper<AbpColumnTagHelper, AbpColumnTagHelperService> public class AbpColumnTagHelper : AbpTagHelper<AbpColumnTagHelper, AbpColumnTagHelperService>
{ {
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")] [HtmlAttributeName("order")]
public string ColumnOrder { get; set; } public ColumnOrder ColumnOrder { get; set; }
public VerticalAlign VAlign { get; set; } = VerticalAlign.Default; public VerticalAlign VAlign { get; set; } = VerticalAlign.Default;

75
src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs
View File

@ -10,16 +10,60 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
public override void Process(TagHelperContext context, TagHelperOutput output) public override void Process(TagHelperContext context, TagHelperOutput output)
{ {
output.TagName = "div"; 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); 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) 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) protected virtual void ProcessColumnOrder(TagHelperOutput output)
{ {
if (string.IsNullOrWhiteSpace(TagHelper.ColumnOrder)) if (TagHelper.ColumnOrder == ColumnOrder.Empty)
{ {
return; return;
} }
output.Attributes.AddClass("order-" + TagHelper.ColumnOrder.ToLowerInvariant()); var classString = "order-";
}
protected virtual void ProcessOffset(TagHelperOutput output) if (TagHelper.ColumnOrder == ColumnOrder.First)
{
if (string.IsNullOrWhiteSpace(TagHelper.Offset))
{ {
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);
} }
} }
} }

21
src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnOrder.cs
View File

@ -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
}
}

20
src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/ColumnSize.cs
View File

@ -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
}
}

297
test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml
View File

@ -14,39 +14,29 @@
<div class="demo-area"> <div class="demo-area">
<abp-container> <abp-container>
<abp-row> <abp-row>
<abp-column size="sm-6">One of two columns</abp-column> <abp-column size-sm="C6">One of two columns</abp-column>
<abp-column size="sm-6">One of two columns</abp-column> <abp-column size-sm="C6">One of two columns</abp-column>
</abp-row> </abp-row>
<abp-row> <abp-row>
<abp-column size="sm-4">One of three columns</abp-column> <abp-column size-sm="C4">One of three columns</abp-column>
<abp-column size="sm-4">One of three columns</abp-column> <abp-column size-sm="C4">One of three columns</abp-column>
<abp-column size="sm-4">One of three columns</abp-column> <abp-column size-sm="C4">One of three columns</abp-column>
</abp-row> </abp-row>
</abp-container> </abp-container>
</div> </div>
<div class="code-area"> <div class="code-area">
<pre> <pre>
&lt;div class=&quot;container&quot;&gt; &lt;abp-container&gt;
&lt;div class=&quot;row&quot;&gt; &lt;abp-row&gt;
&lt;div class=&quot;col-sm-6&quot;&gt; &lt;abp-column size-sm=&quot;C6&quot;&gt;One of two columns&lt;/abp-column&gt;
One of two columns &lt;abp-column size-sm=&quot;C6&quot;&gt;One of two columns&lt;/abp-column&gt;
&lt;/div&gt; &lt;/abp-row&gt;
&lt;div class=&quot;col-sm-6&quot;&gt; &lt;abp-row&gt;
One of two columns &lt;abp-column size-sm=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
&lt;/div&gt; &lt;abp-column size-sm=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
&lt;/div&gt; &lt;abp-column size-sm=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
&lt;div class=&quot;row&quot;&gt; &lt;/abp-row&gt;
&lt;div class=&quot;col-sm-4&quot;&gt; &lt;/abp-container&gt;
One of three columns
&lt;/div&gt;
&lt;div class=&quot;col-sm-4&quot;&gt;
One of three columns
&lt;/div&gt;
&lt;div class=&quot;col-sm-4&quot;&gt;
One of three columns
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre> </pre>
</div> </div>
</div> </div>
@ -59,27 +49,21 @@
<abp-row> <abp-row>
<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-column>One of three columns</abp-column>
<abp-break-col /> <abp-col-break /> @* TODO: abp-column-break *@
<abp-column>One of three columns</abp-column> <abp-column>One of three columns</abp-column>
</abp-row> </abp-row>
</abp-container> </abp-container>
</div> </div>
<div class="code-area"> <div class="code-area">
<pre> <pre>
&lt;div class=&quot;container&quot;&gt; &lt;abp-container&gt;
&lt;div class=&quot;row&quot;&gt; &lt;abp-row&gt;
&lt;div class=&quot;col&quot;&gt; &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
One of three columns &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
&lt;/div&gt; &lt;abp-col-break /&gt; @* TODO: abp-column-break *@
&lt;div class=&quot;col&quot;&gt; &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
One of three columns &lt;/abp-row&gt;
&lt;/div&gt; &lt;/abp-container&gt;
&lt;div class=&quot;w-100&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;col&quot;&gt;
One of three columns
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre> </pre>
</div> </div>
</div> </div>
@ -108,41 +92,23 @@
</div> </div>
<div class="code-area"> <div class="code-area">
<pre> <pre>
&lt;div class=&quot;container&quot;&gt; &lt;abp-container&gt;
&lt;div class=&quot;row align-items-start&quot;&gt; &lt;abp-row v-align=&quot;Start&quot;&gt;
&lt;div class=&quot;col&quot;&gt; &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
One of three columns &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
&lt;/div&gt; &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
&lt;div class=&quot;col&quot;&gt; &lt;/abp-row&gt;
One of three columns &lt;abp-row v-align=&quot;Center&quot;&gt;
&lt;/div&gt; &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
&lt;div class=&quot;col&quot;&gt; &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
One of three columns &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
&lt;/div&gt; &lt;/abp-row&gt;
&lt;/div&gt; &lt;abp-row v-align=&quot;End&quot;&gt;
&lt;div class=&quot;row align-items-center&quot;&gt; &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
&lt;div class=&quot;col&quot;&gt; &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
One of three columns &lt;abp-column&gt;One of three columns&lt;/abp-column&gt;
&lt;/div&gt; &lt;/abp-row&gt;
&lt;div class=&quot;col&quot;&gt; &lt;/abp-container&gt;
One of three columns
&lt;/div&gt;
&lt;div class=&quot;col&quot;&gt;
One of three columns
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row align-items-end&quot;&gt;
&lt;div class=&quot;col&quot;&gt;
One of three columns
&lt;/div&gt;
&lt;div class=&quot;col&quot;&gt;
One of three columns
&lt;/div&gt;
&lt;div class=&quot;col&quot;&gt;
One of three columns
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre> </pre>
</div> </div>
</div> </div>
@ -161,19 +127,13 @@
</div> </div>
<div class="code-area"> <div class="code-area">
<pre> <pre>
&lt;div class=&quot;container&quot;&gt; &lt;abp-container&gt;
&lt;div class=&quot;row&quot;&gt; &lt;abp-row&gt;
&lt;div class=&quot;col align-self-start&quot;&gt; &lt;abp-column v-align=&quot;Start&quot;&gt;One of three columns&lt;/abp-column&gt;
One of three columns &lt;abp-column v-align=&quot;Center&quot;&gt;One of three columns&lt;/abp-column&gt;
&lt;/div&gt; &lt;abp-column v-align=&quot;End&quot;&gt;One of three columns&lt;/abp-column&gt;
&lt;div class=&quot;col align-self-center&quot;&gt; &lt;/abp-row&gt;
One of three columns &lt;/abp-container&gt;
&lt;/div&gt;
&lt;div class=&quot;col align-self-end&quot;&gt;
One of three columns
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre> </pre>
</div> </div>
</div> </div>
@ -184,71 +144,51 @@
<div class="demo-area"> <div class="demo-area">
<abp-container> <abp-container>
<abp-row h-align="Start"> <abp-row h-align="Start">
<abp-column size="4">One of three columns</abp-column> <abp-column size="C4">One of three columns</abp-column>
<abp-column size="4">One of three columns</abp-column> <abp-column size="C4">One of three columns</abp-column>
</abp-row> </abp-row>
<abp-row h-align="Center"> <abp-row h-align="Center">
<abp-column size="4">One of three columns</abp-column> <abp-column size="C4">One of three columns</abp-column>
<abp-column size="4">One of three columns</abp-column> <abp-column size="C4">One of three columns</abp-column>
</abp-row> </abp-row>
<abp-row h-align="End"> <abp-row h-align="End">
<abp-column size="4">One of three columns</abp-column> <abp-column size="C4">One of three columns</abp-column>
<abp-column size="4">One of three columns</abp-column> <abp-column size="C4">One of three columns</abp-column>
</abp-row> </abp-row>
<abp-row h-align="Around"> <abp-row h-align="Around">
<abp-column size="4">One of three columns</abp-column> <abp-column size="C4">One of three columns</abp-column>
<abp-column size="4">One of three columns</abp-column> <abp-column size="C4">One of three columns</abp-column>
</abp-row> </abp-row>
<abp-row h-align="Between"> <abp-row h-align="Between">
<abp-column size="4">One of three columns</abp-column> <abp-column size="C4">One of three columns</abp-column>
<abp-column size="4">One of three columns</abp-column> <abp-column size="C4">One of three columns</abp-column>
</abp-row> </abp-row>
</abp-container> </abp-container>
</div> </div>
<div class="code-area"> <div class="code-area">
<pre> <pre>
&lt;div class=&quot;container&quot;&gt; &lt;abp-container&gt;
&lt;div class=&quot;row justify-content-start&quot;&gt; &lt;abp-row h-align=&quot;Start&quot;&gt;
&lt;div class=&quot;col-4&quot;&gt; &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
One of two columns &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
&lt;/div&gt; &lt;/abp-row&gt;
&lt;div class=&quot;col-4&quot;&gt; &lt;abp-row h-align=&quot;Center&quot;&gt;
One of two columns &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
&lt;/div&gt; &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
&lt;/div&gt; &lt;/abp-row&gt;
&lt;div class=&quot;row justify-content-center&quot;&gt; &lt;abp-row h-align=&quot;End&quot;&gt;
&lt;div class=&quot;col-4&quot;&gt; &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
One of two columns &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
&lt;/div&gt; &lt;/abp-row&gt;
&lt;div class=&quot;col-4&quot;&gt; &lt;abp-row h-align=&quot;Around&quot;&gt;
One of two columns &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
&lt;/div&gt; &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
&lt;/div&gt; &lt;/abp-row&gt;
&lt;div class=&quot;row justify-content-end&quot;&gt; &lt;abp-row h-align=&quot;Between&quot;&gt;
&lt;div class=&quot;col-4&quot;&gt; &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
One of two columns &lt;abp-column size=&quot;C4&quot;&gt;One of three columns&lt;/abp-column&gt;
&lt;/div&gt; &lt;/abp-row&gt;
&lt;div class=&quot;col-4&quot;&gt; &lt;/abp-container&gt;
One of two columns
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row justify-content-around&quot;&gt;
&lt;div class=&quot;col-4&quot;&gt;
One of two columns
&lt;/div&gt;
&lt;div class=&quot;col-4&quot;&gt;
One of two columns
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row justify-content-between&quot;&gt;
&lt;div class=&quot;col-4&quot;&gt;
One of two columns
&lt;/div&gt;
&lt;div class=&quot;col-4&quot;&gt;
One of two columns
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre> </pre>
</div> </div>
</div> </div>
@ -260,42 +200,30 @@
<abp-container> <abp-container>
<abp-row> <abp-row>
<abp-column> First, but unordered</abp-column> <abp-column> First, but unordered</abp-column>
<abp-column order="12">Second, but last</abp-column> <abp-column order="C12">Second, but last</abp-column>
<abp-column order="1">Third, but first</abp-column> <abp-column order="C1">Third, but first</abp-column>
</abp-row> </abp-row>
<abp-row> <abp-row>
<abp-column> First, but unordered</abp-column> <abp-column> First, but unordered</abp-column>
<abp-column order="last">Second, but last</abp-column> <abp-column order="Last">Second, but last</abp-column>
<abp-column order="first">Third, but first</abp-column> <abp-column order="First">Third, but first</abp-column>
</abp-row> </abp-row>
</abp-container> </abp-container>
</div> </div>
<div class="code-area"> <div class="code-area">
<pre> <pre>
&lt;div class=&quot;container&quot;&gt; &lt;abp-container&gt;
&lt;div class=&quot;row&quot;&gt; &lt;abp-row&gt;
&lt;div class=&quot;col&quot;&gt; &lt;abp-column&gt; First, but unordered&lt;/abp-column&gt;
First, but unordered &lt;abp-column order=&quot;C12&quot;&gt;Second, but last&lt;/abp-column&gt;
&lt;/div&gt; &lt;abp-column order=&quot;C1&quot;&gt;Third, but first&lt;/abp-column&gt;
&lt;div class=&quot;col order-12&quot;&gt; &lt;/abp-row&gt;
Second, but last &lt;abp-row&gt;
&lt;/div&gt; &lt;abp-column&gt; First, but unordered&lt;/abp-column&gt;
&lt;div class=&quot;col order-1&quot;&gt; &lt;abp-column order=&quot;Last&quot;&gt;Second, but last&lt;/abp-column&gt;
Third, but first &lt;abp-column order=&quot;First&quot;&gt;Third, but first&lt;/abp-column&gt;
&lt;/div&gt; &lt;/abp-row&gt;
&lt;/div&gt; &lt;/abp-container&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col&quot;&gt;
First, but unordered
&lt;/div&gt;
&lt;div class=&quot;col order-last&quot;&gt;
Second, but last
&lt;/div&gt;
&lt;div class=&quot;col order-first&quot;&gt;
Third, but first
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre> </pre>
</div> </div>
</div> </div>
@ -304,32 +232,31 @@
<div class="demo-with-code"> <div class="demo-with-code">
<div class="demo-area"> <div class="demo-area">
<abp-row> <abp-row>
<abp-column> .col-md-4</abp-column> <abp-column> .col-md-4</abp-column>
<abp-column offset="md-4">.col-md-4 .offset-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-row> <abp-row>
<abp-column offset="md-3">.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-column offset="md-3">.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-row> <abp-row>
<abp-column offset="md-3">.col-md-6 .offset-md-3</abp-column> <abp-column size-md="C6" offset-md="C3">.col-md-6 .offset-md-3</abp-column>
</abp-row> </abp-row>
</div> </div>
<div class="code-area"> <div class="code-area">
<pre> <pre>
&lt;div class=&quot;row&quot;&gt; &lt;abp-row&gt;
&lt;div class=&quot;col-md-4&quot;&gt;.col-md-4&lt;/div&gt; &lt;abp-column&gt; .col-md-4&lt;/abp-column&gt;
&lt;div class=&quot;col-md-4 offset-md-4&quot;&gt;.col-md-4 .offset-md-4&lt;/div&gt; &lt;abp-column size-md=&quot;C4&quot; offset-md=&quot;C4&quot;&gt;.col-md-4 .offset-md-4&lt;/abp-column&gt;
&lt;/div&gt; &lt;/abp-row&gt;
&lt;div class=&quot;row&quot;&gt; &lt;abp-row&gt;
&lt;div class=&quot;col-md-3 offset-md-3&quot;&gt;.col-md-3 .offset-md-3&lt;/div&gt; &lt;abp-column size-md=&quot;C3&quot; offset-md=&quot;C3&quot;&gt;.col-md-3 .offset-md-3&lt;/abp-column&gt;
&lt;div class=&quot;col-md-3 offset-md-3&quot;&gt;.col-md-3 .offset-md-3&lt;/div&gt; &lt;abp-column size-md=&quot;C3&quot; offset-md=&quot;C3&quot;&gt;.col-md-3 .offset-md-3&lt;/abp-column&gt;
&lt;/div&gt; &lt;/abp-row&gt;
&lt;div class=&quot;row&quot;&gt; &lt;abp-row&gt;
&lt;div class=&quot;col-md-6 offset-md-3&quot;&gt;.col-md-6 .offset-md-3&lt;/div&gt; &lt;abp-column size-md=&quot;C6&quot; offset-md=&quot;C3&quot;&gt;.col-md-6 .offset-md-3&lt;/abp-column&gt;
&lt;/div&gt; &lt;/abp-row&gt;
</pre> </pre>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save