diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonSize.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonSize.cs index 65a0842d7b..dd07ff22bf 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonSize.cs +++ b/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, } } \ No newline at end of file diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonSizeExtensions.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonSizeExtensions.cs index 4231ac7ba6..408ba37573 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonSizeExtensions.cs +++ b/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: diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonTagHelper.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonTagHelper.cs index afd718da8f..b26984fde4 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonTagHelper.cs +++ b/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; } diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonTagHelperServiceBase.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonTagHelperServiceBase.cs index b6f2e8f3d1..23365deb48 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpButtonTagHelperServiceBase.cs +++ b/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) diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpLinkButtonTagHelper.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpLinkButtonTagHelper.cs index 8e517ea493..08b2ecd41c 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/AbpLinkButtonTagHelper.cs +++ b/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; } diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/IButtonTagHelperBase.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/IButtonTagHelperBase.cs index dbe20def2a..a0e34b039c 100644 --- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Button/IButtonTagHelperBase.cs +++ b/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; } diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Buttons.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Buttons.cshtml index 6fe8f26395..9e746b0fe7 100644 --- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Buttons.cshtml +++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Buttons.cshtml @@ -7,19 +7,32 @@ @section styles { + } +@section scripts { + + @* + *@ + +} + + + + +

Buttons

Based on Bootstrap button.

-

# Example

+

Examples

- Primary + Secondary Success Danger @@ -30,22 +43,76 @@ Link
- 
-<abp-button text="Default"/>
-<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 button-type="Danger">Danger</abp-button>
-<abp-button button-type="Warning">Warning</abp-button>
-<abp-button button-type="Info">Info</abp-button>
-<abp-button button-type="Light">Light</abp-button>
-<abp-button button-type="Dark">Dark</abp-button>
-<abp-button button-type="Link">Link</abp-button>
-
+ + + 

+<abp-button> Default </abp-button>
+<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 button-type="Danger">Danger</abp-button>
+<abp-button button-type="Warning">Warning</abp-button>
+<abp-button button-type="Info">Info</abp-button>
+<abp-button button-type="Light">Light</abp-button>
+<abp-button button-type="Dark">Dark</abp-button>
+
+<abp-button button-type="Link">Link</abp-button>
+
+ + +

+<button type="button" class="btn">Default</button>
+<button type="button" class="btn btn-primary">Primary</button>
+<button type="button" class="btn btn-secondary">Secondary</button>
+<button type="button" class="btn btn-success">Success</button>
+<button type="button" class="btn btn-danger">Danger</button>
+<button type="button" class="btn btn-warning">Warning</button>
+<button type="button" class="btn btn-info">Info</button>
+<button type="button" class="btn btn-light">Light</button>
+<button type="button" class="btn btn-dark">Dark</button>
+
+<button type="button" class="btn btn-link">Link</button>
+
+ + +
+
+ +

Button tags

+ +
+
+ Link + + + + +
+
+ + +

+<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" />
+
+ + + 

+<a class="btn btn-primary" href="#" role="button">Link</a>
+<button class="btn btn-primary" type="submit">Button</button>
+<input class="btn btn-primary" type="button" value="Input">
+<input class="btn btn-primary" type="submit" value="Submit">
+<input class="btn btn-primary" type="reset" value="Reset">
+
+ +
-

# Example

+

Outline buttons

@@ -59,7 +126,9 @@ Dark
- 
+        
+            
+                

 <abp-button button-type="Outline_Primary">Primary</abp-button>
 <abp-button button-type="Outline_Secondary">Secondary</abp-button>
 <abp-button button-type="Outline_Success">Success</abp-button>
@@ -68,133 +137,211 @@
 <abp-button button-type="Outline_Info">Info</abp-button>
 <abp-button button-type="Outline_Light">Light</abp-button>
 <abp-button button-type="Outline_Dark">Dark</abp-button>
-

+
+ + + 

+<button type="button" class="btn btn-outline-primary">Primary</button>
+<button type="button" class="btn btn-outline-secondary">Secondary</button>
+<button type="button" class="btn btn-outline-success">Success</button>
+<button type="button" class="btn btn-outline-danger">Danger</button>
+<button type="button" class="btn btn-outline-warning">Warning</button>
+<button type="button" class="btn btn-outline-info">Info</button>
+<button type="button" class="btn btn-outline-light">Light</button>
+<button type="button" class="btn btn-outline-dark">Dark</button>
+
+ +
-

# Example

+

Sizes

-
- Link - - - - +
+ +
- 
-<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" />
-
+ + + 

+<abp-button size="Large" button-type="Primary" text="Large button" />
+<abp-button size="Large" button-type="Secondary" text="Large button" />
+
+ + + 

+<button type="button" class="btn btn-primary btn-lg">Large button</button>
+<button type="button" class="btn btn-secondary btn-lg">Large button</button>
+
+ +
-

# Example

- - - - + +
- 
-<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" />
+
+ + + 

+<button type="button" class="btn btn-primary btn-sm">Small button</button>
+<button type="button" class="btn btn-secondary btn-sm">Small button</button>
+
+ +
-

# Example

-
- + +
- 
-<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" />
+
+ + + 

+<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
+<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
+
+ +
-

# Example

+ +

Icon

+
+
- 
+        
+            
+                

+<abp-button icon="pencil" text="With Icon"/>
 <abp-button icon-type="FontAwesome" icon="info" text="With Icon"/>
-

+
+ + + 

+<button class="btn" type="button"><i class="fa fa-pencil"></i> <span>With Icon</span></button>
+<button class="btn" type="button"><i class="fa fa-info"></i> <span>With Icon</span></button>
+
+ + +
+ +
+
    +
  • + icon-type: Formats the icon attribute. Default value is FontAwesome. +
    • +
  • + icon: Sets icon to button. +
    • +
-

# Example

+ +

Busy Text Example

+
+
- +
- 
+        
+            
+                

 <abp-button text="Busy" busy-text="Saving..."/>
-

+
+ + + 

+<button class="btn" type="button" data-busy-text="Saving..."><span>Busy</span></button>
+
+ + +
+ +
+
    +
  • + busy-text: Sets "data-busy-text" attribute. Default value is localization of "ProcessingWithThreeDot" string. +
    • +
-

# Group Examples

+@*

# Group Examples

-
-
+
+
- - Left - Middle - Right - + + Left + Middle + Right + - - Primary - Secondary - Success - + + Primary + Secondary + Success + - - Top - Middle - Bottom - -
-
- 
-
-<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>
-
-
-
\ No newline at end of file + + Top + Middle + Bottom + +
+
+ 

+
+    <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>
+
+
+
*@ \ No newline at end of file