From 7a9b5913fcebf0831bfd47a6b0db63c72761756c Mon Sep 17 00:00:00 2001 From: Yunus Emre Kalkan Date: Mon, 17 Dec 2018 11:21:31 +0300 Subject: [PATCH] added button groups doc --- .../Pages/Components/ButtonGroups.cshtml | 288 ++++++++++++++++++ .../Pages/Components/ButtonGroups.cshtml.cs | 17 ++ 2 files changed, 305 insertions(+) create mode 100644 framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml create mode 100644 framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml.cs diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml new file mode 100644 index 0000000000..25322444db --- /dev/null +++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml @@ -0,0 +1,288 @@ +@page +@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.ButtonGroupsModel +@{ + ViewData["Title"] = "ButtonGroups"; +} + +@section styles { + + + +} + +@section scripts { + + @* + *@ + +} + + + + + +

Button groups

+ +

Based on Bootstrap Button group.

+ +

Basic example

+ +
+
+ + + Left + Middle + Right + +
+
+ + + 

+<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 class="btn-group" role="group">
+  <button type="button" class="btn btn-secondary">Left</button>
+  <button type="button" class="btn btn-secondary">Middle</button>
+  <button type="button" class="btn btn-secondary">Right</button>
+</div>
+
+ + +
+
+ +

Button toolbar

+ +
+
+ + + 1 + 2 + 3 + 4 + + + 5 + 6 + 7 + + + 8 + + +
+
+ + + 

+    <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 class="btn-toolbar" role="toolbar">
+  <div class="btn-group mr-2" role="group">
+    <button type="button" class="btn btn-secondary">1</button>
+    <button type="button" class="btn btn-secondary">2</button>
+    <button type="button" class="btn btn-secondary">3</button>
+    <button type="button" class="btn btn-secondary">4</button>
+  </div>
+  <div class="btn-group mr-2" role="group">
+    <button type="button" class="btn btn-secondary">5</button>
+    <button type="button" class="btn btn-secondary">6</button>
+    <button type="button" class="btn btn-secondary">7</button>
+  </div>
+  <div class="btn-group" role="group">
+    <button type="button" class="btn btn-secondary">8</button>
+  </div>
+</div>
+
+ + +
+
+ +

Sizing

+ +
+
+ + Left + Middle + Right + +

+ + Left + Middle + Right + +

+ + Left + Middle + Right + +
+
+ + + 

+<abp-button-group size="Large">
+    ...
+</abp-button-group>
+
+<abp-button-group>
+    ...
+</abp-button-group>
+
+<abp-button-group size="Small">
+    ...
+</abp-button-group>
+
+ + + 

+<div class="btn-group btn-group-lg" role="group">
+    ...
+</div>
+
+<div class="btn-group" role="group">
+    ...
+</div>
+
+<div class="btn-group btn-group-sm" role="group">
+    ...
+</div>
+
+ + +
+
+ +

Vertical variation

+ +
+
+ + 1 + 2 + + + + Dropdown link + Dropdown link + + + +
+
+ + + 

+<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 class="btn-group" role="group" aria-label="Button group with nested dropdown">
+  <button type="button" class="btn btn-secondary">1</button>
+  <button type="button" class="btn btn-secondary">2</button>
+
+  <div class="btn-group" role="group">
+    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      Dropdown
+    </button>
+    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
+      <a class="dropdown-item" href="#">Dropdown link</a>
+      <a class="dropdown-item" href="#">Dropdown link</a>
+    </div>
+  </div>
+</div>
+
+ + +
+
+ +

Nesting

+ +
+
+ + button + button + + + + Dropdown link + Dropdown link + + + button + button + + + + Dropdown link + Dropdown link + + + button + +
+
+ + + 

+<abp-button-group direction="Vertical">
+    ...
+</abp-button-group>
+
+ + + 

+<div class="btn-group-vertical">
+  ...
+</div>
+
+ + +
+
\ No newline at end of file diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml.cs b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml.cs new file mode 100644 index 0000000000..dc9ac3c2eb --- /dev/null +++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml.cs @@ -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() + { + + } + } +} \ No newline at end of file