Added abp-button-group tag helper

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonGroupDirection.cs

@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button
+{
+    public enum AbpButtonGroupDirection
+    {
+        Horizontal,
+        Vertical
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonGroupSize.cs

@@ -0,0 +1,10 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button
+{
+    public enum AbpButtonGroupSize
+    {
+        Default,
+        Small,
+        Medium,
+        Large
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonGroupTagHelper.cs

@@ -0,0 +1,15 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button
+{
+    public class AbpButtonGroupTagHelper : AbpTagHelper<AbpButtonGroupTagHelper, AbpButtonGroupTagHelperService>
+    {
+        public AbpButtonGroupDirection Direction { get; set; } = AbpButtonGroupDirection.Horizontal;
+
+        public AbpButtonGroupSize Size { get; set; } = AbpButtonGroupSize.Default;
+
+        public AbpButtonGroupTagHelper(AbpButtonGroupTagHelperService tagHelperService)
+            : base(tagHelperService)
+        {
+
+        }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonGroupTagHelperService.cs

@@ -0,0 +1,55 @@
+using System;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Microsoft.AspNetCore.Razor.TagHelpers;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button
+{
+    public class AbpButtonGroupTagHelperService : AbpTagHelperService<AbpButtonGroupTagHelper>
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            AddButtonGroupClass(context, output);
+            AddSizeClass(context, output);
+            AddAttributes(context, output);
+        }
+
+        protected virtual void AddSizeClass(TagHelperContext context, TagHelperOutput output)
+        {
+            switch (TagHelper.Size)
+            {
+                case AbpButtonGroupSize.Default:
+                    break;
+                case AbpButtonGroupSize.Small:
+                    output.Attributes.AddClass("btn-group-sm");
+                    break;
+                case AbpButtonGroupSize.Medium:
+                    output.Attributes.AddClass("btn-group-md");
+                    break;
+                case AbpButtonGroupSize.Large:
+                    output.Attributes.AddClass("btn-group-lg");
+                    break;
+            }
+        }
+
+        protected virtual void AddButtonGroupClass(TagHelperContext context, TagHelperOutput output)
+        {
+            switch (TagHelper.Direction)
+            {
+                case AbpButtonGroupDirection.Horizontal:
+                    output.Attributes.AddClass("btn-group");
+                    break;
+                case AbpButtonGroupDirection.Vertical:
+                    output.Attributes.AddClass("btn-group-vertical");
+                    break;
+                default:
+                    output.Attributes.AddClass("btn-group");
+                    break;
+            }
+        }
+
+        protected virtual void AddAttributes(TagHelperContext context, TagHelperOutput output)
+        {
+            output.Attributes.Add("role", "group");
+        }
+    }
+}

framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Buttons.cshtml

@@ -121,6 +121,53 @@
     <div class="code-area">
         <pre>
 &lt;abp-button text=&quot;Busy&quot; busy-text=&quot;Saving...&quot;/&gt;
+</pre>
+    </div>
+</div>
+
+<h4># Group Examples</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <abp-button-group>
+            <abp-button>Left</abp-button>
+            <abp-button>Middle</abp-button>
+            <abp-button>Right</abp-button>
+        </abp-button-group>
+
+        <abp-button-group size="Large">
+            <abp-button button-type="Primary">Primary</abp-button>
+            <abp-button button-type="Secondary">Secondary</abp-button>
+            <abp-button button-type="Success">Success</abp-button>
+        </abp-button-group>
+
+        <abp-button-group direction="Vertical" size="Small">
+            <abp-button button-type="Primary">Top</abp-button>
+            <abp-button button-type="Warning">Middle</abp-button>
+            <abp-button button-type="Danger">Bottom</abp-button>
+        </abp-button-group>
+    </div>
+    <div class="code-area">
+        <pre>
+
+&lt;abp-button-group&gt;
+    &lt;abp-button&gt; Left &lt;/abp-button&gt;
+    &lt;abp-button&gt; Middle &lt;/abp-button&gt;
+    &lt;abp-button&gt; Right &lt;/abp-button&gt;
+&lt;/abp-button-group&gt;
+
+&lt;abp-button-group size=&quot;Large&quot;&gt;
+    &lt;abp-button button-type=&quot;Primary&quot;&gt; Primary &lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Secondary&quot;&gt; Secondary &lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Success&quot;&gt; Success &lt;/abp-button&gt;
+&lt;/abp-button-group&gt;
+
+&lt;abp-button-group direction=&quot;Vertical&quot; size=&quot;Small&quot;&gt;
+    &lt;abp-button button-type=&quot;Primary&quot;&gt; Top &lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Warning&quot;&gt; Middle &lt;/abp-button&gt;
+    &lt;abp-button button-type=&quot;Danger&quot;&gt; Bottom &lt;/abp-button&gt;
+&lt;/abp-button-group&gt;
 </pre>
     </div>
 </div>