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

added button groups doc

pull/670/head
Yunus Emre Kalkan 8 years ago
parent
43f0211dde
commit
7a9b5913fc
2 changed files with 305 additions and 0 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. 288
      framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml
  2. 17
      framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml.cs

288
framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml
View File

@ -0,0 +1,288 @@
@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.ButtonGroupsModel
@{
ViewData["Title"] = "ButtonGroups";
}
@section styles {
<abp-style-bundle>
<abp-style src="/css/demo.css" />
</abp-style-bundle>
}
@section scripts {
<abp-script-bundle>
@*<abp-script src="/libs/highlight.js/lib/highlight.js" />
<abp-script src="/Pages/Components/highlightCode.js" />*@
</abp-script-bundle>
}
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<h2>Button groups</h2>
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/button-group/" target="_blank"> Bootstrap Button group</a>.</p>
<h4>Basic example</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-button-group>
<abp-button button-type="Secondary">Left</abp-button>
<abp-button button-type="Secondary">Middle</abp-button>
<abp-button button-type="Secondary">Right</abp-button>
</abp-button-group>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;abp-button-group&gt;
&lt;abp-button button-type=&quot;Secondary&quot;&gt;Left&lt;/abp-button&gt;
&lt;abp-button button-type=&quot;Secondary&quot;&gt;Middle&lt;/abp-button&gt;
&lt;abp-button button-type=&quot;Secondary&quot;&gt;Right&lt;/abp-button&gt;
&lt;/abp-button-group&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Left&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Middle&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Right&lt;/button&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h4>Button toolbar</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-button-toolbar>
<abp-button-group class="mr-2">
<abp-button button-type="Secondary">1</abp-button>
<abp-button button-type="Secondary">2</abp-button>
<abp-button button-type="Secondary">3</abp-button>
<abp-button button-type="Secondary">4</abp-button>
</abp-button-group>
<abp-button-group class="mr-2">
<abp-button button-type="Secondary">5</abp-button>
<abp-button button-type="Secondary">6</abp-button>
<abp-button button-type="Secondary">7</abp-button>
</abp-button-group>
<abp-button-group>
<abp-button button-type="Secondary">8</abp-button>
</abp-button-group>
</abp-button-toolbar>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;abp-button-toolbar&gt;
&lt;abp-button-group class=&quot;mr-2&quot;&gt;
&lt;abp-button button-type=&quot;Secondary&quot;&gt;1&lt;/abp-button&gt;
&lt;abp-button button-type=&quot;Secondary&quot;&gt;2&lt;/abp-button&gt;
&lt;abp-button button-type=&quot;Secondary&quot;&gt;3&lt;/abp-button&gt;
&lt;abp-button button-type=&quot;Secondary&quot;&gt;4&lt;/abp-button&gt;
&lt;/abp-button-group&gt;
&lt;abp-button-group class=&quot;mr-2&quot;&gt;
&lt;abp-button button-type=&quot;Secondary&quot;&gt;5&lt;/abp-button&gt;
&lt;abp-button button-type=&quot;Secondary&quot;&gt;6&lt;/abp-button&gt;
&lt;abp-button button-type=&quot;Secondary&quot;&gt;7&lt;/abp-button&gt;
&lt;/abp-button-group&gt;
&lt;abp-button-group&gt;
&lt;abp-button button-type=&quot;Secondary&quot;&gt;8&lt;/abp-button&gt;
&lt;/abp-button-group&gt;
&lt;/abp-button-toolbar&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;btn-toolbar&quot; role=&quot;toolbar&quot;&gt;
&lt;div class=&quot;btn-group mr-2&quot; role=&quot;group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;1&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;2&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;3&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;4&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;btn-group mr-2&quot; role=&quot;group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;5&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;6&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;7&lt;/button&gt;
&lt;/div&gt;
&lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;8&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h4>Sizing</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-button-group size="Large">
<abp-button button-type="Secondary">Left</abp-button>
<abp-button button-type="Secondary">Middle</abp-button>
<abp-button button-type="Secondary">Right</abp-button>
</abp-button-group>
<br><br>
<abp-button-group>
<abp-button button-type="Secondary">Left</abp-button>
<abp-button button-type="Secondary">Middle</abp-button>
<abp-button button-type="Secondary">Right</abp-button>
</abp-button-group>
<br><br>
<abp-button-group size="Small">
<abp-button button-type="Secondary">Left</abp-button>
<abp-button button-type="Secondary">Middle</abp-button>
<abp-button button-type="Secondary">Right</abp-button>
</abp-button-group>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;abp-button-group size=&quot;Large&quot;&gt;
...
&lt;/abp-button-group&gt;
&lt;abp-button-group&gt;
...
&lt;/abp-button-group&gt;
&lt;abp-button-group size=&quot;Small&quot;&gt;
...
&lt;/abp-button-group&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;btn-group btn-group-lg&quot; role=&quot;group&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
...
&lt;/div&gt;
&lt;div class=&quot;btn-group btn-group-sm&quot; role=&quot;group&quot;&gt;
...
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h4>Vertical variation</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-button-group>
<abp-button button-type="Secondary">1</abp-button>
<abp-button button-type="Secondary">2</abp-button>
<abp-dropdown>
<abp-dropdown-button button-type="Secondary" text="Dropdown" />
<abp-dropdown-menu>
<abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
<abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
</abp-button-group>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;abp-button-group&gt;
&lt;abp-button button-type=&quot;Secondary&quot;&gt;1&lt;/abp-button&gt;
&lt;abp-button button-type=&quot;Secondary&quot;&gt;2&lt;/abp-button&gt;
&lt;abp-dropdown&gt;
&lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Dropdown&quot; /&gt;
&lt;abp-dropdown-menu&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt; Dropdown link &lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt; Dropdown link &lt;/abp-dropdown-item&gt;
&lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
&lt;/abp-button-group&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;btn-group&quot; role=&quot;group&quot; aria-label=&quot;Button group with nested dropdown&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;1&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;2&lt;/button&gt;
&lt;div class=&quot;btn-group&quot; role=&quot;group&quot;&gt;
&lt;button id=&quot;btnGroupDrop1&quot; type=&quot;button&quot; class=&quot;btn btn-secondary dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
Dropdown
&lt;/button&gt;
&lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;btnGroupDrop1&quot;&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Dropdown link&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Dropdown link&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h4>Nesting</h4>
<div class="demo-with-code">
<div class="demo-area">
<abp-button-group direction="Vertical">
<abp-button button-type="Secondary">button</abp-button>
<abp-button button-type="Secondary">button</abp-button>
<abp-dropdown direction="Right">
<abp-dropdown-button button-type="Secondary" text="Dropdown" />
<abp-dropdown-menu>
<abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
<abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
<abp-button button-type="Secondary">button</abp-button>
<abp-button button-type="Secondary">button</abp-button>
<abp-dropdown direction="Left">
<abp-dropdown-button button-type="Secondary" text="Dropdown" />
<abp-dropdown-menu>
<abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
<abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
<abp-button button-type="Secondary">button</abp-button>
</abp-button-group>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;abp-button-group direction=&quot;Vertical&quot;&gt;
...
&lt;/abp-button-group&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;btn-group-vertical&quot;&gt;
...
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>

17
framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml.cs
View File

@ -0,0 +1,17 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
{
public class ButtonGroupsModel : PageModel
{
public void OnGet()
{
}
}
}
Write Preview
Loading…
Cancel
Save