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

Button Tag Helper Docs 

And some minor changes to tag helper attributes
pull/670/head
Yunus Emre Kalkan 8 years ago
parent
dd6fcaa8e0
commit
7cf5a1e855
7 changed files with 257 additions and 109 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. 6
      framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonSize.cs
  2. 8
      framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonSizeExtensions.cs
  3. 2
      framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonTagHelper.cs
  4. 5
      framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonTagHelperServiceBase.cs
  5. 2
      framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpLinkButtonTagHelper.cs
  6. 2
      framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/IButtonTagHelperBase.cs
  7. 341
      framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Buttons.cshtml

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

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

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

@ -12,6 +12,14 @@
return "btn-md"; return "btn-md";
case AbpButtonSize.Large: case AbpButtonSize.Large:
return "btn-lg"; 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: case AbpButtonSize.Default:
return ""; return "";
default: default:

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

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

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

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

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

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

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

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

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

@ -7,19 +7,32 @@
@section styles { @section styles {
<abp-style-bundle> <abp-style-bundle>
<abp-style src="/css/demo.css" /> <abp-style src="/css/demo.css" />
<abp-style src="/libs/highlight.js/styles/default.css" />
</abp-style-bundle> </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> <h2>Buttons</h2>
<p>Based on <a href="http://getbootstrap.com/docs/4.1/components/buttons/" target="_blank"> Bootstrap button</a>.</p> <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-with-code">
<div class="demo-area"> <div class="demo-area">
<abp-button text="Default" /> <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="Secondary">Secondary</abp-button>
<abp-button button-type="Success">Success</abp-button> <abp-button button-type="Success">Success</abp-button>
<abp-button button-type="Danger">Danger</abp-button> <abp-button button-type="Danger">Danger</abp-button>
@ -30,22 +43,76 @@
<abp-button button-type="Link">Link</abp-button> <abp-button button-type="Link">Link</abp-button>
</div> </div>
<div class="code-area"> <div class="code-area">
<pre> <abp-tabs>
&lt;abp-button text=&quot;Default&quot;/&gt; <abp-tab title="Tag Helper">
&lt;abp-button button-type="Primary"&gt;Primary&lt;/abp-button&gt; <pre><code>
&lt;abp-button button-type="Secondary"&gt;Secondary&lt;/abp-button&gt; &lt;abp-button&gt; Default &lt;/abp-button&gt;
&lt;abp-button button-type="Success"&gt;Success&lt;/abp-button&gt; &lt;abp-button button-type=&quot;Primary&quot;&gt;Primary&lt;/abp-button&gt;
&lt;abp-button button-type="Danger"&gt;Danger&lt;/abp-button&gt; &lt;abp-button button-type=&quot;Secondary&quot;&gt;Secondary&lt;/abp-button&gt;
&lt;abp-button button-type="Warning"&gt;Warning&lt;/abp-button&gt; &lt;abp-button button-type=&quot;Success&quot;&gt;Success&lt;/abp-button&gt;
&lt;abp-button button-type="Info"&gt;Info&lt;/abp-button&gt; &lt;abp-button button-type=&quot;Danger&quot;&gt;Danger&lt;/abp-button&gt;
&lt;abp-button button-type="Light"&gt;Light&lt;/abp-button&gt; &lt;abp-button button-type=&quot;Warning&quot;&gt;Warning&lt;/abp-button&gt;
&lt;abp-button button-type="Dark"&gt;Dark&lt;/abp-button&gt; &lt;abp-button button-type=&quot;Info&quot;&gt;Info&lt;/abp-button&gt;
&lt;abp-button button-type="Link"&gt;Link&lt;/abp-button&gt; &lt;abp-button button-type=&quot;Light&quot;&gt;Light&lt;/abp-button&gt;
</pre> &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>
</div> </div>
<h4># Example</h4> <h4>Outline buttons</h4>
<div class="demo-with-code"> <div class="demo-with-code">
<div class="demo-area"> <div class="demo-area">
@ -59,7 +126,9 @@
<abp-button button-type="Outline_Dark">Dark</abp-button> <abp-button button-type="Outline_Dark">Dark</abp-button>
</div> </div>
<div class="code-area"> <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_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_Secondary"&gt;Secondary&lt;/abp-button&gt;
&lt;abp-button button-type="Outline_Success"&gt;Success&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_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_Light"&gt;Light&lt;/abp-button&gt;
&lt;abp-button button-type="Outline_Dark"&gt;Dark&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>
</div> </div>
<h4># Example</h4> <h4>Sizes</h4>
<div class="demo-with-code"> <div class="demo-with-code">
<div class="demo-area" style="margin: 35px;"> <div class="demo-area">
<a abp-button="Primary" href="#">Link</a> <abp-button size="Large" button-type="Primary" text="Large button" />
<abp-button button-type="Primary" type="submit" text="Button" /> <abp-button size="Large" button-type="Secondary" text="Large 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>
<div class="code-area"> <div class="code-area">
<pre> <abp-tabs>
&lt;a abp-button="Primary" href="#"&gt;Link&lt;/a&gt; <abp-tab title="Tag Helper">
&lt;abp-button button-type=&quot;Primary&quot; type=&quot;submit&quot; text=&quot;Button&quot;/&gt; <pre><code>
&lt;input abp-button="Primary" value="Input" /&gt; &lt;abp-button size=&quot;Large&quot; button-type=&quot;Primary&quot; text=&quot;Large button&quot; /&gt;
&lt;input abp-button="Primary" type="submit" value="Submit" /&gt; &lt;abp-button size=&quot;Large&quot; button-type=&quot;Secondary&quot; text=&quot;Large button&quot; /&gt;
&lt;input abp-button="Primary" type="reset" value="Reset" /&gt; </code></pre>
</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>
</div> </div>
<h4># Example</h4>
<div class="demo-with-code"> <div class="demo-with-code">
<div class="demo-area"> <div class="demo-area">
<abp-button size="Default" text="Default" /> <abp-button size="Small" button-type="Primary" text="Small button" />
<abp-button size="Small" text="Small" /> <abp-button size="Small" button-type="Secondary" text="Small button" />
<abp-button size="Medium" text="Medium" />
<abp-button size="Large" text="Large" />
</div> </div>
<div class="code-area"> <div class="code-area">
<pre> <abp-tabs>
&lt;abp-button size=&quot;Default&quot; text=&quot;Default&quot; /&gt; <abp-tab title="Tag Helper">
&lt;abp-button size=&quot;Small&quot; text=&quot;Small&quot; /&gt; <pre><code>
&lt;abp-button size=&quot;Medium&quot; text=&quot;Medium&quot; /&gt; &lt;abp-button size=&quot;Small&quot; button-type=&quot;Primary&quot; text=&quot;Small button&quot; /&gt;
&lt;abp-button size=&quot;Large&quot; text=&quot;Large&quot; /&gt; &lt;abp-button size=&quot;Small&quot; button-type=&quot;Secondary&quot; text=&quot;Small button&quot; /&gt;
</pre> </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>
</div> </div>
<h4># Example</h4>
<div class="demo-with-code"> <div class="demo-with-code">
<div class="demo-area"> <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>
<div class="code-area"> <div class="code-area">
<pre> <abp-tabs>
&lt;abp-button block=&quot;true&quot; text=&quot;Block&quot; /&gt; <abp-tab title="Tag Helper">
</pre> <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>
</div> </div>
<h4># Example</h4>
<h4> Icon</h4>
<div class="demo-with-code"> <div class="demo-with-code">
<div class="demo-area"> <div class="demo-area">
<abp-button icon="pencil" text="With Icon" />
<abp-button icon-type="FontAwesome" icon="info" text="With Icon" /> <abp-button icon-type="FontAwesome" icon="info" text="With Icon" />
</div> </div>
<div class="code-area"> <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; &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>
</div> </div>
<h4># Example</h4>
<h4> Busy Text Example</h4>
<div class="demo-with-code"> <div class="demo-with-code">
<div class="demo-area"> <div class="demo-area">
<abp-button text="Busy" busy-text="Saving..." /> <abp-button text="Busy" busy-text="Saving..."/>
</div> </div>
<div class="code-area"> <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; &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>
</div> </div>
<h4># Group Examples</h4> @*<h4># Group Examples</h4>
<div class="demo-with-code"> <div class="demo-with-code">
<div class="demo-area"> <div class="demo-area">
<abp-button-group> <abp-button-group>
<abp-button>Left</abp-button> <abp-button>Left</abp-button>
<abp-button>Middle</abp-button> <abp-button>Middle</abp-button>
<abp-button>Right</abp-button> <abp-button>Right</abp-button>
</abp-button-group> </abp-button-group>
<abp-button-group size="Large"> <abp-button-group size="Large">
<abp-button button-type="Primary">Primary</abp-button> <abp-button button-type="Primary">Primary</abp-button>
<abp-button button-type="Secondary">Secondary</abp-button> <abp-button button-type="Secondary">Secondary</abp-button>
<abp-button button-type="Success">Success</abp-button> <abp-button button-type="Success">Success</abp-button>
</abp-button-group> </abp-button-group>
<abp-button-group direction="Vertical" size="Small"> <abp-button-group direction="Vertical" size="Small">
<abp-button button-type="Primary">Top</abp-button> <abp-button button-type="Primary">Top</abp-button>
<abp-button button-type="Warning">Middle</abp-button> <abp-button button-type="Warning">Middle</abp-button>
<abp-button button-type="Danger">Bottom</abp-button> <abp-button button-type="Danger">Bottom</abp-button>
</abp-button-group> </abp-button-group>
</div> </div>
<div class="code-area"> <div class="code-area">
<pre> <pre><code>
&lt;abp-button-group&gt; &lt;abp-button-group&gt;
&lt;abp-button&gt; Left &lt;/abp-button&gt; &lt;abp-button&gt; Left &lt;/abp-button&gt;
&lt;abp-button&gt; Middle &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&gt; Right &lt;/abp-button&gt;
&lt;/abp-button-group&gt; &lt;/abp-button-group&gt;
&lt;abp-button-group size=&quot;Large&quot;&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;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;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;Success&quot;&gt; Success &lt;/abp-button&gt;
&lt;/abp-button-group&gt; &lt;/abp-button-group&gt;
&lt;abp-button-group direction=&quot;Vertical&quot; size=&quot;Small&quot;&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;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;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 button-type=&quot;Danger&quot;&gt; Bottom &lt;/abp-button&gt;
&lt;/abp-button-group&gt; &lt;/abp-button-group&gt;
</pre> </code></pre>
</div> </div>
</div> </div>*@
Write Preview
Loading…
Cancel
Save