Button Tag Helper Docs

And some minor changes to tag helper attributes

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

@@ -5,6 +5,10 @@
         Default,
         Small,
         Medium,
-        Large
+        Large,
+        Block,
+        Block_Small,
+        Block_Medium,
+        Block_Large,
     }
 }

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

@@ -12,6 +12,14 @@
                     return "btn-md";
                 case AbpButtonSize.Large:
                     return "btn-lg";
+                case AbpButtonSize.Block:
+                    return "btn-block";
+                case AbpButtonSize.Block_Small:
+                    return "btn-sm  btn-block";
+                case AbpButtonSize.Block_Medium:
+                    return "btn-md  btn-block";
+                case AbpButtonSize.Block_Large:
+                    return "btn-lg  btn-block";
                 case AbpButtonSize.Default:
                     return "";
                 default:

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

@@ -9,8 +9,6 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button
 
         public AbpButtonSize Size { get; set; } = AbpButtonSize.Default;
 
-        public bool? Block { get; set; } = false;
-
         public string BusyText { get; set; }
 
         public string Text { get; set; }

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

@@ -33,11 +33,6 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button
             {
                 output.Attributes.AddClass(TagHelper.Size.ToClassName());
             }
-
-            if (TagHelper.Block ?? false)
-            {
-                output.Attributes.AddClass("btn-block");
-            }
         }
 
         protected virtual void AddIcon(TagHelperContext context, TagHelperOutput output)

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

@@ -11,8 +11,6 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button
 
         public AbpButtonSize Size { get; set; } = AbpButtonSize.Default;
 
-        public bool? Block { get; set; } = false;
-
         public string Text { get; set; }
 
         public string Icon { get; set; }

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

@@ -6,8 +6,6 @@
 
         AbpButtonSize Size { get; }
 
-        bool? Block { get;}
-
         string Text { get; }
 
         string Icon { get; }

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

@@ -7,19 +7,32 @@
 @section styles {
     <abp-style-bundle>
         <abp-style src="/css/demo.css" />
+        <abp-style src="/libs/highlight.js/styles/default.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>Buttons</h2>
 
 <p>Based on <a href="http://getbootstrap.com/docs/4.1/components/buttons/" target="_blank"> Bootstrap button</a>.</p>
 
-<h4># Example</h4>
+<h4>Examples</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
         <abp-button text="Default" />
-        <abp-button button-type="Primary">Primary</abp-button>
+        <abp-button button-type="Primary" text="Primary" />
         <abp-button button-type="Secondary">Secondary</abp-button>
         <abp-button button-type="Success">Success</abp-button>
         <abp-button button-type="Danger">Danger</abp-button>
@@ -30,22 +43,76 @@
         <abp-button button-type="Link">Link</abp-button>
     </div>
     <div class="code-area">
-        <pre>
-&lt;abp-button text=&quot;Default&quot;/&gt;
-&lt;abp-button button-type="Primary"&gt;Primary&lt;/abp-button&gt;
-&lt;abp-button button-type="Secondary"&gt;Secondary&lt;/abp-button&gt;
-&lt;abp-button button-type="Success"&gt;Success&lt;/abp-button&gt;
-&lt;abp-button button-type="Danger"&gt;Danger&lt;/abp-button&gt;
-&lt;abp-button button-type="Warning"&gt;Warning&lt;/abp-button&gt;
-&lt;abp-button button-type="Info"&gt;Info&lt;/abp-button&gt;
-&lt;abp-button button-type="Light"&gt;Light&lt;/abp-button&gt;
-&lt;abp-button button-type="Dark"&gt;Dark&lt;/abp-button&gt;
-&lt;abp-button button-type="Link"&gt;Link&lt;/abp-button&gt;
-</pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-button&gt; Default &lt;/abp-button&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 button-type=&quot;Danger&quot;&gt;Danger&lt;/abp-button&gt;
+&lt;abp-button button-type=&quot;Warning&quot;&gt;Warning&lt;/abp-button&gt;
+&lt;abp-button button-type=&quot;Info&quot;&gt;Info&lt;/abp-button&gt;
+&lt;abp-button button-type=&quot;Light&quot;&gt;Light&lt;/abp-button&gt;
+&lt;abp-button button-type=&quot;Dark&quot;&gt;Dark&lt;/abp-button&gt;
+
+&lt;abp-button button-type=&quot;Link&quot;&gt;Link&lt;/abp-button&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+<pre><code>
+&lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;Default&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Primary&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Secondary&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot;&gt;Success&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;Danger&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot;&gt;Warning&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;Info&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;&gt;Light&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-dark&quot;&gt;Dark&lt;/button&gt;
+
+&lt;button type=&quot;button&quot; class=&quot;btn btn-link&quot;&gt;Link&lt;/button&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+</div>
+
+<h4>Button tags</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+        <a abp-button="Primary" href="#">Link</a>
+        <abp-button button-type="Primary" type="submit" text="Button" />
+        <input abp-button="Primary" value="Input" />
+        <input abp-button="Primary" type="submit" value="Submit" />
+        <input abp-button="Primary" type="reset" value="Reset" />
+    </div>
+    <div class="code-area">
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+<pre><code>
+&lt;a abp-button="Primary" href="#"&gt;Link&lt;/a&gt;
+&lt;abp-button button-type=&quot;Primary&quot; type=&quot;submit&quot; text=&quot;Button&quot;/&gt;
+&lt;input abp-button="Primary" value="Input" /&gt;
+&lt;input abp-button="Primary" type="submit" value="Submit" /&gt;
+&lt;input abp-button="Primary" type="reset" value="Reset" /&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;a class=&quot;btn btn-primary&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Link&lt;/a&gt;
+&lt;button class=&quot;btn btn-primary&quot; type=&quot;submit&quot;&gt;Button&lt;/button&gt;
+&lt;input class=&quot;btn btn-primary&quot; type=&quot;button&quot; value=&quot;Input&quot;&gt;
+&lt;input class=&quot;btn btn-primary&quot; type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
+&lt;input class=&quot;btn btn-primary&quot; type=&quot;reset&quot; value=&quot;Reset&quot;&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Example</h4>
+<h4>Outline buttons</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
@@ -59,7 +126,9 @@
         <abp-button button-type="Outline_Dark">Dark</abp-button>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
 &lt;abp-button button-type="Outline_Primary"&gt;Primary&lt;/abp-button&gt;
 &lt;abp-button button-type="Outline_Secondary"&gt;Secondary&lt;/abp-button&gt;
 &lt;abp-button button-type="Outline_Success"&gt;Success&lt;/abp-button&gt;
@@ -68,133 +137,211 @@
 &lt;abp-button button-type="Outline_Info"&gt;Info&lt;/abp-button&gt;
 &lt;abp-button button-type="Outline_Light"&gt;Light&lt;/abp-button&gt;
 &lt;abp-button button-type="Outline_Dark"&gt;Dark&lt;/abp-button&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-primary&quot;&gt;Primary&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-secondary&quot;&gt;Secondary&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-success&quot;&gt;Success&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-danger&quot;&gt;Danger&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-warning&quot;&gt;Warning&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-info&quot;&gt;Info&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-light&quot;&gt;Light&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-dark&quot;&gt;Dark&lt;/button&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Example</h4>
+<h4>Sizes</h4>
 
 <div class="demo-with-code">
-    <div class="demo-area" style="margin: 35px;">
-        <a abp-button="Primary" href="#">Link</a>
-        <abp-button button-type="Primary" type="submit" text="Button" />
-        <input abp-button="Primary" value="Input" />
-        <input abp-button="Primary" type="submit" value="Submit" />
-        <input abp-button="Primary" type="reset" value="Reset" />
+    <div class="demo-area">
+        <abp-button size="Large" button-type="Primary" text="Large button" />
+        <abp-button size="Large" button-type="Secondary" text="Large button" />
     </div>
     <div class="code-area">
-        <pre>
-&lt;a abp-button="Primary" href="#"&gt;Link&lt;/a&gt;
-&lt;abp-button button-type=&quot;Primary&quot; type=&quot;submit&quot; text=&quot;Button&quot;/&gt;
-&lt;input abp-button="Primary" value="Input" /&gt;
-&lt;input abp-button="Primary" type="submit" value="Submit" /&gt;
-&lt;input abp-button="Primary" type="reset" value="Reset" /&gt;
-</pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-button size=&quot;Large&quot; button-type=&quot;Primary&quot; text=&quot;Large button&quot; /&gt;
+&lt;abp-button size=&quot;Large&quot; button-type=&quot;Secondary&quot; text=&quot;Large button&quot; /&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-lg&quot;&gt;Large button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary btn-lg&quot;&gt;Large button&lt;/button&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <abp-button size="Default" text="Default" />
-        <abp-button size="Small" text="Small" />
-        <abp-button size="Medium" text="Medium" />
-        <abp-button size="Large" text="Large" />
+        <abp-button size="Small" button-type="Primary" text="Small button" />
+        <abp-button size="Small" button-type="Secondary" text="Small button" />
     </div>
     <div class="code-area">
-        <pre>
-&lt;abp-button size=&quot;Default&quot; text=&quot;Default&quot; /&gt;
-&lt;abp-button size=&quot;Small&quot; text=&quot;Small&quot; /&gt;
-&lt;abp-button size=&quot;Medium&quot; text=&quot;Medium&quot; /&gt;
-&lt;abp-button size=&quot;Large&quot; text=&quot;Large&quot; /&gt;
-</pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-button size=&quot;Small&quot; button-type=&quot;Primary&quot; text=&quot;Small button&quot; /&gt;
+&lt;abp-button size=&quot;Small&quot; button-type=&quot;Secondary&quot; text=&quot;Small button&quot; /&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-sm&quot;&gt;Small button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary btn-sm&quot;&gt;Small button&lt;/button&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Example</h4>
-
 
 <div class="demo-with-code">
     <div class="demo-area">
-        <abp-button block="true" text="Block" />
+        <abp-button size="Block" button-type="Primary" text="Block level button" />
+        <abp-button size="Block" button-type="Secondary" text="Block level button" />
     </div>
     <div class="code-area">
-        <pre>
-&lt;abp-button block=&quot;true&quot; text=&quot;Block&quot; /&gt;
-</pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-button size=&quot;Block&quot; button-type=&quot;Primary&quot; text=&quot;Block level button&quot; /&gt;
+&lt;abp-button size=&quot;Block&quot; button-type=&quot;Secondary&quot; text=&quot;Block level button&quot; /&gt;
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-lg btn-block&quot;&gt;Block level button&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary btn-lg btn-block&quot;&gt;Block level button&lt;/button&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
 
-<h4># Example</h4>
+
+<h4> Icon</h4>
 
 <div class="demo-with-code">
+
     <div class="demo-area">
+        <abp-button icon="pencil" text="With Icon" />
         <abp-button icon-type="FontAwesome" icon="info" text="With Icon" />
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
+&lt;abp-button icon=&quot;pencil&quot; text=&quot;With Icon&quot;/&gt;
 &lt;abp-button icon-type=&quot;FontAwesome&quot; icon=&quot;info&quot; text=&quot;With Icon&quot;/&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;button class=&quot;btn&quot; type=&quot;button&quot;&gt;&lt;i class=&quot;fa fa-pencil&quot;&gt;&lt;/i&gt; &lt;span&gt;With Icon&lt;/span&gt;&lt;/button&gt;
+&lt;button class=&quot;btn&quot; type=&quot;button&quot;&gt;&lt;i class=&quot;fa fa-info&quot;&gt;&lt;/i&gt; &lt;span&gt;With Icon&lt;/span&gt;&lt;/button&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+
+    <div class="attribute-area">
+        <ul>
+            <li>
+                <b>icon-type</b>: Formats the icon attribute. Default value is FontAwesome.
+            </li>
+            <li>
+                <b>icon</b>: Sets icon to button.
+            </li>
+        </ul>
     </div>
 </div>
 
-<h4># Example</h4>
+
+<h4> Busy Text Example</h4>
+
 
 <div class="demo-with-code">
+
     <div class="demo-area">
-        <abp-button text="Busy" busy-text="Saving..." />
+            <abp-button text="Busy" busy-text="Saving..."/>
     </div>
     <div class="code-area">
-        <pre>
+        <abp-tabs>
+            <abp-tab title="Tag Helper">
+                <pre><code>
 &lt;abp-button text=&quot;Busy&quot; busy-text=&quot;Saving...&quot;/&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Generated">
+                <pre><code>
+&lt;button class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Saving...&quot;&gt;&lt;span&gt;Busy&lt;/span&gt;&lt;/button&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
+    </div>
+
+    <div class="attribute-area">
+        <ul>
+            <li>
+                <b>busy-text</b>: Sets "data-busy-text" attribute. Default value is localization of "ProcessingWithThreeDot" string.
+            </li>
+        </ul>
     </div>
 </div>
 
-<h4># Group Examples</h4>
+@*<h4># Group Examples</h4>
 
-<div class="demo-with-code">
-    <div class="demo-area">
+    <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>
+                <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 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>
+            <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><code>
+
+    &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;
+    </code></pre>
+        </div>
+    </div>*@