imhven
/
abp
mirror of https://github.com/abpframework/abp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added abp-button-group tag helper

Browse Source
pull/652/head
Yunus Emre Kalkan 6 years ago
parent 9803016be7
commit f9bf0960ec
5 changed files with 140 additions and 0 deletions
Show Stats Download Patch File Download Diff File

13
framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonGroupDirection.cs
Unescape View File

@ -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
}
}

10
framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonGroupSize.cs
Unescape View File

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

15
framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonGroupTagHelper.cs
Unescape View File

@ -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)
{
}
}
}

55
framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonGroupTagHelperService.cs
Unescape View File

@ -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");
}
}
}

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

@ -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>
Write Preview
Loading…
Cancel
Save