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 examples (Also a fix for offset attr.)

pull/272/head
yekalkan 9 years ago
parent
bce030576e
commit
df22b687a1
4 changed files with 196 additions and 1 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. 2
      src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Grid/AbpColumnTagHelperService.cs
  2. 182
      test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml
  3. 12
      test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml.cs
  4. 1
      test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml

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

@ -48,7 +48,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Grid
return; return;
} }
output.Attributes.AddClass("Offset-" + TagHelper.Offset.ToLowerInvariant()); output.Attributes.AddClass("offset-" + TagHelper.Offset.ToLowerInvariant());
} }
} }
} }

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

@ -0,0 +1,182 @@
@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.GridsModel
@{
ViewData["Title"] = "Cards";
}
<h2>Cards</h2>
@*
<h4># Example</h4>
<div class="demo-with-code">
<div class="demo-area">
</div>
<div class="code-area">
<pre></pre>
</div>
</div>
*@
<p>Based on <a href="http://getbootstrap.com/docs/4.1/layout/grid/" target="_blank"> Bootstrap grid</a>.</p>
<h4># Example</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-container>
<abp-row>
<abp-column size="sm-6">One of two columns</abp-column>
<abp-column size="sm-6">One of two columns</abp-column>
</abp-row>
<abp-row>
<abp-column size="sm-4">One of three columns</abp-column>
<abp-column size="sm-4">One of three columns</abp-column>
<abp-column size="sm-4">One of three columns</abp-column>
</abp-row>
</abp-container>
</div>
<div class="code-area">
<pre>
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-6&quot;&gt;
One of two columns
&lt;/div&gt;
&lt;div class=&quot;col-sm-6&quot;&gt;
One of two columns
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&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 class=&quot;col-sm-4&quot;&gt;
One of three columns
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
<h4># Break Column Example</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-container>
<abp-row>
<abp-column>One of three columns</abp-column>
<abp-column>One of three columns</abp-column>
<abp-break-col/>
<abp-column>One of three columns</abp-column>
</abp-row>
</abp-container>
</div>
<div class="code-area">
<pre>
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&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;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>
</div>
</div>
<h4># Order Example</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-container>
<abp-row>
<abp-column> First, but unordered</abp-column>
<abp-column order="12">Second, but last</abp-column>
<abp-column order="1">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>
</div>
<div class="code-area">
<pre>
&lt;div class=&quot;container&quot;&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-12&quot;&gt;
Second, but last
&lt;/div&gt;
&lt;div class=&quot;col order-1&quot;&gt;
Third, but first
&lt;/div&gt;
&lt;/div&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>
</div>
</div>
<h4># Offset Example</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-row>
<abp-column> .col-md-4</abp-column>
<abp-column offset="md-4">.col-md-4 .offset-md-4</abp-column>
</abp-row>
<abp-row>
<abp-column offset="md-3">.col-md-3 .offset-md-3</abp-column>
<abp-column offset="md-3">.col-md-3 .offset-md-3</abp-column>
</abp-row>
<abp-row>
<abp-column offset="md-3">.col-md-6 .offset-md-3</abp-column>
</abp-row>
</div>
<div class="code-area">
<pre>
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-4&quot;&gt;.col-md-4&lt;/div&gt;
&lt;div class=&quot;col-md-4 offset-md-4&quot;&gt;.col-md-4 .offset-md-4&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-3 offset-md-3&quot;&gt;.col-md-3 .offset-md-3&lt;/div&gt;
&lt;div class=&quot;col-md-3 offset-md-3&quot;&gt;.col-md-3 .offset-md-3&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-md-6 offset-md-3&quot;&gt;.col-md-6 .offset-md-3&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
<hr />
<a asp-page="../">&lt; back</a>

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

@ -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()
{
}
}
}

1
test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml
View File

@ -8,6 +8,7 @@
<ul> <ul>
<li><a asp-page="Components/Buttons">Buttons</a></li> <li><a asp-page="Components/Buttons">Buttons</a></li>
<li><a asp-page="Components/Grids">Grids</a></li>
<li><a asp-page="Components/Cards">Cards</a></li> <li><a asp-page="Components/Cards">Cards</a></li>
</ul> </ul>

Write Preview
Loading…
Cancel
Save