" + innerContent + "
";
+ output.Content.SetHtmlContent(innerContent);
}
}
}
\ No newline at end of file
diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpCollapseButtonTagHelper.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpCollapseButtonTagHelper.cs
index 2e6da81cf0..6b8fc8c30b 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpCollapseButtonTagHelper.cs
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Collapse/AbpCollapseButtonTagHelper.cs
@@ -1,11 +1,14 @@
-using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button;
namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Collapse
{
+
+ [HtmlTargetElement("abp-button", Attributes = "abp-collapse-id")]
+ [HtmlTargetElement("a", Attributes = "abp-collapse-id")]
public class AbpCollapseButtonTagHelper : AbpTagHelper");
- output.PostElement.SetHtmlContent("
");
- }
- }
-
- protected virtual void SetResponsive(TagHelperContext context, TagHelperOutput output) {
- if (TagHelper.Responsive ?? false)
- {
- output.Attributes.AddClass("img-fluid");
- }
- }
-
- protected virtual void SetThumbnail(TagHelperContext context, TagHelperOutput output)
- {
- if (TagHelper.Thumbnail ?? false)
- {
- output.Attributes.AddClass("img-thumbnail");
- }
- }
-
- protected virtual void SetRounded(TagHelperContext context, TagHelperOutput output)
- {
- if (TagHelper.Rounded ?? false)
- {
- output.Attributes.AddClass("rounded");
- }
- }
-
- protected virtual void SetAlt(TagHelperContext context, TagHelperOutput output)
- {
- output.Attributes.Add("alt",TagHelper.Alt);
- }
- }
-}
\ No newline at end of file
diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelper.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelper.cs
index 5524f221ff..aa61832ab9 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelper.cs
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelper.cs
@@ -4,6 +4,8 @@
{
public AbpModalSize Size { get; set; } = AbpModalSize.Default;
+ public bool? Centered { get; set; } = false;
+
public AbpModalTagHelper(AbpModalTagHelperService tagHelperService)
: base(tagHelperService)
{
diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelperService.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelperService.cs
index 23453df1d0..8106db4661 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelperService.cs
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelperService.cs
@@ -36,6 +36,12 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
{
var classNames = new StringBuilder("modal-dialog");
+ if (TagHelper.Centered ?? false)
+ {
+ classNames.Append(" ");
+ classNames.Append("modal-dialog-centered");
+ }
+
if (TagHelper.Size != AbpModalSize.Default)
{
classNames.Append(" ");
diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Nav/AbpNavItemTagHelper.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Nav/AbpNavItemTagHelper.cs
index e7655c6073..40f25951fe 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Nav/AbpNavItemTagHelper.cs
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Nav/AbpNavItemTagHelper.cs
@@ -2,8 +2,6 @@
{
public class AbpNavItemTagHelper : AbpTagHelper" + Environment.NewLine);
+ output.PostElement.SetHtmlContent(Environment.NewLine + "
");
+ }
+
protected virtual int CalculateStyleWidth()
{
return (int)((TagHelper.Value - TagHelper.MinValue) * (100 / (TagHelper.MaxValue - TagHelper.MinValue)));
diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/ProgressBar/AbpProgressGroupTagHelper.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/ProgressBar/AbpProgressGroupTagHelper.cs
new file mode 100644
index 0000000000..10a0ee4bb4
--- /dev/null
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/ProgressBar/AbpProgressGroupTagHelper.cs
@@ -0,0 +1,11 @@
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.ProgressBar
+{
+ public class AbpProgressGroupTagHelper : AbpTagHelperAlerts
Based on Bootstrap Alert.
-# Alert Example
+Examples
-
+
+ A simple primary alert—check it out!
+
+
+ A simple secondary alert—check it out!
+
+
+ A simple success alert—check it out!
+
- I'm an abp alert!
+ A simple danger alert—check it out!
+
+
+ A simple warning alert—check it out!
+
+
+ A simple info alert—check it out!
+
+
+ A simple light alert—check it out!
+
+
+ A simple dark alert—check it out!
-
-
+
+
++ ++ + +<abp-alert alert-type="Light"> + A simple light alert—check it out! +</abp-alert> +<abp-alert alert-type="Dark"> + A simple dark alert—check it out! +</abp-alert> ++<abp-alert alert-type="Primary"> + A simple primary alert—check it out! +</abp-alert> +<abp-alert alert-type="Secondary"> + A simple secondary alert—check it out! +</abp-alert> +<abp-alert alert-type="Success"> + A simple success alert—check it out! +</abp-alert> <abp-alert alert-type="Danger"> - I'm an abp alert! + A simple danger alert—check it out! +</abp-alert> +<abp-alert alert-type="Warning"> + A simple warning alert—check it out! +</abp-alert> +<abp-alert alert-type="Info"> + A simple info alert—check it out! </abp-alert> -
+<div class="alert alert-primary" role="alert">
+ A simple primary alert—check it out!
+</div>
+<div class="alert alert-secondary" role="alert">
+ A simple secondary alert—check it out!
+</div>
+<div class="alert alert-success" role="alert">
+ A simple success alert—check it out!
+</div>
+<div class="alert alert-danger" role="alert">
+ A simple danger alert—check it out!
+</div>
+<div class="alert alert-warning" role="alert">
+ A simple warning alert—check it out!
+</div>
+<div class="alert alert-info" role="alert">
+ A simple info alert—check it out!
+</div>
+<div class="alert alert-light" role="alert">
+ A simple light alert—check it out!
+</div>
+<div class="alert alert-dark" role="alert">
+ A simple dark alert—check it out!
+</div>
+# Dismissible Alert Example
+Link color
-
-
- I'm a dismissible abp alert!
+
+ A simple primary alert with an example link. Give it a click if you like.
+
+
+ A simple secondary alert with an example link. Give it a click if you like.
+
+
+ A simple success alert with an example link. Give it a click if you like.
+
+
+ A simple danger alert with an example link. Give it a click if you like.
+
+
+ A simple warning alert with an example link. Give it a click if you like.
+
+
+ A simple info alert with an example link. Give it a click if you like.
+
+
+ A simple light alert with an example link. Give it a click if you like.
+
+
+ A simple dark alert with an example link. Give it a click if you like.
-
-
+
+
-<abp-alert alert-type="Warning" dismissible="true"> - I'm a dismissible abp alert! ++ ++ + +<abp-alert alert-type="Warning"> + A simple warning alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like. +</abp-alert> +<abp-alert alert-type="Info"> + A simple info alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like. +</abp-alert> +<abp-alert alert-type="Light"> + A simple light alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like. +</abp-alert> +<abp-alert alert-type="Dark"> + A simple dark alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like. +</abp-alert> ++<abp-alert alert-type="Primary"> + A simple primary alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like. +</abp-alert> +<abp-alert alert-type="Secondary"> + A simple secondary alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like. +</abp-alert> +<abp-alert alert-type="Success"> + A simple success alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like. +</abp-alert> +<abp-alert alert-type="Danger"> + A simple danger alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like. </abp-alert> -
+<div class="alert alert-primary" role="alert">
+ A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-secondary" role="alert">
+ A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-success" role="alert">
+ A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-danger" role="alert">
+ A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-warning" role="alert">
+ A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-info" role="alert">
+ A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-light" role="alert">
+ A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+<div class="alert alert-dark" role="alert">
+ A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
+</div>
+# Alert With Link Example
+Additional content
-
-
- I'm an abp alert with Link!
+
+
+
-
Well done!
+Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
++
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
-
+
+
-<abp-alert alert-type="Info"> - I'm an abp alert with <a abp-alert-link href="#">Link</a>! ++ ++ + ++<abp-alert alert-type="Success"> + <h4>Well done!</h4> + <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> + <hr> + <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> </abp-alert> -
+<div class="alert alert-success" role="alert">
+ <h4 class="alert-heading">Well done!</h4>
+ <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+ <hr>
+ <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+</div>
+# Alert With Header Example
+Dismissing
-
-
+ Holy guacamole! You should check in on some of those fields below.
-
Header
- I'm an abp alert! +
-
+
+
-<abp-alert alert-type="Primary"> - <h4>Header</h4> - I'm an abp alert! ++ ++ + ++<abp-alert alert-type="Warning" dismissible="true"> + Holy guacamole! You should check in on some of those fields below. </abp-alert> -
+<div class="alert alert-warning alert-dismissible fade show" role="alert">
+ Holy guacamole! You should check in on some of those fields below.
+ <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+</div>
+Badges
Based on Bootstrap Badge.
-# Badges Examples
+Example
- I'm an abp badge!
- I'm an abp pill badge!
- I'm an abp badge link!
- I'm an abp pill badge link!
+
+ Example heading New
+Example heading New
+Example heading New
+Example heading New
+Example heading New
+Example heading New
+
+
+
+
+
+
+
+
+
+<h1>Example heading <span abp-badge="Secondary">New</span></h1>
+<h2>Example heading <span abp-badge="Secondary">New</span></h2>
+<h3>Example heading <span abp-badge="Secondary">New</span></h3>
+<h4>Example heading <span abp-badge="Secondary">New</span></h4>
+<h5>Example heading <span abp-badge="Secondary">New</span></h5>
+<h6>Example heading <span abp-badge="Secondary">New</span></h6>
+
+<h1>Example heading <span class="badge badge-secondary">New</span></h1>
+<h2>Example heading <span class="badge badge-secondary">New</span></h2>
+<h3>Example heading <span class="badge badge-secondary">New</span></h3>
+<h4>Example heading <span class="badge badge-secondary">New</span></h4>
+<h5>Example heading <span class="badge badge-secondary">New</span></h5>
+<h6>Example heading <span class="badge badge-secondary">New</span></h6>
+
+
-<span abp-badge-pill="Warning" >I'm an abp pill badge!</span>
+
+
+
+ Notifications 4
+
-
+-<span abp-badge="Primary" >I'm an abp badge!</span> ++ ++ +++<abp-button button-type="Primary"> + Notifications <span abp-badge="Light">4</span> +</abp-button> ++ +++<button type="button" class="btn btn-primary"> + Notifications <span class="badge badge-light">4</span> +</button> +
Contextual variations
-<a abp-badge="Danger" href="#" >I'm an abp badge link!</a> +
+
+
+
-<a abp-badge-pill="Success" href="#" >I'm an abp pill badge link!</a>
-
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Light
+ Dark
+
+
+
+
+
+
+
+
+<span abp-badge="Primary">Primary</span>
+<span abp-badge="Secondary">Secondary</span>
+<span abp-badge="Success">Success</span>
+<span abp-badge="Danger">Danger</span>
+<span abp-badge="Warning">Warning</span>
+<span abp-badge="Info">Info</span>
+<span abp-badge="Light">Light</span>
+<span abp-badge="Dark">Dark</span>
+
+<span class="badge badge-primary">Primary</span>
+<span class="badge badge-secondary">Secondary</span>
+<span class="badge badge-success">Success</span>
+<span class="badge badge-danger">Danger</span>
+<span class="badge badge-warning">Warning</span>
+<span class="badge badge-info">Info</span>
+<span class="badge badge-light">Light</span>
+<span class="badge badge-dark">Dark</span>
+Pill badges
+ +
+
+
+
+
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Light
+ Dark
+
+
+
+
+
+
+
+
+
+
+<span abp-badge-pill="Primary">Primary</span>
+<span abp-badge-pill="Secondary">Secondary</span>
+<span abp-badge-pill="Success">Success</span>
+<span abp-badge-pill="Danger">Danger</span>
+<span abp-badge-pill="Warning">Warning</span>
+<span abp-badge-pill="Info">Info</span>
+<span abp-badge-pill="Light">Light</span>
+<span abp-badge-pill="Dark">Dark</span>
+
+<span class="badge badge-pill badge-primary">Primary</span>
+<span class="badge badge-pill badge-secondary">Secondary</span>
+<span class="badge badge-pill badge-success">Success</span>
+<span class="badge badge-pill badge-danger">Danger</span>
+<span class="badge badge-pill badge-warning">Warning</span>
+<span class="badge badge-pill badge-info">Info</span>
+<span class="badge badge-pill badge-light">Light</span>
+<span class="badge badge-pill badge-dark">Dark</span>
+Links
+ +
+
+
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Borders.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Borders.cshtml
index 9b683f8924..76c14746af 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Borders.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Borders.cshtml
@@ -10,43 +10,206 @@
}
+@section scripts {
+
+
+
+
+
+
+
+
+
+<a href="#" abp-badge="Primary">Primary</a>
+<a href="#" abp-badge="Secondary">Secondary</a>
+<a href="#" abp-badge="Success">Success</a>
+<a href="#" abp-badge="Danger">Danger</a>
+<a href="#" abp-badge="Warning">Warning</a>
+<a href="#" abp-badge="Info">Info</a>
+<a href="#" abp-badge="Light">Light</a>
+<a href="#" abp-badge="Dark">Dark</a>
+
+<a href="#" class="badge badge-primary">Primary</a>
+<a href="#" class="badge badge-secondary">Secondary</a>
+<a href="#" class="badge badge-success">Success</a>
+<a href="#" class="badge badge-danger">Danger</a>
+<a href="#" class="badge badge-warning">Warning</a>
+<a href="#" class="badge badge-info">Info</a>
+<a href="#" class="badge badge-light">Light</a>
+<a href="#" class="badge badge-dark">Dark</a>
+Borders
Based on Bootstrap Border.
-# Borders Examples
+Border
+ +Additive
-
+ @*
+}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml
new file mode 100644
index 0000000000..25322444db
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml
@@ -0,0 +1,288 @@
+@page
+@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.ButtonGroupsModel
+@{
+ ViewData["Title"] = "ButtonGroups";
+}
+
+@section styles {
+
- aaa
- bbb
- ccc
- ddd
- eee
- fff
- ggg
- hhh
- iii
- jjj
- kkk
- lll
- mmm
+
+
+
+
+
+
+
+
-
+
+
+
+
+
-<span abp-border="Default">aaa</span> -<span abp-border="Top">bbb</span> -<span abp-border="Right">ccc</span> -<span abp-border="Left">ddd</span> -<span abp-border="Bottom">eee</span> -<span abp-border="Top_0">fff</span> -<span abp-border="Right_0">ggg</span> -<span abp-border="Left_0">hhh</span> -<span abp-border="Bottom_0">iii</span> -<span abp-border="Top_Primary">jjj</span> -<span abp-border="Warning_0">kkk</span> -<span abp-border="Bottom_Primary_0">lll</span> -<span abp-border="Left_Danger">mmm</span> -+
+<span abp-border="Default"></span>
+<span abp-border="Top"></span>
+<span abp-border="Right"></span>
+<span abp-border="Bottom"></span>
+<span abp-border="Left"></span>
+
+<span class="border"></span>
+<span class="border-top"></span>
+<span class="border-right"></span>
+<span class="border-bottom"></span>
+<span class="border-left"></span>
+Subtractive
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<span abp-border="_0"></span>
+<span abp-border="Top_0"></span>
+<span abp-border="Right_0"></span>
+<span abp-border="Bottom_0"></span>
+<span abp-border="Left_0"></span>
+
+<span class="borde-0"></span>
+<span class="border-top-0"></span>
+<span class="border-right-0"></span>
+<span class="border-bottom-0"></span>
+<span class="border-left-0"></span>
+Border color
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + +
+ + + + + + + + + +
+
+
+
+
+
+
+
+
+<span abp-border="Primary"></span>
+<span abp-border="Secondary"></span>
+<span abp-border="Success"></span>
+<span abp-border="Danger"></span>
+<span abp-border="Info"></span>
+<span abp-border="Light"></span>
+<span abp-border="Dark"></span>
+<span abp-border="White"></span>
+<br/>
+<span abp-border="Left_Primary"></span>
+<span abp-border="Top_Secondary"></span>
+<span abp-border="Right_Success"></span>
+<span abp-border="Bottom_Danger"></span>
+<span abp-border="bottom_Warning"></span>
+<span abp-border="Left_Info"></span>
+<span abp-border="Top_Light"></span>
+<span abp-border="Right_Dark"></span>
+
+<span class="border border-primary"></span>
+<span class="border border-secondary"></span>
+<span class="border border-success"></span>
+<span class="border border-danger"></span>
+<span class="border border-warning"></span>
+<span class="border border-info"></span>
+<span class="border border-light"></span>
+<span class="border border-dark"></span>
+<span class="border border-white"></span>
+<br/>
+<span class="border border-left border-primary"></span>
+<span class="border border-top border-secondary"></span>
+<span class="border border-right border-success"></span>
+<span class="border border-bottom border-danger"></span>
+<span class="border border-bottom border-warning"></span>
+<span class="border border-left border-info"></span>
+<span class="border border-top border-light"></span>
+<span class="border border-right border-dark"></span>
+Border-radius
+ +
+
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Breadcrumbs.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Breadcrumbs.cshtml
index e3ab71b246..8ede105b97 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Breadcrumbs.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Breadcrumbs.cshtml
@@ -10,29 +10,87 @@
}
+@section scripts {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<span abp-border="Primary" abp-rounded="Default"></span>
+<span abp-border="Primary" abp-rounded="_0"></span>
+<span abp-border="Primary" abp-rounded="Top"></span>
+<span abp-border="Primary" abp-rounded="Left"></span>
+<span abp-border="Primary" abp-rounded="Bottom"></span>
+<span abp-border="Primary" abp-rounded="Right"></span>
+
+<span class="border border-primary rounded"></span>
+<span class="border border-primary rounded-0"></span>
+<span class="border border-primary rounded-top"></span>
+<span class="border border-primary rounded-left"></span>
+<span class="border border-primary rounded-bottom"></span>
+<span class="border border-primary rounded-right"></span>
+Breadcrumbs
Based on Bootstrap Breadcrumb.
-# Breadcrumb Examples
+Example
+
+
+
+
+
-
+
+
-++ ++ + + +<abp-breadcrumb> + <abp-breadcrumb-item href="#" title="Home" /> + <abp-breadcrumb-item title="Library" /> +</abp-breadcrumb> + +<abp-breadcrumb> + <abp-breadcrumb-item href="#" title="Home" /> + <abp-breadcrumb-item href="#" title="Library"/> + <abp-breadcrumb-item title="Page"/> +</abp-breadcrumb> ++ <abp-breadcrumb> - <abp-breadcrumb-item href="#" title="Home"/> - <abp-breadcrumb-item href="#" title="Library"/> - <abp-breadcrumb-item title="Page"/> + <abp-breadcrumb-item title="Home" /> </abp-breadcrumb> -
+<nav aria-label="breadcrumb">
+ <ol class="breadcrumb">
+ <li class="breadcrumb-item active" aria-current="page">Home</li>
+ </ol>
+</nav>
+
+<nav aria-label="breadcrumb">
+ <ol class="breadcrumb">
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
+ <li class="breadcrumb-item active" aria-current="page">Library</li>
+ </ol>
+</nav>
+
+<nav aria-label="breadcrumb">
+ <ol class="breadcrumb">
+ <li class="breadcrumb-item"><a href="#">Home</a></li>
+ <li class="breadcrumb-item"><a href="#">Library</a></li>
+ <li class="breadcrumb-item active" aria-current="page">Data</li>
+ </ol>
+</nav>
+Button groups
+ +Based on Bootstrap Button group.
+ +Basic example
+ +
+
+
+
+
+
+ Left
+ Middle
+ Right
+
+
+
+
+
+
+
+
+
+
+
+<abp-button-group>
+ <abp-button button-type="Secondary">Left</abp-button>
+ <abp-button button-type="Secondary">Middle</abp-button>
+ <abp-button button-type="Secondary">Right</abp-button>
+</abp-button-group>
+
+<div class="btn-group" role="group">
+ <button type="button" class="btn btn-secondary">Left</button>
+ <button type="button" class="btn btn-secondary">Middle</button>
+ <button type="button" class="btn btn-secondary">Right</button>
+</div>
+Button toolbar
+ +
+
+
+
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+ 5
+ 6
+ 7
+
+
+ 8
+
+
+
+
+
+
+
+
+
+
+
+
+ <abp-button-toolbar>
+ <abp-button-group class="mr-2">
+ <abp-button button-type="Secondary">1</abp-button>
+ <abp-button button-type="Secondary">2</abp-button>
+ <abp-button button-type="Secondary">3</abp-button>
+ <abp-button button-type="Secondary">4</abp-button>
+ </abp-button-group>
+ <abp-button-group class="mr-2">
+ <abp-button button-type="Secondary">5</abp-button>
+ <abp-button button-type="Secondary">6</abp-button>
+ <abp-button button-type="Secondary">7</abp-button>
+ </abp-button-group>
+ <abp-button-group>
+ <abp-button button-type="Secondary">8</abp-button>
+ </abp-button-group>
+ </abp-button-toolbar>
+
+<div class="btn-toolbar" role="toolbar">
+ <div class="btn-group mr-2" role="group">
+ <button type="button" class="btn btn-secondary">1</button>
+ <button type="button" class="btn btn-secondary">2</button>
+ <button type="button" class="btn btn-secondary">3</button>
+ <button type="button" class="btn btn-secondary">4</button>
+ </div>
+ <div class="btn-group mr-2" role="group">
+ <button type="button" class="btn btn-secondary">5</button>
+ <button type="button" class="btn btn-secondary">6</button>
+ <button type="button" class="btn btn-secondary">7</button>
+ </div>
+ <div class="btn-group" role="group">
+ <button type="button" class="btn btn-secondary">8</button>
+ </div>
+</div>
+Sizing
+ +
+
+
+
+
+ Left
+ Middle
+ Right
+
+
+
+ Left
+ Middle
+ Right
+
+
+
+ Left
+ Middle
+ Right
+
+
+ +
+
+
+
+
+
+
+
+
+
+<abp-button-group size="Large">
+ ...
+</abp-button-group>
+
+<abp-button-group>
+ ...
+</abp-button-group>
+
+<abp-button-group size="Small">
+ ...
+</abp-button-group>
+
+<div class="btn-group btn-group-lg" role="group">
+ ...
+</div>
+
+<div class="btn-group" role="group">
+ ...
+</div>
+
+<div class="btn-group btn-group-sm" role="group">
+ ...
+</div>
+Vertical variation
+ +
+
+
+
+
+ 1
+ 2
+
+
+ Dropdown link
+ Dropdown link
+
+
+
+
+
+
+
+
+
+
+
+
+
+<abp-button-group>
+ <abp-button button-type="Secondary">1</abp-button>
+ <abp-button button-type="Secondary">2</abp-button>
+ <abp-dropdown>
+ <abp-dropdown-button button-type="Secondary" text="Dropdown" />
+ <abp-dropdown-menu>
+ <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
+ <abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item>
+ </abp-dropdown-menu>
+ </abp-dropdown>
+</abp-button-group>
+
+<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+ <button type="button" class="btn btn-secondary">1</button>
+ <button type="button" class="btn btn-secondary">2</button>
+
+ <div class="btn-group" role="group">
+ <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown
+ </button>
+ <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
+ <a class="dropdown-item" href="#">Dropdown link</a>
+ <a class="dropdown-item" href="#">Dropdown link</a>
+ </div>
+ </div>
+</div>
+Nesting
+ +
+
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Images.cshtml.cs b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml.cs
similarity index 86%
rename from framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Images.cshtml.cs
rename to framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml.cs
index 34130a050e..dc9ac3c2eb 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Images.cshtml.cs
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ButtonGroups.cshtml.cs
@@ -7,7 +7,7 @@ using Microsoft.AspNetCore.Mvc.RazorPages;
namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
{
- public class ImagesModel : PageModel
+ public class ButtonGroupsModel : PageModel
{
public void OnGet()
{
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..0274cd4d69 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 {
+
+ button
+ button
+
+
+ Dropdown link
+ Dropdown link
+
+
+ button
+ button
+
+
+ Dropdown link
+ Dropdown link
+
+
+ button
+
+
+
+
+
+
+
+
+
+
+
+<abp-button-group direction="Vertical">
+ ...
+</abp-button-group>
+
+<div class="btn-group-vertical">
+ ...
+</div>
+Buttons
Based on Bootstrap button.
-# Example
+Examples
-
+
+
+
+
+
+
+-<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,164 @@ <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
-
-
- Countries { get; set; } = new List
+ public OrderExampleModel MyOrderExampleModel { get; set; }
+
+ public AttributeExamplesModel MyAttributeExamplesModel { get; set; }
+
+ public FormContentExampleModel MyFormContentExampleModel { get; set; }
+
+ public List CountryList { get; set; } = new List
{
new SelectListItem { Value = "CA", Text = "Canada"},
new SelectListItem { Value = "US", Text = "USA"},
@@ -24,72 +30,127 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
public void OnGet()
{
- if (PersonInput == null)
- {
- PersonInput = new PersonModel
+ MyDetailedModel = new DetailedModel
{
- Name = "John",
+ Name = "",
+ Description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+ IsActive = true,
Age = 65,
- Country = "CA",
Day = DateTime.Now,
- City = Cities.NewJersey,
- Phone = new PhoneModel { Number = "326346231", Name = "MyPhone" }
+ MyCarType = CarType.Coupe,
+ YourCarType = CarType.Sedan,
+ Country = "RU",
+ NeighborCountries = new List() { "UK", "CA" }
};
- }
+
+ MyFormContentExampleModel = new FormContentExampleModel();
+
+ MyOrderExampleModel = new OrderExampleModel();
+
+ MyAttributeExamplesModel = new AttributeExamplesModel
+ {
+ DisabledInput = "Disabled Input",
+ ReadonlyInput = "Readonly Input",
+ ReadonlyPlainTextInput = "Readonly Plain Text Input",
+ LargeInput = "Large Input",
+ SmallInput = "Small Input"
+ };
+
}
- public void OnPost()
+ public class FormContentExampleModel
{
+ public string SampleInput { get; set; }
+ }
+
+ public class AttributeExamplesModel
+ {
+ [HiddenInput]
+ public string HiddenInput { get; set; }
+
+ [DisabledInput]
+ public string DisabledInput{ get; set; }
+
+ [ReadOnlyInput]
+ public string ReadonlyInput { get; set; }
+
+ [ReadOnlyInput(PlainText = true)]
+ public string ReadonlyPlainTextInput { get; set; }
+
+ [FormControlSize(AbpFormControlSize.Large)]
+ public string LargeInput { get; set; }
+
+ [FormControlSize(AbpFormControlSize.Small)]
+ public string SmallInput { get; set; }
+ }
+
+ public class OrderExampleModel
+ {
+ [DisplayOrder(10005)]
+ public string Surname{ get; set; }
+
+ //Default 10000
+ public string EmailAddress { get; set; }
+ [DisplayOrder(10003)]
+ public string Name { get; set; }
+
+ [DisplayOrder(9999)]
+ public string City { get; set; }
}
- public class PersonModel
+ public class DetailedModel
{
[Required]
+ [Placeholder("Enter your name...")]
+ [Display(Name = "Name")]
public string Name { get; set; }
[TextArea(Rows = 4)]
- public string Surname { get; set; }
+ [Display(Name = "Description")]
+ [InputInfoText("Describe Yourself")]
+ public string Description { get; set; }
[Required]
- [Range(1, 100)]
+ [DataType(DataType.Password)]
+ [Display(Name = "Password")]
+ public string Password { get; set; }
+
+ [Display(Name = "Is Active")]
+ public bool IsActive { get; set; }
+
+ [Required]
+ [Display(Name = "Age")]
public int Age { get; set; }
[Required]
- public Cities City { get; set; }
+ [Display(Name = "My Car Type")]
+ public CarType MyCarType { get; set; }
- public PhoneModel Phone { get; set; }
+ [Required]
+ [AbpRadioButton(Inline = true)]
+ [Display(Name = "Your Car Type")]
+ public CarType YourCarType { get; set; }
[DataType(DataType.Date)]
- [DisplayOrder(10003)]
+ [Display(Name = "Day")]
public DateTime Day { get; set; }
- public bool IsActive { get; set; }
-
- [AbpRadioButton(Inline = true)]
- [SelectItems(nameof(Countries))]
+ [SelectItems(nameof(CountryList))]
+ [Display(Name = "Country")]
public string Country { get; set; }
+
+ [SelectItems(nameof(CountryList))]
+ [Display(Name = "Neighbor Countries")]
+ public List NeighborCountries { get; set; }
}
- public class PhoneModel
- {
- [Required]
- [DisplayOrder(10002)]
- public string Number { get; set; }
-
- [Required]
- [DisplayOrder(10001)]
- [DisplayName("PhoneName")]
- public string Name { get; set; }
- }
-
- public enum Cities
+ public enum CarType
{
- NewJersey,
- Moscow,
- Istanbul,
- London,
- Beijing
+ Sedan,
+ Hatchback,
+ StationWagon,
+ Coupe
}
}
}
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/FormElements.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/FormElements.cshtml
new file mode 100644
index 0000000000..b62c610fbc
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/FormElements.cshtml
@@ -0,0 +1,465 @@
+@page
+@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
+@model FormElementsModel
+
+@{
+ ViewData["Title"] = "Form Elements";
+}
+
+@section styles {
+
+
+}
+
+@section scripts {
+
+ @*
+}
+
+
+
+
+
+
+
+ CityList { get; set; } = new List
+ {
+ new SelectListItem { Value = "NY", Text = "New York"},
+ new SelectListItem { Value = "LDN", Text = "London"},
+ new SelectListItem { Value = "IST", Text = "Istanbul"},
+ new SelectListItem { Value = "MOS", Text = "Moscow"}
+ };
+
+ public void OnGet()
+ {
+ MyModel = new SampleModel();
+ MyModel.SampleInput0 = "This is a disabled input.";
+ MyModel.SampleInput1 = "This is a readonly input.";
+ MyModel.SampleInput2 = "This is a readonly plain-text.";
+ MyModel.CityRadio = "IST";
+ }
+
+ public class SampleModel
+ {
+ public string Name { get; set; }
+
+ public string SampleInput0 { get; set; }
+
+ public string SampleInput1 { get; set; }
+
+ public string SampleInput2 { get; set; }
+
+ public string LargeInput { get; set; }
+
+ public string SmallInput { get; set; }
+
+ [TextArea]
+ public string Description { get; set; }
+
+ public string EmailAddress { get; set; }
+
+ [Required]
+ [DataType(DataType.Password)]
+ public string Password { get; set; }
+
+ public bool CheckMeOut { get; set; }
+
+ public bool DefaultCheckbox { get; set; }
+
+ public bool DisabledCheckbox { get; set; }
+
+ public CarType CarType { get; set; }
+
+ public string City { get; set; }
+
+ [Display(Name="City")]
+ public string CityRadio { get; set; }
+
+ public List Cities { get; set; }
+ }
+
+ public enum CarType
+ {
+ Sedan,
+ Hatchback,
+ StationWagon,
+ Coupe
+ }
+ }
+}
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml
index 4957fd3636..097b670e70 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Grids.cshtml
@@ -10,260 +10,838 @@
}
+@section scripts {
+
+ @*
+}
+
+
+
+
+
- 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>
+# Example
-
-
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml.cs b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml.cs
index 27075bf09a..7854da4920 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml.cs
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml.cs
@@ -12,9 +12,15 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
public class DynamicFormsModel : PageModel
{
[BindProperty]
- public PersonModel PersonInput { get; set; }
+ public DetailedModel MyDetailedModel { get; set; }
- public List
-
-
-
--<abp-button text="Busy" busy-text="Saving..."/> -+
+
-
+
- + icon-type: Formats the icon attribute. Default value is FontAwesome. + +
- + icon: Sets icon to button. + +
# Group Examples
-
-
+ @*
+}
+
+
+
+
+
-
+
+
+ @*
+}
+
+
+
+
+
-
- Dropdown header
- Action
- Another disabled action
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ Action
+ Another action
Something else here
Separated link
-
-
-
+
+
+
+ @*
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- Left
- Middle
- Right
-
-
- Primary
- Secondary
- Success
-
+
+ @*
+}
+
+
+
+
+
-
-
+
+
-
+
+ @*
+}
+
+
+
+
+
+
-
\ No newline at end of file
+
+
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Collapse.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Collapse.cshtml
index adbe35a3fa..6a9aeb90ca 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Collapse.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Collapse.cshtml
@@ -11,72 +11,223 @@
Busy Text Example
-
-
- Top
- Middle
- Bottom
-
+
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Cards.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Cards.cshtml
index feefc2c04a..0d51658b5f 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Cards.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Cards.cshtml
@@ -10,135 +10,597 @@
}
+@section scripts {
+
+
-
+
+
+
+
+
+
+
+ - -<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> -+
+<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. + +
Cards
Based on Bootstrap card.
-# Example
+Example
-
- Card header
- Card body
+
+
+ 
+
+ Card Title
+ Some quick example text to build on the card title and make up the bulk of the card's content.
+ Go somewhere
+
+
+
-
+
+
+
+
+
<abp-card> - <abp-card-header>Card header</abp-card-header> - <abp-card-body>Card body</abp-card-body> -</abp-card>+
+<abp-card style="width: 18rem;">
+ <img abp-card-image="Top" src="~/imgs/demo/300x200.png"/>
+ <abp-card-body>
+ <abp-card-title>Card Title</abp-card-title>
+ <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text>
+ <a abp-button="Primary" href="#"> Go somewhere</a>
+ </abp-card-body>
+</abp-card>
+
+<div class="card" style="width: 18rem;">
+ <img class="card-img-top" src=".../100px180/" alt="Card image cap">
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <a href="#" class="btn btn-primary">Go somewhere</a>
+ </div>
+</div>
+# Example
+Titles, text, and links
+
-
-
- This is a sample card component built by
- ABP bootstrap card tag helper.
-
+
+ Card title
+ Card subtitle
+ Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
Another link
+
-
+
+
-<abp-card style="width: 18rem;"> - <abp-card-body title="Card title" subtitle="Card subtitle"> - <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text> - <a abp-card-link href="#">Card link</a> - <a abp-card-link href="#">Another link</a> ++ ++ + ++<abp-card style="width: 18rem;"> + <abp-card-body> +<abp-card-title>Card title</abp-card-title> +<abp-card-subtitle class="mb-2 text-muted">Card subtitle</abp-card-subtitle> +<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text> +<a abp-card-link href="#">Card link</a> +<a abp-card-link href="#">Another link</a> </abp-card-body> </abp-card> -
+<div class="card" style="width: 18rem;">
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <a href="#" class="card-link">Card link</a>
+ <a href="#" class="card-link">Another link</a>
+ </div>
+</div>
+# Example
+List groups
+
+
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Vestibulum at eros
+
+
+
+
+
+
+
+
+
+
+
+
+
+<abp-card style="width: 18rem;">
+ <abp-list-group flush="true">
+<abp-list-group-item>Cras justo odio</abp-list-group-item>
+<abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
+<abp-list-group-item>Vestibulum at eros</abp-list-group-item>
+ </abp-list-group>
+</abp-card>
+
+<div class="card" style="width: 18rem;">
+ <ul class="list-group list-group-flush">
+ <li class="list-group-item">Cras justo odio</li>
+ <li class="list-group-item">Dapibus ac facilisis in</li>
+ <li class="list-group-item">Vestibulum at eros</li>
+ </ul>
+</div>
+
+
+
+
+
+
+ Featured
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Vestibulum at eros
+
+
+
+
+
+
+
+
+
+
+
+
+
+<abp-card style="width: 18rem;">
+ <abp-card-header>Featured</abp-card-header>
+ <abp-list-group flush="true">
+<abp-list-group-item>Cras justo odio</abp-list-group-item>
+<abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
+<abp-list-group-item>Vestibulum at eros</abp-list-group-item>
+ </abp-list-group>
+</abp-card>
+
+<div class="card" style="width: 18rem;">
+ <div class="card-header">
+ Featured
+ </div>
+ <ul class="list-group list-group-flush">
+ <li class="list-group-item">Cras justo odio</li>
+ <li class="list-group-item">Dapibus ac facilisis in</li>
+ <li class="list-group-item">Vestibulum at eros</li>
+ </ul>
+</div>
+Kitchen sink
+ +
+
-
+
-
+
- Card title
-
- This is a sample card component built by
- ABP bootstrap card tag helper.
-
- Go somewhere →
+ Card Title
+ Some quick example text to build on the card title and make up the bulk of the card's content.
+
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Vestibulum at eros
+
+
+ Card link
+ Another link
+
+
-
+
+
-<abp-card style="width: 18rem;"> - <img abp-card-image="Top" src="~/imgs/demo/300x200.png" alt="Card image cap"> ++ ++ + ++<abp-card style="width: 18rem;"> + <img abp-card-image="Top" src="~/imgs/demo/300x200.png" /> <abp-card-body> - <abp-card-title>Card title</abp-card-title> - <abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text> - <a href="#" class="btn btn-primary">Go somewhere</a> +<abp-card-title>Card Title</abp-card-title> +<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text> + </abp-card-body> + <abp-list-group flush="true"> +<abp-list-group-item>Cras justo odio</abp-list-group-item> +<abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item> +<abp-list-group-item>Vestibulum at eros</abp-list-group-item> + </abp-list-group> + <abp-card-body> +<a abp-card-link href="#">Card link</a> +<a abp-card-link href="#">Another link</a> </abp-card-body> </abp-card> -
+<div class="card" style="width: 18rem;">
+ <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
+ <div class="card-body">
+ <h5 class="card-title">Card title</h5>
+ <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ </div>
+ <ul class="list-group list-group-flush">
+ <li class="list-group-item">Cras justo odio</li>
+ <li class="list-group-item">Dapibus ac facilisis in</li>
+ <li class="list-group-item">Vestibulum at eros</li>
+ </ul>
+ <div class="card-body">
+ <a href="#" class="card-link">Card link</a>
+ <a href="#" class="card-link">Another link</a>
+ </div>
+</div>
+# Example
+Header and footer
+ +
+
+
+
+
+
+ Featured
+
+ Special title treatment
+ With supporting text below as a natural lead-in to additional content.
+ Go somewhere
+
+
+
+
+
+
+
+
+
+
+
+
+
+<abp-card style="width: 18rem;">
+ <abp-card-header>Featured</abp-card-header>
+ <abp-card-body>
+<abp-card-title> Special title treatment</abp-card-title>
+<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+<a abp-button="Primary" href="#"> Go somewhere</a>
+ </abp-card-body>
+</abp-card>
+
+<div class="card">
+ <div class="card-header">
+ Featured
+ </div>
+ <div class="card-body">
+ <h5 class="card-title">Special title treatment</h5>
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ <a href="#" class="btn btn-primary">Go somewhere</a>
+ </div>
+</div>
+
+
+
+
+ Quote
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+ +
+
+
+
+
+
+
+
+
+<abp-card>
+ <abp-card-header>Quote</abp-card-header>
+ <abp-card-body>
+<abp-blockquote>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+ <footer>Someone famous in Source Title</footer>
+</abp-blockquote>
+ </abp-card-body>
+</abp-card>
+
+<div class="card">
+ <div class="card-header">
+ Quote
+ </div>
+ <div class="card-body">
+ <blockquote class="blockquote mb-0">
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+ <footer class="blockquote-footer">Someone famous in Source Titl</footer>
+ </blockquote>
+ </div>
+</div>
+
+
-
-
-
-
+ Featured
+
+ Special title treatment
With supporting text below as a natural lead-in to additional content.
- Go somewhere
+ Go somewhere
+ 2 days ago
+
-
+
+
-<abp-card class="text-center"> - <abp-card-header> - <ul class="nav nav-tabs card-header-tabs"> - <li class="nav-item"> - <a class="nav-link active" href="#">Active</a> - </li> - <li class="nav-item"> - <a class="nav-link" href="#link">Link</a> - </li> - <li class="nav-item"> - <a class="nav-link disabled" href="#disabledlink">Disabled</a> - </li> - </ul> - </abp-card-header> - <abp-card-body title="Special title treatment"> - <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text> - <a href="#" class="btn btn-primary">Go somewhere</a> ++ ++ + ++<abp-card class="text-center"> + <abp-card-header>Featured</abp-card-header> + <abp-card-body> +<abp-card-title> Special title treatment</abp-card-title> +<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text> +<a abp-button="Primary" href="#"> Go somewhere</a> </abp-card-body> + <abp-card-footer class="text-muted"> 2 days ago</abp-card-footer> </abp-card> -
+<div class="card text-center">
+ <div class="card-header">
+ Featured
+ </div>
+ <div class="card-body">
+ <h5 class="card-title">Special title treatment</h5>
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ <a href="#" class="btn btn-primary">Go somewhere</a>
+ </div>
+ <div class="card-footer text-muted">
+ 2 days ago
+ </div>
+</div>
++
Card styles
+ +Background and color
-< back \ No newline at end of file +
+
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Carousel.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Carousel.cshtml
index 2ea6fa3f60..d8b0e9d486 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Carousel.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Carousel.cshtml
@@ -10,48 +10,272 @@
}
+@section scripts {
+
+
+
+ Featured
+
+ Special title treatment
+ With supporting text below as a natural lead-in to additional content.
+
+
+
+ Featured
+
+ Special title treatment
+ With supporting text below as a natural lead-in to additional content.
+
+
+
+ Featured
+
+ Special title treatment
+ With supporting text below as a natural lead-in to additional content.
+
+
+
+ Featured
+
+ Special title treatment
+ With supporting text below as a natural lead-in to additional content.
+
+
+
+ Featured
+
+ Special title treatment
+ With supporting text below as a natural lead-in to additional content.
+
+
+
+
+ Featured
+
+ Special title treatment
+ With supporting text below as a natural lead-in to additional content.
+
+
+
+
+ Featured
+
+ Special title treatment
+ With supporting text below as a natural lead-in to additional content.
+
+
+
+
+
+
+
+
+
+
+
+
+
+<abp-card background="Primary" class="mb-3" style="max-width: 18rem;">
+ <abp-card-header>Featured</abp-card-header>
+ <abp-card-body>
+ <abp-card-title> Special title treatment</abp-card-title>
+ <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+ </abp-card-body>
+</abp-card>
+
+<abp-card background="Success" text-color="Danger" border="Dark" class="mb-3" style="max-width: 18rem;">
+ <abp-card-header>Featured</abp-card-header>
+ <abp-card-body>
+ <abp-card-title> Special title treatment</abp-card-title>
+ <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+ </abp-card-body>
+</abp-card>
+
+<abp-card background="Warning" text-color="Secondary" class="mb-3" style="max-width: 18rem;">
+ <abp-card-header>Featured</abp-card-header>
+ <abp-card-body>
+ <abp-card-title> Special title treatment</abp-card-title>
+ <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+ </abp-card-body>
+</abp-card>
+
+<abp-card background="Light" text-color="Dark" border="Success" class="mb-3" style="max-width: 18rem;">
+ <abp-card-header>Featured</abp-card-header>
+ <abp-card-body>
+ <abp-card-title> Special title treatment</abp-card-title>
+ <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+ </abp-card-body>
+</abp-card>
+
+<abp-card background="Dark" text-color="White" border="Danger" class="mb-3" style="max-width: 18rem;">
+ <abp-card-header>Featured</abp-card-header>
+ <abp-card-body>
+ <abp-card-title> Special title treatment</abp-card-title>
+ <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+ </abp-card-body>
+</abp-card>
+
+<abp-card background="Danger" class="mb-3" style="max-width: 18rem;">
+ <abp-card-header text-color="Primary">Featured</abp-card-header>
+ <abp-card-body>
+ <abp-card-title> Special title treatment</abp-card-title>
+ <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+ </abp-card-body>
+</abp-card>
+
+<abp-card background="Info" border="Danger" class="mb-3" style="max-width: 18rem;">
+ <abp-card-header>Featured</abp-card-header>
+ <abp-card-body text-color="Danger">
+ <abp-card-title> Special title treatment</abp-card-title>
+ <abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text>
+ </abp-card-body>
+</abp-card>
+
+<div class="card bg-primary mb-3" style="max-width: 18rem;">
+ <div class="card-header">Featured</div>
+ <div class="card-body">
+ <h5 class="card-title"> Special title treatment</h5>
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ </div>
+</div>
+
+<div class="card text-danger bg-success border-dark mb-3" style="max-width: 18rem;">
+ <div class="card-header">Featured</div>
+ <div class="card-body">
+ <h5 class="card-title"> Special title treatment</h5>
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ </div>
+</div>
+
+<div class="card text-secondary bg-warning mb-3" style="max-width: 18rem;">
+ <div class="card-header">Featured</div>
+ <div class="card-body">
+ <h5 class="card-title"> Special title treatment</h5>
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ </div>
+</div>
+
+<div class="card text-dark bg-light border-success mb-3" style="max-width: 18rem;">
+ <div class="card-header">Featured</div>
+ <div class="card-body">
+ <h5 class="card-title"> Special title treatment</h5>
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ </div>
+</div>
+
+<div class="card text-white bg-dark border-danger mb-3" style="max-width: 18rem;">
+ <div class="card-header">Featured</div>
+ <div class="card-body">
+ <h5 class="card-title"> Special title treatment</h5>
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ </div>
+</div>
+
+<div class="card bg-danger mb-3" style="max-width: 18rem;">
+ <div class="card-header text-primary">Featured</div>
+ <div class="card-body">
+ <h5 class="card-title"> Special title treatment</h5>
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ </div>
+</div>
+
+<div class="card bg-info border-danger mb-3" style="max-width: 18rem;">
+ <div class="card-header">Featured</div>
+ <div class="card-body text-danger">
+ <h5 class="card-title"> Special title treatment</h5>
+ <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ </div>
+</div>
+Carousels
Based on Bootstrap Carousel.
-# Carousel Examples
+Slides only
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<abp-carousel indicators="false" controls="false">
+ <abp-carousel-item src="..."></abp-carousel-item>
+ <abp-carousel-item src="..."></abp-carousel-item>
+ <abp-carousel-item src="..."></abp-carousel-item>
+</abp-carousel>
+
+<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
+ <div class="carousel-inner">
+ <div class="carousel-item active">
+ <img class="d-block w-100" src="..." alt="First slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block w-100" src="..." alt="Second slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block w-100" src="..." alt="Third slide">
+ </div>
+ </div>
+</div>
+With controls
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<abp-carousel indicators="false">
+ <abp-carousel-item src="..."></abp-carousel-item>
+ <abp-carousel-item src="..."></abp-carousel-item>
+ <abp-carousel-item src="..."></abp-carousel-item>
+</abp-carousel>
+
+<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
+ <div class="carousel-inner">
+ <div class="carousel-item active">
+ <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+ </div>
+ </div>
+ <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="sr-only">Previous</span>
+ </a>
+ <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="sr-only">Next</span>
+ </a>
+</div>
+With indicators
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<abp-carousel>
+ <abp-carousel-item src="..."></abp-carousel-item>
+ <abp-carousel-item src="..."></abp-carousel-item>
+ <abp-carousel-item src="..."></abp-carousel-item>
+</abp-carousel>
+
+<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+ <ol class="carousel-indicators">
+ <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+ <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+ <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+ </ol>
+ <div class="carousel-inner">
+ <div class="carousel-item active">
+ <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
+ </div>
+ </div>
+ <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="sr-only">Previous</span>
+ </a>
+ <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="sr-only">Next</span>
+ </a>
+</div>
+With captions
+
-
-
+
+
++ ++ + +<abp-carousel> - <abp-carousel-item src="..." alt="Carousel Item 1" caption="Caption" caption-title="title"></abp-carousel-item> - <abp-carousel-item src="..." alt="Carousel Item 2" caption="Caption2" caption-title="title2"></abp-carousel-item> - <abp-carousel-item src="..." alt="Carousel Item 3" caption="Caption3" caption-title="title3"></abp-carousel-item> + <abp-carousel-item caption-title="Second slide label" caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit." src="..."></abp-carousel-item> </abp-carousel> -
+<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+ <ol class="carousel-indicators">
+ <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+ <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+ <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+ </ol>
+ <div class="carousel-inner">
+ <div class="carousel-item active">
+ <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
+ <div class="carousel-caption d-none d-md-block">
+ <h5>Second slide label</h5>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+ </div>
+ </div>
+ </div>
+ <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="sr-only">Previous</span>
+ </a>
+ <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="sr-only">Next</span>
+ </a>
+</div>
+# Carousel Examples
+ +Crossfade
-
-
+
-
+
+
--<abp-carousel controls="true" indicators="false" crossfade="true"> - <abp-carousel-item src="..." alt="Carousel Item 1"></abp-carousel-item> - <abp-carousel-item src="..." alt="Carousel Item 2" caption="Caption2" caption-title="title2"></abp-carousel-item> - <abp-carousel-item src="..." alt="Carousel Item 3"></abp-carousel-item> ++ ++ + ++<abp-carousel indicators="false" crossfade="true"> + <abp-carousel-item src="..."></abp-carousel-item> + <abp-carousel-item src="..."></abp-carousel-item> + <abp-carousel-item src="..."></abp-carousel-item> </abp-carousel> -
+<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
+ <div class="carousel-inner">
+ <div class="carousel-item active">
+ <img class="d-block w-100" src="..." alt="First slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block w-100" src="...e" alt="Second slide">
+ </div>
+ <div class="carousel-item">
+ <img class="d-block w-100" src="..." alt="Third slide">
+ </div>
+ </div>
+ <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="sr-only">Previous</span>
+ </a>
+ <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="sr-only">Next</span>
+ </a>
+</div>
+Collapse
Based on Bootstrap Collapse.
-# Accordion Example
+ +Example
-
-
- 1Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry rtat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-
-
- 2Anim pariatur cliche reprehenderit,, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-
-
- 3Anim pariatur wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-
-
+ Link with href
+
+ 3Anim pariatur wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
-
+
+
+
+
+
-<abp-accordion> - <abp-accordion-item title="header1"> - 1Anim pariatur cliche reprehenderit, enim eiusmod high life acc - </abp-accordion-item> - <abp-accordion-item title="header2"> - 2Anim pariatur cliche reprehenderit,, enim eiusmod high life - </abp-accordion-item> - <abp-accordion-item title="header3"> - 3Anim pariatur wolf moon tempor,,, sunt aliqua put a bird on i - </abp-accordion-item> -</abp-accordion> -+
+<abp-button button-type="Primary" abp-collapse-id="collapseExample" text="Button with data-target" />
+<a abp-button="Primary" abp-collapse-id="collapseExample"> Link with href </a>
+
+<abp-collapse-body id="collapseExample">
+ ...
+</abp-collapse-body>
+
+<p>
+ <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
+ Link with href
+ </a>
+ <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
+ Button with data-target
+ </button>
+</p>
+<div class="collapse" id="collapseExample">
+ <div class="card card-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+ </div>
+</div>
+# Collapse With Button Example
+Multiple targets
-
- 3Anim pariatur wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-
+ Toggle first element
+
+
+
+ 3Anim pariatur wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
+
+ 3Anim pariatur wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
-
-
+++ + ++ + +++ +<a abp-button="Primary" abp-collapse-id="FirstCollapseExample"> Toggle first element </a> +<abp-button button-type="Primary" abp-collapse-id="SecondCollapseExample" text="Toggle second element" /> +<abp-button button-type="Primary" abp-collapse-id="FirstCollapseExample SecondCollapseExample" text="Toggle both elements" /> + +<abp-row class="mt-3"> + <abp-column size-sm="_6"> + <abp-collapse-body id="FirstCollapseExample" multi="true"> + 3Anim pariatur wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + </abp-collapse-body> + </abp-column> + <abp-column size-sm="_6"> + <abp-collapse-body id="SecondCollapseExample" multi="true"> + 3Anim pariatur wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. + </abp-collapse-body> + </abp-column> +</abp-row> ++ +<div class="row"> + <div class="col"> + <div class="collapse multi-collapse" id="multiCollapseExample1"> + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. + </div> + </div> + <div class="col"> + <div class="collapse multi-collapse" id="multiCollapseExample2"> + Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. + </div> + </div> +</div> +<p> - <abp-collapse-button buton-type="Success" body-id="collapseExample"> - Toggle - </abp-collapse-button> + <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a> + <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button> + <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button> </p> - -<abp-collapse-body id="collapseExample" show="true"> - 3Anim pariatur wolf moon tempor,,, sunt aliqua put a bir -</abp-collapse-body> -
Accordion example
+ +
+
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Dropdowns.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Dropdowns.cshtml
index 7604f18abc..4a8ddba9d6 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Dropdowns.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Dropdowns.cshtml
@@ -10,111 +10,750 @@
}
+@section scripts {
+
+
+
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry rtat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+ Anim pariatur cliche reprehenderit,, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+ Anim pariatur wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+
+
+
+
+
+
+
+
+
+
+
+<abp-accordion>
+ <abp-accordion-item title="Collapsible Group Item #1">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry rtat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+ </abp-accordion-item>
+ <abp-accordion-item title="Collapsible Group Item #2">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+ </abp-accordion-item>
+ <abp-accordion-item title="Collapsible Group Item #3">
+ Anim pariatur wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+ </abp-accordion-item>
+</abp-accordion>
+
+<div class="accordion" id="accordionExample">
+ <div class="card">
+ <div class="card-header" id="headingOne">
+ <h5 class="mb-0">
+ <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+ Collapsible Group Item #1
+ </button>
+ </h5>
+ </div>
+
+ <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
+ <div class="card-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+ </div>
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-header" id="headingTwo">
+ <h5 class="mb-0">
+ <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+ Collapsible Group Item #2
+ </button>
+ </h5>
+ </div>
+ <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
+ <div class="card-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+ </div>
+ </div>
+ </div>
+ <div class="card">
+ <div class="card-header" id="headingThree">
+ <h5 class="mb-0">
+ <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+ Collapsible Group Item #3
+ </button>
+ </h5>
+ </div>
+ <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
+ <div class="card-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+ </div>
+ </div>
+ </div>
+</div>
+Dropdowns
Based on Bootstrap button.
-# Dropdown Example
+Single button
+ +
+
+
+
+
+
+
+ Action
+ Another action
+ Something else here
+
+
+
+
+
+
+
+
+
+
+
+
+<abp-dropdown>
+ <abp-dropdown-button text="Dropdown button" />
+ <abp-dropdown-menu>
+<abp-dropdown-item href="#">Action</abp-dropdown-item>
+<abp-dropdown-item href="#">Another action</abp-dropdown-item>
+<abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+ </abp-dropdown-menu>
+</abp-dropdown>
+
+<div class="dropdown">
+ <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown button
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ </div>
+</div>
+
+
+
+
+
+ Action
+ Another action
+ Something else here
+
+
+
+
+
+
+
+
+
+
+
+
+<abp-dropdown>
+ <abp-dropdown-button button-type="Secondary" link="true" text="Dropdown button" />
+ <abp-dropdown-menu>
+<abp-dropdown-item href="#">Action</abp-dropdown-item>
+<abp-dropdown-item href="#">Another action</abp-dropdown-item>
+<abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+ </abp-dropdown-menu>
+</abp-dropdown>
+
+<div class="dropdown">
+ <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown link
+ </a>
+
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ </div>
+</div>
+
-
+
+
++ ++ + ++<!-- Example single danger button --> + <abp-dropdown> - <abp-dropdown-button button-type="Primary" text="Dropdown"/> - <abp-dropdown-menu> - <abp-dropdown-header>Dropdown header</abp-dropdown-header> - <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item> - <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item> - <abp-dropdown-item href="#">Something else here</abp-dropdown-item> - <abp-dropdown-divider/> - <abp-dropdown-item href="#">Separated link</abp-dropdown-item> + <abp-dropdown-button button-type="Danger" text="Dropdown button" /> + <abp-dropdown-menu> +<abp-dropdown-item href="#">Action</abp-dropdown-item> +<abp-dropdown-item href="#">Another action</abp-dropdown-item> +<abp-dropdown-item href="#">Something else here</abp-dropdown-item> +<abp-dropdown-divider /> +<abp-dropdown-item href="#">Separated link</abp-dropdown-item> </abp-dropdown-menu> </abp-dropdown> -
+<!-- Example single danger button -->
+
+<div class="btn-group">
+ <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Action
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+</div>
+# Split Dropdown Example
+Split button
-
-
+
- Dropdown header
- Action
- Another disabled action
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ Action
+ Another action
Something else here
Separated link
-
-
+
+
-<abp-dropdown direction="Right"> - <abp-dropdown-button dropdown-style="Split" button-type="Danger" text="Dropdown"/> - <abp-dropdown-menu> - <abp-dropdown-header>Dropdown header</abp-dropdown-header> - <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item> - <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item> - <abp-dropdown-item href="#">Something else here</abp-dropdown-item> - <abp-dropdown-divider/> - <abp-dropdown-item href="#">Separated link</abp-dropdown-item> ++ ++ + ++<!-- Example single danger button --> + +<abp-dropdown> + <abp-dropdown-button button-type="Danger" dropdown-style="Split" text="Dropdown button" /> + <abp-dropdown-menu> +<abp-dropdown-item href="#">Action</abp-dropdown-item> +<abp-dropdown-item href="#">Another action</abp-dropdown-item> +<abp-dropdown-item href="#">Something else here</abp-dropdown-item> +<abp-dropdown-divider /> +<abp-dropdown-item href="#">Separated link</abp-dropdown-item> </abp-dropdown-menu> </abp-dropdown> -
+<!-- Example single danger button -->
+
+<div class="btn-group">
+ <button type="button" class="btn btn-danger">Action</button>
+ <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <div class="dropdown-menu">
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item" href="#">Another action</a>
+ <a class="dropdown-item" href="#">Something else here</a>
+ <div class="dropdown-divider"></div>
+ <a class="dropdown-item" href="#">Separated link</a>
+ </div>
+</div>
+# Link Dropdown Example
+ +Split button
-
-
- Dropdown header
- Action
- Another disabled action
+
+
+ Action
+ Another action
Something else here
Separated link
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+ Action
+ Another action
+ Something else here
+ Separated link
+
+
+
+
+
+
+
+
+
+
+
+
+<!-- Example single danger button -->
+
+<abp-dropdown>
+ <abp-dropdown-button size="Large" button-type="Secondary" text="Large button" />
+ <abp-dropdown-menu>
+ ...
+ </abp-dropdown-menu>
+</abp-dropdown>
+<abp-dropdown>
+ <abp-dropdown-button size="Large" button-type="Secondary" dropdown-style="Split" text="Large split button" />
+ <abp-dropdown-menu>
+ ...
+ </abp-dropdown-menu>
+</abp-dropdown>
+<abp-dropdown>
+ <abp-dropdown-button size="Small" button-type="Secondary" text="Small button" />
+ <abp-dropdown-menu>
+ ...
+ </abp-dropdown-menu>
+</abp-dropdown>
+<abp-dropdown>
+ <abp-dropdown-button size="Small" button-type="Secondary" dropdown-style="Split" text="Small split button" />
+ <abp-dropdown-menu>
+ ...
+ </abp-dropdown-menu>
+</abp-dropdown>
+
+<!-- Large button groups (default and split) -->
+<div class="btn-group">
+ <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Large button
+ </button>
+ <div class="dropdown-menu">
+ ...
+ </div>
+</div>
+<div class="btn-group">
+ <button class="btn btn-secondary btn-lg" type="button">
+ Large split button
+ </button>
+ <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <div class="dropdown-menu">
+ ...
+ </div>
+</div>
+<!-- Small button groups (default and split) -->
+<div class="btn-group">
+ <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Small button
+ </button>
+ <div class="dropdown-menu">
+ ...
+ </div>
+</div>
+<div class="btn-group">
+ <button class="btn btn-secondary btn-sm" type="button">
+ Small split button
+ </button>
+ <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ <span class="sr-only">Toggle Dropdown</span>
+ </button>
+ <div class="dropdown-menu">
+ ...
+ </div>
+</div>
+Directions
+ +
+
+
+
+
+
+
+ Action
+ Another action
+ Something else here
+
+
+
+
+ Action
+ Another action
+ Something else here
+
+
+
+
+ Action
+ Another action
+ Something else here
+
+
-
+++ ++ ++<abp-dropdown direction="Up"> - <abp-dropdown-button Link="true" button-type="Primary" text="Dropdown"/> - <abp-dropdown-menu align="Right"> - <abp-dropdown-header>Dropdown header</abp-dropdown-header> - <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item> - <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item> - <abp-dropdown-item href="#">Something else here</abp-dropdown-item> - <abp-dropdown-divider/> - <abp-dropdown-item href="#">Separated link</abp-dropdown-item> + <abp-dropdown-button button-type="Secondary" text="Dropup" /> + <abp-dropdown-menu> + ... + </abp-dropdown-menu> +</abp-dropdown> +<abp-dropdown direction="Right"> + <abp-dropdown-button button-type="Secondary" text="dropright" /> + <abp-dropdown-menu> + ... + </abp-dropdown-menu> +</abp-dropdown> +<abp-dropdown direction="Right"> + <abp-dropdown-button button-type="Secondary" dropdown-style="Split" text="Split right" /> + <abp-dropdown-menu> + ... + </abp-dropdown-menu> +</abp-dropdown> ++ +++<div class="btn-group dropup"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + Dropup + </button> + <div class="dropdown-menu"> + <!-- Dropdown menu links --> + </div> +</div> +<div class="btn-group dropright"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + dropright + </button> + <div class="dropdown-menu"> + <!-- Dropdown menu links --> + </div> +</div> +<div class="btn-group dropright"> + <button type="button" class="btn btn-danger">Action</button> + <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + <span class="sr-only">Split right</span> + </button> + <div class="dropdown-menu"> + <!-- Dropdown menu links --> + </div> +</div> +
Menu Items
+ +
+
+
+
+
+
+
+ Dropdown Header
+ Action
+ Active action
+ Disabled action
+ Dropdown Item Text
+ Something else here
+
+
+
+
+
+
+
+
+
+
+
+
+<abp-dropdown>
+ <abp-dropdown-button button-type="Secondary" text="Dropdown"/>
+ <abp-dropdown-menu>
+ <abp-dropdown-header>Dropdown Header</abp-dropdown-header>
+ <abp-dropdown-item href="#">Action</abp-dropdown-item>
+ <abp-dropdown-item active="true" href="#">Active action</abp-dropdown-item>
+ <abp-dropdown-item disabled="true" href="#">Disabled action</abp-dropdown-item>
+ <abp-dropdown-divider/>
+ <abp-dropdown-item-text>Dropdown Item Text</abp-dropdown-item-text>
+ <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
+ </abp-dropdown-menu>
+</abp-dropdown>
+
+<div class="dropdown">
+ <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown button
+ </button>
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+ <h6 class="dropdown-header">Dropdown Header</h6>
+ <a class="dropdown-item" href="#">Action</a>
+ <a class="dropdown-item active" href="#">Active action</a>
+ <a class="dropdown-item disabled" href="#">Disabled action</a>
+ <div class="dropdown-divider"></div>
+ <span class="dropdown-item-text">Dropdown item text</span>
+ <a class="dropdown-item" href="#">Something else here</a>
+ </div>
+</div>
+Menu alignment
+ +
+
+
+
+
+
+ Action
+ Active action
+ Disabled action
+
+
+
+
+
+
+
+
+
+
+<abp-dropdown>
+ <abp-dropdown-button button-type="Secondary" text="Right-aligned"/>
+ <abp-dropdown-menu align="Right">
+ <abp-dropdown-item href="#">Action</abp-dropdown-item>
+ <abp-dropdown-item active="true" href="#">Active action</abp-dropdown-item>
+ <abp-dropdown-item disabled="true" href="#">Disabled action</abp-dropdown-item>
</abp-dropdown-menu>
</abp-dropdown>
-
+<div class="btn-group">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Right-aligned
+ </button>
+ <div class="dropdown-menu dropdown-menu-right">
+ <button class="dropdown-item" type="button">Action</button>
+ <button class="dropdown-item" type="button">Another action</button>
+ <button class="dropdown-item" type="button">Something else here</button>
+ </div>
+</div>
+Custom Content
+ +
+
+
+
+
+
+
+
+
+ + Some example text that's free-flowing within the dropdown menu. +
++ And this is more example text. +
+
+
+
+
+
+
+
+
+
+<abp-dropdown>
+ <abp-dropdown-button button-type="Secondary" text="Dropdown With Only Text" />
+ <abp-dropdown-menu class="p-4" style="max-width: 200px;">
+ <p>
+ Some example text that's free-flowing within the dropdown menu.
+ </p>
+ <p class="mb-0">
+ And this is more example text.
+ </p>
+ </abp-dropdown-menu>
+</abp-dropdown>
+
+<div class="btn-group">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown With Only Text
+ </button>
+ <div class="dropdown-menu p-4" style="max-width: 200px;">
+ <p>
+ Some example text that's free-flowing within the dropdown menu.
+ </p>
+ <p class="mb-0">
+ And this is more example text.
+ </p>
+ </div>
+</div>
+
+
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Dropdowns.cshtml.cs b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Dropdowns.cshtml.cs
index ab95ad6e60..1b1cf6c4f2 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Dropdowns.cshtml.cs
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Dropdowns.cshtml.cs
@@ -1,5 +1,6 @@
using System;
using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
@@ -9,6 +10,20 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
{
public class DropdownsModel : PageModel
{
+ [Required]
+ [DataType(DataType.EmailAddress)]
+ [Display(Name = "Email Address")]
+ public string EmailAddress { get; set; }
+
+ [Required]
+ [DataType(DataType.Password)]
+ [Display(Name = "Password")]
+ public string Password{ get; set; }
+
+ [Display(Name = "Remember Me")]
+ public bool RememberMe{ get; set; }
+
+
public void OnGet()
{
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml
index b259d071ca..7e710d1956 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/DynamicForms.cshtml
@@ -12,166 +12,446 @@
}
+@section scripts {
+
+
+
+
+ New around here? Sign up
+ Forgot password?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ public class DropdownsModel : PageModel
+ {
+ [Required]
+ [DataType(DataType.EmailAddress)]
+ [Display(Name = "Email Address")]
+ public string EmailAddress { get; set; }
+
+ [Required]
+ [DataType(DataType.Password)]
+ [Display(Name = "Password")]
+ public string Password{ get; set; }
+
+ [Display(Name = "Remember Me")]
+ public bool RememberMe{ get; set; }
+
+
+ public void OnGet()
+ {
+
+ }
+ }
+
+<abp-dropdown >
+ <abp-dropdown-button button-type="Secondary" text="Dropdown With Form"/>
+ <abp-dropdown-menu>
+ <form class="px-4 py-3">
+ <abp-input asp-for="EmailAddress"></abp-input>
+ <abp-input asp-for="Password"></abp-input>
+ <abp-input asp-for="RememberMe"></abp-input>
+ <abp-button button-type="Primary" text="Sign In" type="submit" />
+ </form>
+ <abp-dropdown-divider></abp-dropdown-divider>
+ <abp-dropdown-item href="#">New around here? Sign up</abp-dropdown-item>
+ <abp-dropdown-item href="#">Forgot password?</abp-dropdown-item>
+ </abp-dropdown-menu>
+</abp-dropdown>
+
+<div class="btn-group">
+ <button class="dropdown-toggle btn btn-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button" data-busy-text="Processing..."><span>Dropdown With Form</span></button>
+ <div></div>
+ <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);">
+ <form class="px-4 py-3" novalidate="novalidate">
+ <div class="form-group">
+ <label for="EmailAddress">Email Address</label>
+ <input type="email" data-val="true" data-val-required="The Email Address field is required." id="EmailAddress" name="EmailAddress" value="" class="form-control input-validation-error" aria-describedby="EmailAddress-error">
+ <span class="text-danger field-validation-error" data-valmsg-for="EmailAddress" data-valmsg-replace="true"><span id="EmailAddress-error" class="">The Email Address field is required.</span></span>
+ </div>
+ <div class="form-group">
+ <label for="Password">Password</label>
+ <input type="password" data-val="true" data-val-required="The Password field is required." id="Password" name="Password" class="form-control input-validation-error" aria-describedby="Password-error">
+ <span class="text-danger field-validation-error" data-valmsg-for="Password" data-valmsg-replace="true"><span id="Password-error" class="">The Password field is required.</span></span>
+ </div>
+ <div class="form-check">
+ <input type="checkbox" data-val="true" data-val-required="The Remember Me field is required." id="RememberMe" name="RememberMe" value="true" class="form-check-input valid" aria-describedby="RememberMe-error">
+ <label class="form-check-label" for="RememberMe">Remember Me</label>
+ </div>
+ <button type="submit" class="btn btn-primary" data-busy-text="Processing..."><span>Sign In</span></button>
+ <input name="RememberMe" type="hidden" value="false">
+ </form>
+ <div class="dropdown-divider"></div>
+ <a href="#" class="dropdown-item">New around here? Sign up</a>
+ <a href="#" class="dropdown-item">Forgot password?</a>
+ </div>
+</div>
+Dynamic Forms
-# Dynamic Form Example
+Dynamic Form Example
-
-
-
Posted Values:
-
- Name: @Model.PersonInput.Name
- City: @Model.PersonInput.City
- Phone.Name: @Model.PersonInput.Phone.Name
- Phone.Number: @Model.PersonInput.Phone.Number
- Day: @Model.PersonInput.Day.ToString("yyyy-MM-dd")
- Country: @Model.PersonInput.Country
- IsActive: @Model.PersonInput.IsActive
-
+ - City: @Model.PersonInput.City
- Phone.Name: @Model.PersonInput.Phone.Name
- Phone.Number: @Model.PersonInput.Phone.Number
- Day: @Model.PersonInput.Day.ToString("yyyy-MM-dd")
- Country: @Model.PersonInput.Country
- IsActive: @Model.PersonInput.IsActive
-
-
--<abp-dynamic-form abp-model="Model.PersonInput"/> --
+public class DynamicFormsModel : PageModel
+ {
+ [BindProperty]
+ public DetailedModel MyDetailedModel { get; set; }
-# Override an input Example
+ public List<SelectListItem> CountryList { get; set; } = new List<SelectListItem>
+ {
+ new SelectListItem { Value = "CA", Text = "Canada"},
+ new SelectListItem { Value = "US", Text = "USA"},
+ new SelectListItem { Value = "UK", Text = "United Kingdom"},
+ new SelectListItem { Value = "RU", Text = "Russia"}
+ };
-
-
-
-
-
- Posted Values:
-
- Name: @Model.PersonInput.Name
- Surname: @Model.PersonInput.Surname
- City: @Model.PersonInput.City
- Phone.Name: @Model.PersonInput.Phone.Name
- Phone.Number: @Model.PersonInput.Phone.Number
- Day: @Model.PersonInput.Day.ToString("yyyy-MM-dd")
- Country: @Model.PersonInput.Country
- IsActive: @Model.PersonInput.IsActive
-
-
-
-
-<abp-dynamic-form abp-model="Model.PersonInput">
- <abp-input asp-for="Model.PersonInput.Name" label="Overrided name" />
- <abp-input asp-for="Model.PersonInput.Phone.Number" label="Overrided number" />
- <abp-button button-type="Primary" type="submit" text="submit" />
-</abp-dynamic-form>
-
+ public void OnGet()
+ {
+ MyDetailedModel = new DetailedModel
+ {
+ Name = "",
+ Description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+ IsActive = true,
+ Age = 65,
+ Day = DateTime.Now,
+ MyCarType = CarType.Coupe,
+ YourCarType = CarType.Sedan,
+ Country = "RU",
+ NeighborCountries = new List<string>() { "UK", "CA" }
+ };
+ }
+
+ public class DetailedModel
+ {
+ [Required]
+ [Placeholder("Enter your name...")]
+ [Display(Name = "Name")]
+ public string Name { get; set; }
+
+ [TextArea(Rows = 4)]
+ [Display(Name = "Description")]
+ [InputInfoText("Describe Yourself")]
+ public string Description { get; set; }
+
+ [Required]
+ [DataType(DataType.Password)]
+ [Display(Name = "Password")]
+ public string Password { get; set; }
+
+ [Display(Name = "Is Active")]
+ public bool IsActive { get; set; }
+
+ [Required]
+ [Display(Name = "Age")]
+ public int Age { get; set; }
+
+ [Required]
+ [Display(Name = "My Car Type")]
+ public CarType MyCarType { get; set; }
+
+ [Required]
+ [AbpRadioButton(Inline = true)]
+ [Display(Name = "Your Car Type")]
+ public CarType YourCarType { get; set; }
+
+ [DataType(DataType.Date)]
+ [Display(Name = "Day")]
+ public DateTime Day { get; set; }
+
+ [SelectItems(nameof(CountryList))]
+ [Display(Name = "Country")]
+ public string Country { get; set; }
+
+ [SelectItems(nameof(CountryList))]
+ [Display(Name = "Neighbor Countries")]
+ public List<string> NeighborCountries { get; set; }
+ }
+
+ public enum CarType
+ {
+ Sedan,
+ Hatchback,
+ StationWagon,
+ Coupe
+ }
+ }
+
+
+
+
+<abp-dynamic-form abp-model="@@Model.MyDetailedModel" submit-button="true" />
+
+
+
+
+<form method="post" novalidate="novalidate">
+ <div class="form-group">
+ <label for="MyDetailedModel_Name">Name</label>
+ <input type="text" data-val="true" data-val-required="The Name field is required." id="MyDetailedModel_Name" name="MyDetailedModel.Name" value="" class="form-control " placeholder="Enter your name...">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyDetailedModel.Name" data-valmsg-replace="true"></span>
+ </div>
+ <div class="form-group">
+ <label for="MyDetailedModel_Description">Description</label>
+ <textarea id="MyDetailedModel_Description" name="MyDetailedModel.Description" rows="4" class="form-control ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyDetailedModel.Description" data-valmsg-replace="true"></span>
+ </div>
+ <div class="form-group">
+ <label for="MyDetailedModel_Password">Password</label>
+ <input type="password" data-val="true" data-val-required="The Password field is required." id="MyDetailedModel_Password" name="MyDetailedModel.Password" class="form-control ">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyDetailedModel.Password" data-valmsg-replace="true"></span>
+ </div>
+ <div class="form-check">
+ <input type="checkbox" checked="checked" data-val="true" data-val-required="The Is Active field is required." id="MyDetailedModel_IsActive" name="MyDetailedModel.IsActive" value="true" class="form-check-input "><input name="MyDetailedModel.IsActive" type="hidden" value="false">
+ <label class="form-check-label" for="MyDetailedModel_IsActive">Is Active</label>
+ </div>
+ <div class="form-group">
+ <label for="MyDetailedModel_Age">Age</label>
+ <input type="number" data-val="true" data-val-required="The Age field is required." id="MyDetailedModel_Age" name="MyDetailedModel.Age" value="65" class="form-control ">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyDetailedModel.Age" data-valmsg-replace="true"></span>
+ </div>
+ <div class="form-group">
+ <label for="MyDetailedModel_MyCarType">My Car Type</label>
+ <select data-val="true" data-val-required="The My Car Type field is required." id="MyDetailedModel_MyCarType" name="MyDetailedModel.MyCarType" class="form-control valid" aria-describedby="MyDetailedModel_MyCarType-error" aria-invalid="false">
+ <option value="0">Sedan</option>
+ <option value="1">Hatchback</option>
+ <option value="2">StationWagon</option>
+ <option selected="selected" value="3">Coupe</option>
+ </select>
+ </div>
+ <div class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="MyDetailedModel.YourCarTypeRadio0" name="MyDetailedModel.YourCarType" value="0" checked="checked" class="custom-control-input">
+ <label class="custom-control-label" for="MyDetailedModel.YourCarTypeRadio0">Sedan</label>
+ </div>
+ <div class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="MyDetailedModel.YourCarTypeRadio1" name="MyDetailedModel.YourCarType" value="1" class="custom-control-input">
+ <label class="custom-control-label" for="MyDetailedModel.YourCarTypeRadio1">Hatchback</label>
+ </div>
+ <div class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="MyDetailedModel.YourCarTypeRadio2" name="MyDetailedModel.YourCarType" value="2" class="custom-control-input">
+ <label class="custom-control-label" for="MyDetailedModel.YourCarTypeRadio2">StationWagon</label>
+ </div>
+ <div class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="MyDetailedModel.YourCarTypeRadio3" name="MyDetailedModel.YourCarType" value="3" class="custom-control-input">
+ <label class="custom-control-label" for="MyDetailedModel.YourCarTypeRadio3">Coupe</label>
+ </div>
+ <div class="form-group">
+ <label for="MyDetailedModel_Day">Day</label>
+ <input type="date" data-val="true" data-val-required="The Day field is required." id="MyDetailedModel_Day" name="MyDetailedModel.Day" value="2018-12-19" class="form-control ">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyDetailedModel.Day" data-valmsg-replace="true"></span>
+ </div>
+ <div class="form-group">
+ <label for="MyDetailedModel_Country">Country</label>
+ <select id="MyDetailedModel_Country" name="MyDetailedModel.Country" class="form-control">
+ <option value="CA">Canada</option>
+ <option value="US">USA</option>
+ <option value="UK">United Kingdom</option>
+ <option selected="selected" value="RU">Russia</option>
+ </select>
+ </div>
+ <div class="form-group">
+ <label for="MyDetailedModel_NeighborCountries">Neighbor Countries</label>
+ <select id="MyDetailedModel_NeighborCountries" multiple="multiple" name="MyDetailedModel.NeighborCountries" class="form-control">
+ <option selected="selected" value="CA">Canada</option>
+ <option value="US">USA</option>
+ <option selected="selected" value="UK">United Kingdom</option>
+ <option value="RU">Russia</option>
+ </select>
+ </div>
+ <input name="__RequestVerificationToken" type="hidden" value="CfDJ8Kbwu8pRBWJCh6KUtTDoAuTDS8evmWgc2dNZYWkzjZ1xFcA9ptyCgQBCTgA9NMoh_FXGRBDVunA7fx0TF1df1_OxaxerJvuWRCwFBhy8KbPcgXrVtmtSp6Z28gpFpO0Z1TSO1pdgdTwEXj43DBWq0Hc">
+ <button type="submit" class="btn btn-primary" data-busy-text="Processing..."><span>Submit</span></button>
+</form>
+
+
+
-# Form with Button Example
+Order Attribute Example
-
- Posted Values:
-
- Name: @Model.PersonInput.Name
- Surname: @Model.PersonInput.Surname
- City: @Model.PersonInput.City
- Phone.Name: @Model.PersonInput.Phone.Name
- Phone.Number: @Model.PersonInput.Phone.Number
- Day: @Model.PersonInput.Day.ToString("yyyy-MM-dd")
- Country: @Model.PersonInput.Country
- IsActive: @Model.PersonInput.IsActive
-
+
-<abp-dynamic-form abp-model="Model.PersonInput" submit-button="true"/>
-
+
+
+
+public class DynamicFormsModel : PageModel
+ {
+ public OrderExampleModel MyOrderExampleModel { get; set; }
+
+ public void OnGet()
+ {
+ MyOrderExampleModel = new OrderExampleModel();
+ }
+
+ public class OrderExampleModel
+ {
+ [DisplayOrder(10005)]
+ public string Surname{ get; set; }
+
+ //Default 10000
+ public string EmailAddress { get; set; }
+
+ [DisplayOrder(10003)]
+ public string Name { get; set; }
+
+ [DisplayOrder(9999)]
+ public string City { get; set; }
+ }
+ }
+
+
+
+
+ <abp-dynamic-form abp-model="Model.MyOrderExampleModel"/>
+
+
+
+
+<form method="post">
+ <div class="form-group">
+ <label for="MyOrderExampleModel_City">City</label>
+ <input type="text" id="MyOrderExampleModel_City" name="MyOrderExampleModel.City" value="" class="form-control ">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyOrderExampleModel.City" data-valmsg-replace="true"></span>
+ </div>
+ <div class="form-group">
+ <label for="MyOrderExampleModel_EmailAddress">EmailAddress</label>
+ <input type="text" id="MyOrderExampleModel_EmailAddress" name="MyOrderExampleModel.EmailAddress" value="" class="form-control ">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyOrderExampleModel.EmailAddress" data-valmsg-replace="true"></span>
+ </div>
+ <div class="form-group">
+ <label for="MyOrderExampleModel_Name">Name</label>
+ <input type="text" id="MyOrderExampleModel_Name" name="MyOrderExampleModel.Name" value="" class="form-control ">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyOrderExampleModel.Name" data-valmsg-replace="true"></span>
+ </div>
+ <div class="form-group">
+ <label for="MyOrderExampleModel_Surname">Surname</label>
+ <input type="text" id="MyOrderExampleModel_Surname" name="MyOrderExampleModel.Surname" value="" class="form-control ">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyOrderExampleModel.Surname" data-valmsg-replace="true"></span>
+ </div>
+ <input name="__RequestVerificationToken" type="hidden" value="CfDJ8Kbwu8pRBWJCh6KUtTDoAuQICDXiCEgWpOHc7uIzSQ2dKiezdDkWplt2D8XLsCX39Z8B_GnplHrAfZgZ5GkNZN-tkEgKlMtyjoWv9MADyYb2MmWw-LuW8wfUXI9YSza5lo_8P03Vff4NxmrV3boG0xQ">
+</form>
+
+
+
-# Non-dynamic Form
+Attribute Examples
-
-
- Posted Values:
-
- Name: @Model.PersonInput.Name
- Surname: @Model.PersonInput.Surname
- Age: @Model.PersonInput.Age
- Is Active: @Model.PersonInput.IsActive
- Day: @Model.PersonInput.Day
- City: @Model.PersonInput.City
- Country: @Model.PersonInput.Country
- Phone.Number: @Model.PersonInput.Phone.Number
- Phone.Name: @Model.PersonInput.Phone.Name
-
+
+
+
+
+public class DynamicFormsModel : PageModel
+ {
+ public AttributeExamplesModel MyAttributeExamplesModel { get; set; }
+
+ public void OnGet()
+ {
+ MyAttributeExamplesModel = new AttributeExamplesModel();
+ MyAttributeExamplesModel.DisabledInput = "Disabled Input";
+ MyAttributeExamplesModel.ReadonlyInput = "Readonly Input";
+ MyAttributeExamplesModel.ReadonlyPlainTextInput = "Readonly Plain Text Input";
+ MyAttributeExamplesModel.LargeInput = "Large Input";
+ MyAttributeExamplesModel.SmallInput = "Small Input";
+ }
+
+ public class AttributeExamplesModel
+ {
+ [HiddenInput]
+ public string HiddenInput { get; set; }
+
+ [DisabledInput]
+ public string DisabledInput{ get; set; }
+
+ [ReadOnlyInput]
+ public string ReadonlyInput { get; set; }
+
+ [ReadOnlyInput(PlainText = true)]
+ public string ReadonlyPlainTextInput { get; set; }
+
+ [FormControlSize(AbpFormControlSize.Large)]
+ public string LargeInput { get; set; }
+
+ [FormControlSize(AbpFormControlSize.Small)]
+ public string SmallInput { get; set; }
+ }
+ }
+
+
+
+
+ <abp-dynamic-form abp-model="Model.MyAttributeExamplesModel"/>
+
+
+
+
<form method="post">
- <abp-input asp-for="Model.PersonInput.Name" />
- <abp-input asp-for="Model.PersonInput.Surname" />
- <abp-input asp-for="Model.PersonInput.Age" />
- <abp-input asp-for="Model.PersonInput.IsActive" />
- <abp-input asp-for="Model.PersonInput.Day" />
- <abp-select asp-for="Model.PersonInput.City" />
- <abp-select asp-for="Model.PersonInput.Country" />
- <abp-input asp-for="Model.PersonInput.Phone.Number" />
- <abp-input asp-for="Model.PersonInput.Phone.Name" />
- <abp-button type="submit" button-type="Primary" text="Submit" />
+ <div class="form-group">
+ <input type="hidden" id="MyAttributeExamplesModel_HiddenInput" name="MyAttributeExamplesModel.HiddenInput" value="" class="form-control ">
+ </div>
+ <div class="form-group">
+ <label for="MyAttributeExamplesModel_DisabledInput">DisabledInput</label>
+ <input type="text" id="MyAttributeExamplesModel_DisabledInput" name="MyAttributeExamplesModel.DisabledInput" value="Disabled Input" disabled="" class="form-control ">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyAttributeExamplesModel.DisabledInput" data-valmsg-replace="true"></span>
+ </div>
+ <div class="form-group">
+ <label for="MyAttributeExamplesModel_ReadonlyInput">ReadonlyInput</label>
+ <input type="text" id="MyAttributeExamplesModel_ReadonlyInput" name="MyAttributeExamplesModel.ReadonlyInput" value="Readonly Input" class="form-control " readonly="">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyAttributeExamplesModel.ReadonlyInput" data-valmsg-replace="true"></span>
+ </div>
+ <div class="form-group">
+ <label for="MyAttributeExamplesModel_ReadonlyPlainTextInput">ReadonlyPlainTextInput</label>
+ <input type="text" id="MyAttributeExamplesModel_ReadonlyPlainTextInput" name="MyAttributeExamplesModel.ReadonlyPlainTextInput" value="Readonly Plain Text Input" class="form-control-plaintext " readonly="">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyAttributeExamplesModel.ReadonlyPlainTextInput" data-valmsg-replace="true"></span>
+ </div>
+ <div class="form-group">
+ <label for="MyAttributeExamplesModel_LargeInput">LargeInput</label>
+ <input type="text" id="MyAttributeExamplesModel_LargeInput" name="MyAttributeExamplesModel.LargeInput" value="Large Input" class="form-control form-control-lg">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyAttributeExamplesModel.LargeInput" data-valmsg-replace="true"></span>
+ </div>
+ <div class="form-group">
+ <label for="MyAttributeExamplesModel_SmallInput">SmallInput</label>
+ <input type="text" id="MyAttributeExamplesModel_SmallInput" name="MyAttributeExamplesModel.SmallInput" value="Small Input" class="form-control form-control-sm">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyAttributeExamplesModel.SmallInput" data-valmsg-replace="true"></span>
+ </div>
+ <input name="__RequestVerificationToken" type="hidden" value="CfDJ8Kbwu8pRBWJCh6KUtTDoAuSUKLRRJ2JhujqxKEZfzYxIDYQtg1knqOh9zyG1DjaXRnoavm1876JtbePc4El_6aDqwMUKuXshQhXIunS_hrygXH5v-Tm6Qw_zL-JEJnSmd6Q4EwCtwDBwGX0in4-swG8">
</form>
-
+
+
+
-# Form Content Placement
+Form Content Placement
-
+
+
+ First Div!
+ ---------
+
+
+ Second Div!
+
-
- Posted Values:
-
- Name: @Model.PersonInput.Name
- Name: @Model.PersonInput.Surname
- City: @Model.PersonInput.City
- Phone.Name: @Model.PersonInput.Phone.Name
- Phone.Number: @Model.PersonInput.Phone.Number
- Day: @Model.PersonInput.Day.ToString("yyyy-MM-dd")
- Country: @Model.PersonInput.Country
- IsActive: @Model.PersonInput.IsActive
-
-
-<abp-dynamic-form abp-model="@Model.PersonInput">
- <abp-form-content />
- <abp-button button-type="Primary" type="submit" text="submit" />
+
+
+
+public class DynamicFormsModel : PageModel
+ {
+ public FormContentExampleModel MyFormContentExampleModel { get; set; }
+
+ public void OnGet()
+ {
+ MyFormContentExampleModel = new FormContentExampleModel();
+ }
+
+ public class FormContentExampleModel
+ {
+ public string SampleInput { get; set; }
+ }
+ }
+
+
+
+
+<abp-dynamic-form abp-model="@@Model.MyFormContentExampleModel">
+ <div>
+ First Div! <br />
+ ---------
+ </div>
+
+ <abp-form-content />
+
+ <div>
+ --------- <br />
+ Second Div!
+ </div>
</abp-dynamic-form>
-
-
-
+
+<form method="post">
+ <div>
+ First Div! <br />
+ ---------
+ </div>
+
+ <div>
+ <div class="form-group">
+ <label for="MyFormContentExampleModel_SampleInput">SampleInput</label>
+ <input type="text" id="MyFormContentExampleModel_SampleInput" name="MyFormContentExampleModel.SampleInput" value="" class="form-control ">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyFormContentExampleModel.SampleInput" data-valmsg-replace="true"></span>
+ </div>
+ </div>
+ <div>
+ --------- <br />
+ Second Div!
+ </div>
+ <input name="__RequestVerificationToken" type="hidden" value="CfDJ8Kbwu8pRBWJCh6KUtTDoAuS4l6PkkSnj6NFFQcJPBjnUn13wQKxp0lm1Dw84zvR-1QrE4byCemr2_qENxB-Ob_YEc6yw3bvQcqN6VQ0ZPN4Sv6DvX5okAWE52wRXmNcHlTliFOPdjLcKcv3qBFXXlVk">
+</form>
+Form Elements
+ +Example
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ public class FormElementsModel : PageModel
+ {
+ public SampleModel MyModel { get; set; }
+
+ public void OnGet()
+ {
+ MyModel = new SampleModel();
+ }
+
+ public class SampleModel
+ {
+ [Required]
+ public string Name { get; set; }
+
+ [Required]
+ [DataType(DataType.Password)]
+ public string Password { get; set; }
+
+ public bool CheckMeOut { get; set; }
+ }
+ }
+
+<abp-input asp-for="@@Model.MyModel.Name" label="Name"/>
+<abp-input asp-for="@@Model.MyModel.Password" label="Password" />
+<abp-input asp-for="@@Model.MyModel.CheckMeOut" label="Check Me Out" />
+
+<div class="form-group">
+<label for="MyModel_Name">Name</label>
+<input type="text" data-val="true" data-val-required="The Name field is required." id="MyModel_Name" name="MyModel.Name" value="" class="form-control ">
+<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.Name" data-valmsg-replace="true"></span>
+</div>
+<div class="form-group">
+<label for="MyModel_Password">Password</label>
+<input type="password" data-val="true" data-val-required="The Password field is required." id="MyModel_Password" name="MyModel.Password" class="form-control ">
+<span class="text-danger field-validation-valid" data-valmsg-for="MyModel.Password" data-valmsg-replace="true"></span>
+</div>
+<div class="form-check">
+<input type="checkbox" data-val="true" data-val-required="The CheckMeOut field is required." id="MyModel_CheckMeOut" name="MyModel.CheckMeOut" value="true" class="form-check-input "><input name="MyModel.CheckMeOut" type="hidden" value="false">
+<label class="form-check-label" for="MyModel_CheckMeOut">Check Me Out</label>
+</div>
+Form controls
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ public class FormElementsModel : PageModel
+ {
+ public SampleModel MyModel { get; set; }
+
+ public List<SelectListItem> CityList { get; set; } = new List<SelectListItem>
+ {
+ new SelectListItem { Value = "NY", Text = "New York"},
+ new SelectListItem { Value = "LDN", Text = "London"},
+ new SelectListItem { Value = "IST", Text = "Istanbul"},
+ new SelectListItem { Value = "MOS", Text = "Moscow"}
+ };
+
+ public void OnGet()
+ {
+ MyModel = new SampleModel();
+ }
+
+ public class SampleModel
+ {
+ [Required]
+ public string EmailAddress { get; set; }
+
+ public string City { get; set; }
+
+ public List<string> Cities { get; set; }
+
+ [TextArea]
+ public string Description { get; set; }
+ }
+ }
+
+<abp-input asp-for="@@Model.MyModel.EmailAddress" label="Email Address" placeholder="name@example.com" />
+<abp-select asp-for="@@Model.MyModel.City" asp-items="@@Model.CityList" label="City" />
+<abp-select asp-for="@@Model.MyModel.Cities" asp-items="@@Model.CityList" label="Cities" />
+<abp-input asp-for="@@Model.MyModel.Description" label="Description" />
+
+ <div class="form-group">
+ <label for="MyModel_EmailAddress">Email Address</label>
+ <input placeholder="name@example.com" type="text" data-val="true" data-val-required="The EmailAddress field is required." id="MyModel_EmailAddress" name="MyModel.EmailAddress" value="" class="form-control ">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.EmailAddress" data-valmsg-replace="true"></span>
+ </div>
+ <div class="form-group">
+ <label for="MyModel_City">City</label>
+ <select id="MyModel_City" name="MyModel.City" class="form-control">
+ <option value="NY">New York</option>
+ <option value="LDN">London</option>
+ <option value="IST">Istanbul</option>
+ <option value="MOS">Moscow</option>
+ </select>
+ </div>
+ <div class="form-group">
+ <label for="MyModel_Cities">Cities</label>
+ <select id="MyModel_Cities" multiple="multiple" name="MyModel.Cities" class="form-control">
+ <option value="NY">New York</option>
+ <option value="LDN">London</option>
+ <option value="IST">Istanbul</option>
+ <option value="MOS">Moscow</option>
+ </select>
+ </div>
+ <div class="form-group">
+ <label for="MyModel_Description">Description</label>
+ <textarea id="MyModel_Description" name="MyModel.Description" class="form-control "></textarea>
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.Description" data-valmsg-replace="true"></span>
+ </div>
+Sizing
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ public class FormElementsModel : PageModel
+ {
+ public SampleModel MyModel { get; set; }
+
+ public void OnGet()
+ {
+ MyModel = new SampleModel();
+ }
+
+ public class SampleModel
+ {
+ public string LargeInput { get; set; }
+
+ public string SmallInput { get; set; }
+ }
+ }
+
+<abp-input asp-for="@@Model.MyModel.LargeInput" size="Large" />
+<abp-input asp-for="@@Model.MyModel.SmallInput" size="Small" />
+
+<div class="form-group">
+ <label for="MyModel_LargeInput">LargeInput</label>
+ <input type="text" id="MyModel_LargeInput" name="MyModel.LargeInput" value="" class="form-control form-control-lg">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.LargeInput" data-valmsg-replace="true"></span>
+</div>
+<div class="form-group">
+ <label for="MyModel_SmallInput">SmallInput</label>
+ <input type="text" id="MyModel_SmallInput" name="MyModel.SmallInput" value="" class="form-control form-control-sm">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.SmallInput" data-valmsg-replace="true"></span>
+</div>
+Disabled And ReadOnly
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ public class FormElementsModel : PageModel
+ {
+ public SampleModel MyModel { get; set; }
+
+ public void OnGet()
+ {
+ MyModel = new SampleModel();
+ MyModel.SampleInput0 = "This is a disabled input.";
+ MyModel.SampleInput0 = "This is a disabled input.";
+ MyModel.SampleInput1 = "This is a readonly input.";
+ MyModel.SampleInput2 = "This is a readonly plain-text.";
+ }
+
+ public class SampleModel
+ {
+ public string SampleInput0 { get; set; }
+
+ public string SampleInput1 { get; set; }
+
+ public string SampleInput2 { get; set; }
+ }
+ }
+
+<abp-input asp-for="@@Model.MyModel.SampleInput0" disabled="true" />
+<abp-input asp-for="@@Model.MyModel.SampleInput1" readonly="True" />
+<abp-input asp-for="@@Model.MyModel.SampleInput2" readonly="True_PlainText"/>
+
+<div class="form-group">
+ <label for="MyModel_SampleInput0">SampleInput0</label>
+ <input type="text" id="MyModel_SampleInput0" name="MyModel.SampleInput0" value="This is a disabled input." disabled="" class="form-control ">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.SampleInput0" data-valmsg-replace="true"></span>
+</div>
+<div class="form-group">
+ <label for="MyModel_SampleInput1">SampleInput1</label>
+ <input type="text" id="MyModel_SampleInput1" name="MyModel.SampleInput1" value="This is a readonly input." class="form-control " readonly="">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.SampleInput1" data-valmsg-replace="true"></span>
+</div>
+<div class="form-group">
+ <label for="MyModel_SampleInput2">SampleInput2</label>
+ <input type="text" id="MyModel_SampleInput2" name="MyModel.SampleInput2" value="This is a readonly plain-text." class="form-control-plaintext " readonly="">
+ <span class="text-danger field-validation-valid" data-valmsg-for="MyModel.SampleInput2" data-valmsg-replace="true"></span>
+</div>
+Checkboxes and radios
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ public class FormElementsModel : PageModel
+ {
+ public SampleModel MyModel { get; set; }
+
+ public void OnGet()
+ {
+ MyModel = new SampleModel();
+ }
+
+ public class SampleModel
+ {
+ public bool DefaultCheckbox { get; set; }
+
+ public bool DisabledCheckbox { get; set; }
+ }
+ }
+
+<abp-input asp-for="@@Model.MyModel.DefaultCheckbox"/>
+<abp-input asp-for="@@Model.MyModel.DisabledCheckbox" disabled="true"/>
+
+<div class="form-check">
+ <input type="checkbox" data-val="true" data-val-required="The DefaultCheckbox field is required." id="MyModel_DefaultCheckbox" name="MyModel.DefaultCheckbox" value="true" class="form-check-input "><input name="MyModel.DefaultCheckbox" type="hidden" value="false">
+ <label class="form-check-label" for="MyModel_DefaultCheckbox">DefaultCheckbox</label>
+</div>
+<div class="form-check">
+ <input type="checkbox" data-val="true" data-val-required="The DisabledCheckbox field is required." id="MyModel_DisabledCheckbox" name="MyModel.DisabledCheckbox" value="true" disabled="" class="form-check-input "><input name="MyModel.DisabledCheckbox" type="hidden" value="false">
+ <label class="form-check-label" for="MyModel_DisabledCheckbox">DisabledCheckbox</label>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ public class FormElementsModel : PageModel
+ {
+ public SampleModel MyModel { get; set; }
+
+ public void OnGet()
+ {
+ MyModel = new SampleModel();
+ MyModel.CityRadio = "IST";
+ }
+
+ public class SampleModel
+ {
+ [Display(Name="City")]
+ public string CityRadio { get; set; }
+ }
+ }
+
+<abp-radio asp-for="@@Model.MyModel.CityRadio" asp-items="@@Model.CityList" inline="true"/>
+
+<div>
+ <div class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="MyModel.CityRadioRadioNY" name="MyModel.CityRadio" value="NY" class="custom-control-input">
+ <label class="custom-control-label" for="MyModel.CityRadioRadioNY">New York</label>
+ </div>
+ <div class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="MyModel.CityRadioRadioLDN" name="MyModel.CityRadio" value="LDN" class="custom-control-input">
+ <label class="custom-control-label" for="MyModel.CityRadioRadioLDN">London</label>
+ </div>
+ <div class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="MyModel.CityRadioRadioIST" name="MyModel.CityRadio" value="IST" checked="checked" class="custom-control-input">
+ <label class="custom-control-label" for="MyModel.CityRadioRadioIST">Istanbul</label>
+ </div>
+ <div class="custom-control custom-radio custom-control-inline">
+ <input type="radio" id="MyModel.CityRadioRadioMOS" name="MyModel.CityRadio" value="MOS" class="custom-control-input">
+ <label class="custom-control-label" for="MyModel.CityRadioRadioMOS">Moscow</label>
+ </div>
+</div>
+Enum
+ +
+
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/FormElements.cshtml.cs b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/FormElements.cshtml.cs
new file mode 100644
index 0000000000..6a3f432220
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/FormElements.cshtml.cs
@@ -0,0 +1,81 @@
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.ComponentModel.DataAnnotations;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using Microsoft.AspNetCore.Mvc.Rendering;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
+{
+ public class FormElementsModel : PageModel
+ {
+ [BindProperty]
+ public SampleModel MyModel { get; set; }
+
+ public List
+
+
+
+
+
+
+
+
+
+
+
+
+ public class FormElementsModel : PageModel
+ {
+ public SampleModel MyModel { get; set; }
+
+ public void OnGet()
+ {
+ MyModel = new SampleModel();
+ }
+
+ public class SampleModel
+ {
+ public CarType CarType { get; set; }
+ }
+
+ public enum CarType
+ {
+ Sedan,
+ Hatchback,
+ StationWagon,
+ Coupe
+ }
+ }
+
+<abp-select asp-for="@Model.MyModel.CarType"/>
+
+ <div class="form-group">
+ <label for="MyModel_CarType">CarType</label>
+ <select data-val="true" data-val-required="The CarType field is required." id="MyModel_CarType" name="MyModel.CarType" class="form-control">
+ <option selected="selected" value="0">Sedan</option>
+ <option value="1">Hatchback</option>
+ <option value="2">StationWagon</option>
+ <option value="3">Coupe</option>
+ </select>
+ </div>
+Grids
Based on Bootstrap grid.
-# Example
+Equal-width
-
+
- One of two columns
- One of two columns
+ 1 of 2
+ 2 of 2
+
+
+ 1 of 3
+ 2 of 3
+ 3 of 3
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <abp-container>
+ <abp-row>
+ <abp-column>1 of 2</abp-column>
+ <abp-column>2 of 2</abp-column>
+ </abp-row>
+ <abp-row>
+ <abp-column>1 of 3</abp-column>
+ <abp-column>2 of 3</abp-column>
+ <abp-column>3 of 3</abp-column>
+ </abp-row>
+ </abp-container>
+
+ <div class="container">
+ <div class="row">
+ <div class="col">1 of 2</div>
+ <div class="col">2 of 2</div>
+ </div>
+ <div class="row">
+ <div class="col">1 of 3</div>
+ <div class="col">2 of 3</div>
+ <div class="col">3 of 3</div>
+ </div>
+ </div>
+Column Breaker
+ +
+
-
+
- One of three columns
- One of three columns
- One of three columns
+ column
+ column
+ column
+ column
-
+
+
+
+
+
-<abp-container> - <abp-row> - <abp-column size-sm="C6">One of two columns</abp-column> - <abp-column size-sm="C6">One of two columns</abp-column> - </abp-row> - <abp-row> - <abp-column size-sm="C4">One of three columns</abp-column> - <abp-column size-sm="C4">One of three columns</abp-column> - <abp-column size-sm="C4">One of three columns</abp-column> - </abp-row> -</abp-container> -+
+ <abp-container>
+ <abp-row>
+ <abp-column>column</abp-column>
+ <abp-column>column</abp-column>
+ <abp-column-breaker/>
+ <abp-column>column</abp-column>
+ <abp-column>column</abp-column>
+ </abp-row>
+ </abp-container>
+
+ <div class="container">
+ <div class="row">
+ <div class="col">column</div>
+ <div class="col">column</div>
+ <div class="w-100"></div>
+ <div class="col">column</div>
+ <div class="col">column</div>
+ </div>
+ </div>
+# Break Column Example
+Setting one column width
-
+
- One of three columns
- One of three columns
- One of three columns
+ 1 of 3
+ 2 of 3 (wider)
+ 3 of 3
+
+
+ 1 of 3
+ 2 of 3 (wider)
+ 3 of 3
-
-
+
+
+
+
+
- <abp-container> - <abp-row> - <abp-column>One of three columns</abp-column> - <abp-column>One of three columns</abp-column> - <abp-col-break /> @* TODO: abp-column-break *@ - <abp-column>One of three columns</abp-column> - </abp-row> - </abp-container> -+
+ <abp-container>
+ <abp-row>
+ <abp-column>1 of 3</abp-column>
+ <abp-column size="_6">2 of 3 (wider)</abp-column>
+ <abp-column>3 of 3</abp-column>
+ </abp-row>
+ <abp-row>
+ <abp-column>1 of 3</abp-column>
+ <abp-column size="_5">2 of 3 (wider)</abp-column>
+ <abp-column>3 of 3</abp-column>
+ </abp-row>
+ </abp-container>
+
+ <div class="container">
+ <div class="row">
+ <div class="col">1 of 3</div>
+ <div class="col col-6">2 of 3 (wider)</div>
+ <div class="col">3 of 3</div>
+ </div>
+ <div class="row">
+ <div class="col">1 of 3</div>
+ <div class="col col-5">2 of 3 (wider)</div>
+ <div class="col">3 of 3</div>
+ </div>
+ </div>
+# Vertical alignment Example
+Variable width content
-
+
+
+
+
+
+ 1 of 3
+ Variable width content
+ 3 of 3
+
+
+ 1 of 3
+ Variable width content
+ 3 of 3
+
+
+
+
+
+
+
+
+
+
+
+
+ <abp-container>
+ <abp-row h-align="Center">
+ <abp-column size-lg="_2">1 of 3</abp-column>
+ <abp-column size-md="Auto">Variable width content</abp-column>
+ <abp-column size-lg="_2">3 of 3</abp-column>
+ </abp-row>
+ <abp-row>
+ <abp-column>1 of 3</abp-column>
+ <abp-column size-md="Auto">Variable width content</abp-column>
+ <abp-column size-lg="_2">3 of 3</abp-column>
+ </abp-row>
+ </abp-container>
+
+ <div class="container">
+ <div class="row justify-content-center">
+ <div class="col col-lg-2">1 of 3</div>
+ <div class="col col-md-auto">Variable width content</div>
+ <div class="col col-lg-2">3 of 3</div>
+ </div>
+ <div class="row">
+ <div class="col">1 of 3</div>
+ <div class="col col-md-auto">Variable width content</div>
+ <div class="col col-lg-2">3 of 3</div>
+ </div>
+ </div>
+Responsive classes
+ +All breakpoints
+ +
+
+
+
+
+ col
+ col
+ col
+ col
+
+
+ col-8
+ col-4
+
+
+
+
+
+
+
+
+
+
+
+ <abp-row>
+ <abp-column>col</abp-column>
+ <abp-column>col</abp-column>
+ <abp-column>col</abp-column>
+ <abp-column>col</abp-column>
+ </abp-row>
+ <abp-row>
+ <abp-column size="_8">col-8</abp-column>
+ <abp-column size="_4">col-4</abp-column>
+ </abp-row>
+
+ <div class="row">
+ <div class="col">col</div>
+ <div class="col">col</div>
+ <div class="col">col</div>
+ <div class="col">col</div>
+ </div>
+ <div class="row">
+ <div class="col col-8">col-8</div>
+ <div class="col col-4">col-4</div>
+ </div>
+All breakpoints
+ +
+
+
+
+
+ col-sm-8
+ col-sm-4
+
+
+ col-sm
+ col-sm
+ col-sm
+ col-sm
+
+
+
+
+
+
+
+
+
+
+
+ <abp-row>
+ <abp-column size-sm="_8">col-sm-8</abp-column>
+ <abp-column size-sm="_4">col-sm-4</abp-column>
+ </abp-row>
+ <abp-row>
+ <abp-column size-sm="_">col-sm</abp-column>
+ <abp-column size-sm="_">col-sm</abp-column>
+ <abp-column size-sm="_">col-sm</abp-column>
+ <abp-column size-sm="_">col-sm</abp-column>
+ </abp-row>
+
+ <div class="row">
+ <div class="col col-sm-8">col-sm-8</div>
+ <div class="col col-sm-4">col-sm-4</div>
+ </div>
+ <div class="row">
+ <div class="col col-sm">col-sm</div>
+ <div class="col col-sm">col-sm</div>
+ <div class="col col-sm">col-sm</div>
+ <div class="col col-sm">col-sm</div>
+ </div>
+Mix and match
+ +
+
+
+
+
+ .col-12 .col-md-8
+ .col-6 .col-md-4
+
+
+ .col-6 .col-md-4
+ .col-6 .col-md-4
+ .col-6 .col-md-4
+
+
+ .col-6
+ .col-6
+
+
+
+
+
+
+
+
+
+
+
+ <!-- Stack the columns on mobile by making one full-width and the other half-width -->
+ <abp-row>
+ <abp-column size="_12" size-md="_8">.col-12 .col-md-8</abp-column>
+ <abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
+ </abp-row>
+
+ <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
+ <abp-row>
+ <abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
+ <abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
+ <abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column>
+ </abp-row>
+
+ <!-- Columns are always 50% wide, on mobile and desktop -->
+ <abp-row>
+ <abp-column size="_6">.col-6</abp-column>
+ <abp-column size="_6">.col-6</abp-column>
+ </abp-row>
+
+ <div class="row">
+ <div class="col col-12 col-md-8">.col-12 .col-md-8</div>
+ <div class="col col-6 col-md-4">.col-6 .col-md-4</div>
+ </div>
+ <div class="row">
+ <div class="col col-6 col-md-4">.col-6 .col-md-4</div>
+ <div class="col col-6 col-md-4">.col-6 .col-md-4</div>
+ <div class="col col-6 col-md-4">.col-6 .col-md-4</div>
+ </div>
+ <div class="row">
+ <div class="col col-6">.col-6</div>
+ <div class="col col-6">.col-6</div>
+ </div>
+Alignment
+ +Vertical Alignment
+ +
+
- One of three columns
- One of three columns
- One of three columns
+ column
+ column
+ column
- One of three columns
- One of three columns
- One of three columns
+ column
+ column
+ column
- One of three columns
- One of three columns
- One of three columns
+ column
+ column
+ column
-
-
+
+
+
+
+
-<abp-container> - <abp-row v-align="Start"> - <abp-column>One of three columns</abp-column> - <abp-column>One of three columns</abp-column> - <abp-column>One of three columns</abp-column> - </abp-row> - <abp-row v-align="Center"> - <abp-column>One of three columns</abp-column> - <abp-column>One of three columns</abp-column> - <abp-column>One of three columns</abp-column> - </abp-row> - <abp-row v-align="End"> - <abp-column>One of three columns</abp-column> - <abp-column>One of three columns</abp-column> - <abp-column>One of three columns</abp-column> - </abp-row> - </abp-container> -+
+ <abp-container>
+ <abp-row v-align="Start">
+ <abp-column>column</abp-column>
+ <abp-column>column</abp-column>
+ <abp-column>column</abp-column>
+ </abp-row>
+ <abp-row v-align="Center">
+ <abp-column>column</abp-column>
+ <abp-column>column</abp-column>
+ <abp-column>column</abp-column>
+ </abp-row>
+ <abp-row v-align="End">
+ <abp-column>column</abp-column>
+ <abp-column>column</abp-column>
+ <abp-column>column</abp-column>
+ </abp-row>
+ </abp-container>
+
+ <div class="container">
+ <div class="row align-items-start">
+ <div class="col">column</div>
+ <div class="col">column</div>
+ <div class="col">column</div>
+ </div>
+ <div class="row align-items-center">
+ <div class="col">column</div>
+ <div class="col">column</div>
+ <div class="col">column</div>
+ </div>
+ <div class="row align-items-end">
+ <div class="col">column</div>
+ <div class="col">column</div>
+ <div class="col">column</div>
+ </div>
+ </div>
+# Vertical alignment Example 2
-
-
+
-
- One of three columns
- One of three columns
- One of three columns
+
+ column
+ column
+ column
-
-
+
+
+
+
+
- <abp-container> - <abp-row> - <abp-column v-align="Start">One of three columns</abp-column> - <abp-column v-align="Center">One of three columns</abp-column> - <abp-column v-align="End">One of three columns</abp-column> - </abp-row> - </abp-container> -+
+ <abp-container>
+ <abp-row v-align="Start">
+ <abp-column v-align="Start">column</abp-column>
+ <abp-column v-align="Center">column</abp-column>
+ <abp-column v-align="End">column</abp-column>
+ </abp-row>
+ </abp-container>
+
+ <div class="container">
+ <div class="row align-items-start">
+ <div class="col align-self-start">column</div>
+ <div class="col align-self-center">column</div>
+ <div class="col align-self-end">column</div>
+ </div>
+ </div>
+# Horizontal alignment Example
+Horizontal alignment
-
+
- One of three columns
- One of three columns
+ One of two columns
+ One of two columns
- One of three columns
- One of three columns
+ One of two columns
+ One of two columns
- One of three columns
- One of three columns
+ One of two columns
+ One of two columns
- One of three columns
- One of three columns
+ One of two columns
+ One of two columns
- One of three columns
- One of three columns
+ One of two columns
+ One of two columns
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <abp-container>
+ <abp-row h-align="Start">
+ <abp-column size="_4">One of two columns</abp-column>
+ <abp-column size="_4">One of two columns</abp-column>
+ </abp-row>
+ <abp-row h-align="Center">
+ <abp-column size="_4">One of two columns</abp-column>
+ <abp-column size="_4">One of two columns</abp-column>
+ </abp-row>
+ <abp-row h-align="End">
+ <abp-column size="_4">One of two columns</abp-column>
+ <abp-column size="_4">One of two columns</abp-column>
+ </abp-row>
+ <abp-row h-align="Around">
+ <abp-column size="_4">One of two columns</abp-column>
+ <abp-column size="_4">One of two columns</abp-column>
+ </abp-row>
+ <abp-row h-align="Between">
+ <abp-column size="_4">One of two columns</abp-column>
+ <abp-column size="_4">One of two columns</abp-column>
+ </abp-row>
+ </abp-container>
+
+ <div class="container">
+ <div class="row justify-content-start">
+ <div class="col col-4">One of two columns</div>
+ <div class="col col-4">One of two columns</div>
+ </div>
+ <div class="row justify-content-center">
+ <div class="col col-4">One of two columns</div>
+ <div class="col col-4">One of two columns</div>
+ </div>
+ <div class="row justify-content-end">
+ <div class="col col-4">One of two columns</div>
+ <div class="col col-4">One of two columns</div>
+ </div>
+ <div class="row justify-content-around">
+ <div class="col col-4">One of two columns</div>
+ <div class="col col-4">One of two columns</div>
+ </div>
+ <div class="row justify-content-between">
+ <div class="col col-4">One of two columns</div>
+ <div class="col col-4">One of two columns</div>
+ </div>
+ </div>
+No gutters
+ +
+
+
+
+
+ One of two columns
+ One of two columns
+
+
+
+
+
+
+
+
+
+
+
+ <abp-row gutters="false">
+ <abp-column size="_8">One of two columns</abp-column>
+ <abp-column size="_4">One of two columns</abp-column>
+ </abp-row>
+
+ <div class="row no-gutters">
+ <div class="col col-8">One of two columns</div>
+ <div class="col col-4">One of two columns</div>
+ </div>
+Column wrapping
+ +
+
+
+
+
+ .col-9
+ .col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
+ .col-6
Subsequent columns continue along the new line.s
+
+
+ Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Subsequent columns continue along the new line.s
+
+
+
+
+
+
+
+
+ <abp-row>
+ <abp-column size="_9">.col-9</abp-column>
+ <abp-column size="_4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</abp-column>
+ <abp-column size="_6">.col-6<br>Subsequent columns continue along the new line.s</abp-column>
+ </abp-row>
+
+ <div class="row">
+ <div class="col col-9">.col-9</div>
+ <div class="col col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
+ <div class="col col-6">.col-6<br>Subsequent columns continue along the new line.s</div>
+ </div>
+Reordering
+ +Order classes
+ +
+
+
+
+
+
+ First, but Last
+ Second, but unordered
+ Third, but Second
+
+
+
+
+
+
+
+
+
+
+
+
+ <abp-container>
+ <abp-row>
+ <abp-column order="_12">First, but Last</abp-column>
+ <abp-column>Second, but unordered</abp-column>
+ <abp-column order="_6">Third, but Second</abp-column>
+ </abp-row>
+ </abp-container>
+
+ <div class="container">
+ <div class="row">
+ <div class="col order-12">First, but Last</div>
+ <div class="col">Second, but unordered</div>
+ <div class="col order-6">Third, but Second</div>
+ </div>
+ </div>
+
+
-
+
+
+ First, but Last
+ Second, but unordered
+ Third, but First
-
+
+
+
+
+
- <abp-container> - <abp-row h-align="Start"> - <abp-column size="C4">One of three columns</abp-column> - <abp-column size="C4">One of three columns</abp-column> - </abp-row> - <abp-row h-align="Center"> - <abp-column size="C4">One of three columns</abp-column> - <abp-column size="C4">One of three columns</abp-column> - </abp-row> - <abp-row h-align="End"> - <abp-column size="C4">One of three columns</abp-column> - <abp-column size="C4">One of three columns</abp-column> - </abp-row> - <abp-row h-align="Around"> - <abp-column size="C4">One of three columns</abp-column> - <abp-column size="C4">One of three columns</abp-column> - </abp-row> - <abp-row h-align="Between"> - <abp-column size="C4">One of three columns</abp-column> - <abp-column size="C4">One of three columns</abp-column> - </abp-row> - </abp-container> -+
+ <abp-container>
+ <abp-row>
+ <abp-column order="Last">First, but Last</abp-column>
+ <abp-column>Second, but unordered</abp-column>
+ <abp-column order="First">Third, but First</abp-column>
+ </abp-row>
+ </abp-container>
+
+ <div class="container">
+ <div class="row">
+ <div class="col order-last">First, but Last</div>
+ <div class="col">Second, but unordered</div>
+ <div class="col order-first">Third, but First</div>
+ </div>
+ </div>
+# Order Example
+Offsetting columns
+ +Offset classes
-
+ @*
+}
+
+
+
+
+
+
-
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ProgressBars.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ProgressBars.cshtml
index 3e3e1e28e7..25f7f5b96e 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ProgressBars.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ProgressBars.cshtml
@@ -14,65 +14,70 @@
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tables.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tables.cshtml
index 127cd61715..b77606f148 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tables.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tables.cshtml
@@ -10,17 +10,30 @@
}
+@section scripts {
+
+ @*
+}
+
+
+
+
+
+
+
- First, but unordered
- Second, but last
- Third, but first
+ .col-md-4
+ .col-md-4 .offset-md-4
+
+
+ .col-md-3 .offset-md-3
+ .col-md-3 .offset-md-3
- First, but unordered
- Second, but last
- Third, but first
+ .col-md-6 .offset-md-3
-
-
+
+
+
+
+
- <abp-container> - <abp-row> - <abp-column> First, but unordered</abp-column> - <abp-column order="C12">Second, but last</abp-column> - <abp-column order="C1">Third, but first</abp-column> - </abp-row> - <abp-row> - <abp-column> First, but unordered</abp-column> - <abp-column order="Last">Second, but last</abp-column> - <abp-column order="First">Third, but first</abp-column> - </abp-row> - </abp-container> -+
+ <abp-container>
+ <abp-row>
+ <abp-column size-md="_4">.col-md-4</abp-column>
+ <abp-column size-md="_4" offset-md="_4">.col-md-4 .offset-md-4</abp-column>
+ </abp-row>
+ <abp-row>
+ <abp-column size-md="_3" offset-md="_3">.col-md-3 .offset-md-3</abp-column>
+ <abp-column size-md="_3" offset-md="_3">.col-md-3 .offset-md-3</abp-column>
+ </abp-row>
+ <abp-row>
+ <abp-column size-md="_6" offset-md="_3">.col-md-6 .offset-md-3</abp-column>
+ </abp-row>
+ </abp-container>
+
+ <div class="container">
+ <div class="row">
+ <div class="col col-md-4">.col-md-4</div>
+ <div class="col col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
+ </div>
+ <div class="row">
+ <div class="col col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
+ <div class="col col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
+ </div>
+ <div class="row">
+ <div class="col col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
+ </div>
+ </div>
+# Offset Example
-
-
-}
-
-
+ @*
+}
+
+
+
+
+
-
-
- Cras justo odio
+ Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
- Vestibulum at eros
+ Vestibulum at eros
-
-
- Cras justo odio
+ Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Vestibulum at eros
-
-
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus 42
- Vestibulum at eros 5
+ Cras justo odio
+ A simple Primary list group item
+ A simple Secondary list group item
+ A simple Success list group item
+ A simple Danger list group item
+ A simple Warning list group item
+ A simple Info list group item
+ A simple Light list group item
+ A simple Dark list group item
+
+
+
+ @*
+}
+
+
+
+
+
+
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Navs.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Navs.cshtml
index d351878652..8adeabf964 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Navs.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Navs.cshtml
@@ -10,18 +10,31 @@
}
+@section scripts {
+
+ @*
+}
+
+
+
+
+
+
- Active
+ Active
Longer nav link
@@ -33,29 +46,59 @@
disabled
-
-
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml
index bcf117945c..b7a567beae 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml
@@ -10,34 +10,99 @@
}
-
+ @*
+}
-
-
-
+
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml.cs b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml.cs
index 40afff2016..15b31db6da 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml.cs
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Paginator.cshtml.cs
@@ -1,9 +1,4 @@
-using System;
-using System.Collections.Generic;
-using System.Linq;
-using System.Threading.Tasks;
-using Microsoft.AspNetCore.Mvc;
-using Microsoft.AspNetCore.Mvc.RazorPages;
+using Microsoft.AspNetCore.Mvc.RazorPages;
using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Pagination;
namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Popovers.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Popovers.cshtml
index f9563a5c8b..7f43407831 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Popovers.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Popovers.cshtml
@@ -1,7 +1,7 @@
@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.PopoversModel
@{
- ViewData["Title"] = "Badges";
+ ViewData["Title"] = "Popovers";
}
@section styles {
@@ -10,11 +10,25 @@
}
+@section scripts {
+
-
- .col-md-4
- .col-md-4 .offset-md-4
-
-
- .col-md-3 .offset-md-3
- .col-md-3 .offset-md-3
-
-
- .col-md-6 .offset-md-3
-
+
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Images.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Images.cshtml
deleted file mode 100644
index 9ec4f0106e..0000000000
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Images.cshtml
+++ /dev/null
@@ -1,54 +0,0 @@
-@page
-@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.ImagesModel
-@{
- ViewData["Title"] = "Images";
-}
-
-@section styles {
-
+
+
+ .col-sm-5 .col-md-6
+ .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
+
+
+ col-sm-6 .col-md-5 .col-lg-6
+ .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
+
+
-
+
+
+
+
+
- <abp-row> - <abp-column> .col-md-4</abp-column> - <abp-column size-md="C4" offset-md="C4">.col-md-4 .offset-md-4</abp-column> - </abp-row> - <abp-row> - <abp-column size-md="C3" offset-md="C3">.col-md-3 .offset-md-3</abp-column> - <abp-column size-md="C3" offset-md="C3">.col-md-3 .offset-md-3</abp-column> - </abp-row> - <abp-row> - <abp-column size-md="C6" offset-md="C3">.col-md-6 .offset-md-3</abp-column> - </abp-row> -+
+ <abp-container>
+ <abp-row>
+ <abp-column size-sm="_5" size-md="_6">.col-sm-5 .col-md-6</abp-column>
+ <abp-column size-sm="_5" offset-sm="_2" size-md="_6" offset-md="_">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</abp-column>
+ </abp-row>
+ <abp-row>
+ <abp-column size-sm="_6" size-md="_5" size-lg="_6">col-sm-6 .col-md-5 .col-lg-6</abp-column>
+ <abp-column size-sm="_6" size-md="_5" offset-md="_2" size-lg="_6" offset-lg="_">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</abp-column>
+ </abp-row>
+ </abp-container>
+
+ <div class="container">
+ <div class="row">
+ <div class="col col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
+ <div class="col col-sm-5 col-md-6 offset-sm-2 offset-md-0">col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
+ </div>
+ <div class="row">
+ <div class="col col-sm-6 col-md-5 col-lg-6">col-sm-6 .col-md-5 .col-lg-6</div>
+ <div class="col col-sm-6 col-md-5 col-lg-6 offset-md-2 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
+ </div>
+ </div>
+Images
- -Based on Bootstrap Images.
- -# Image Examples
- -
-
-
-
-
-
-
--<abp-image src="..." responsive="true"></abp-image> --
-
-
-
-
-
-
--<abp-image src="..." thumbnail="true" rounded="true"></abp-image> --
-
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ListGroup.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ListGroup.cshtml
index 90097a3c4d..40a5cb5c65 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ListGroup.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/ListGroup.cshtml
@@ -10,11 +10,23 @@
}
+@section scripts {
+
-
-
-
--<abp-image src="..." rounded="true" position="Left"></abp-image> -<abp-image src="..." rounded="true" position="Center"></abp-image> -<abp-image src="..." rounded="true" position="Right"></abp-image> --
List Groups
Based on Bootstrap List Group.
-# List Group Example
+Basic example
@@ -25,116 +37,329 @@
Morbi leo risus
Vestibulum at eros
-
-
+
+
++ ++ + +<abp-list-group> - <abp-list-group-item active="true">Cras justo odio</abp-list-group-item> + <abp-list-group-item>Cras justo odio</abp-list-group-item> <abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item> <abp-list-group-item>Morbi leo risus</abp-list-group-item> - <abp-list-group-item disabled="true">Vestibulum at eros</abp-list-group-item> + <abp-list-group-item>Vestibulum at eros</abp-list-group-item> </abp-list-group> -
+<ul class="list-group">
+ <li class="list-group-item">Cras justo odio</li>
+ <li class="list-group-item">Dapibus ac facilisis in</li>
+ <li class="list-group-item">Morbi leo risus</li>
+ <li class="list-group-item">Porta ac consectetur ac</li>
+</ul>
+# List Group Flush Example
+Active & disabled items
-
+
Cras justo odio
- Dapibus ac facilisis in
+ Dapibus ac facilisis in
Morbi leo risus
- Vestibulum at eros
+ Vestibulum at eros
-
-
+
+
-<abp-list-group flush="true"> ++ ++ + ++<abp-list-group> <abp-list-group-item>Cras justo odio</abp-list-group-item> - <abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item> + <abp-list-group-item active="true">Dapibus ac facilisis in</abp-list-group-item> <abp-list-group-item>Morbi leo risus</abp-list-group-item> - <abp-list-group-item>Vestibulum at eros</abp-list-group-item> + <abp-list-group-item disabled="true">Vestibulum at eros</abp-list-group-item> </abp-list-group> -
+<ul class="list-group">
+ <li class="list-group-item active">Cras justo odio</li>
+ <li class="list-group-item">Dapibus ac facilisis in</li>
+ <li class="list-group-item">Morbi leo risus</li>
+ <li class="list-group-item disabled">Porta ac consectetur ac</li>
+</ul>
+# List Group Link Example
+Links and buttons
-
+
+
++ ++ + +<abp-list-group> - <abp-list-group-item href="#">Cras justo odio</abp-list-group-item> + <abp-list-group-item href="#" active="true">Cras justo odio</abp-list-group-item> <abp-list-group-item href="#">Dapibus ac facilisis in</abp-list-group-item> <abp-list-group-item href="#">Morbi leo risus</abp-list-group-item> - <abp-list-group-item href="#">Vestibulum at eros</abp-list-group-item> + <abp-list-group-item href="#" disabled="true">Vestibulum at eros</abp-list-group-item> </abp-list-group> -
+<div class="list-group">
+ <a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
+ <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
+ <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
+ <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
+</div>
+# List Group Button Example
-
-
+
+
-<abp-list-group flush="true"> - <abp-list-group-item tag-type="Button">Cras justo odio</abp-list-group-item> ++ ++ + ++<abp-list-group> + <abp-list-group-item tag-type="Button" active="true">Cras justo odio</abp-list-group-item> <abp-list-group-item tag-type="Button">Dapibus ac facilisis in</abp-list-group-item> <abp-list-group-item tag-type="Button">Morbi leo risus</abp-list-group-item> <abp-list-group-item tag-type="Button">Vestibulum at eros</abp-list-group-item> </abp-list-group> -
+<div class="list-group">
+ <button type="button" class="list-group-item list-group-item-action active">
+ Cras justo odio
+ </button>
+ <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
+ <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
+ <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
+</div>
+# List Group style Contextual classes Example
+Flush
+ +
+
+
+
+
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Morbi leo risus
+ Vestibulum at eros
+
+
+
+
+
+
+
+
+
+
+
+<abp-list-group flush="true">
+ <abp-list-group-item>Cras justo odio</abp-list-group-item>
+ <abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item>
+ <abp-list-group-item>Morbi leo risus</abp-list-group-item>
+ <abp-list-group-item>Vestibulum at eros</abp-list-group-item>
+</abp-list-group>
+
+<ul class="list-group list-group-flush">
+ <li class="list-group-item">Cras justo odio</li>
+ <li class="list-group-item">Dapibus ac facilisis in</li>
+ <li class="list-group-item">Morbi leo risus</li>
+ <li class="list-group-item">Vestibulum at eros</li>
+</ul>
+Contextual classes
+
+
+
+
+
+
+
+
+<abp-list-group>
+ <abp-list-group-item>Cras justo odio</abp-list-group-item>
+ <abp-list-group-item type="Primary">A simple Primary list group item</abp-list-group-item>
+ <abp-list-group-item type="Secondary">A simple Secondary list group item</abp-list-group-item>
+ <abp-list-group-item type="Success">A simple Success list group item</abp-list-group-item>
+ <abp-list-group-item type="Danger">A simple Danger list group item</abp-list-group-item>
+ <abp-list-group-item type="Warning">A simple Warning list group item</abp-list-group-item>
+ <abp-list-group-item type="Info">A simple Info list group item</abp-list-group-item>
+ <abp-list-group-item type="Light">A simple Light list group item</abp-list-group-item>
+ <abp-list-group-item type="Dark">A simple Dark list group item</abp-list-group-item>
+</abp-list-group>
+
+<ul class="list-group">
+ <li class="list-group-item">Dapibus ac facilisis in</li>
+ <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
+ <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
+ <li class="list-group-item list-group-item-success">A simple success list group item</li>
+ <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
+ <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
+ <li class="list-group-item list-group-item-info">A simple info list group item</li>
+ <li class="list-group-item list-group-item-light">A simple light list group item</li>
+ <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
+</ul>
+
+
+
+
+
+
+ Cras justo odio
+ A simple Primary list group item
+ A simple Secondary list group item
+ A simple Success list group item
+ A simple Danger list group item
+ A simple Warning list group item
+ A simple Info list group item
+ A simple Light list group item
+ A simple Dark list group item
+
-
+-<abp-list-group flush="true"> - <abp-list-group-item type="Warning">Cras justo odio</abp-list-group-item> - <abp-list-group-item type="Danger">Dapibus ac facilisis in</abp-list-group-item> - <abp-list-group-item type="Success">Morbi leo risus <span abp-badge-pill="Success">42</span></abp-list-group-item> - <abp-list-group-item type="Secondary">Vestibulum at eros <span abp-badge-pill="Warning">5</span></abp-list-group-item> ++ ++ +++<abp-list-group> + <abp-list-group-item href="#">Cras justo odio</abp-list-group-item> + <abp-list-group-item href="#" type="Primary">A simple Primary list group item</abp-list-group-item> + <abp-list-group-item href="#" type="Secondary">A simple Secondary list group item</abp-list-group-item> + <abp-list-group-item href="#" type="Success">A simple Success list group item</abp-list-group-item> + <abp-list-group-item href="#" type="Danger">A simple Danger list group item</abp-list-group-item> + <abp-list-group-item href="#" type="Warning">A simple Warning list group item</abp-list-group-item> + <abp-list-group-item href="#" type="Info">A simple Info list group item</abp-list-group-item> + <abp-list-group-item href="#" type="Light">A simple Light list group item</abp-list-group-item> + <abp-list-group-item href="#" type="Dark">A simple Dark list group item</abp-list-group-item> +</abp-list-group> ++ +++<div class="list-group"> + <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> + <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a> + <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a> + <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a> + <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a> + <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a> + <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a> + <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a> + <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a> +</div> +
With badges
+ +
+
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Modals.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Modals.cshtml
index 0a3aa3d8b9..74116488ad 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Modals.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Modals.cshtml
@@ -11,38 +11,81 @@
}
+@section scripts {
+
+
+
+ Cras justo odio 14
+ Dapibus ac facilisis in 2
+ Morbi leo risus 1
+
+
+
+
+
+
+
+
+
+<abp-list-group>
+ <abp-list-group-item>Cras justo odio <span abp-badge-pill="Primary">14</span></abp-list-group-item>
+ <abp-list-group-item>Dapibus ac facilisis in <span abp-badge-pill="Primary">2</span></abp-list-group-item>
+ <abp-list-group-item>Morbi leo risus <span abp-badge-pill="Primary">1</span></abp-list-group-item>
</abp-list-group>
-
+<ul class="list-group">
+ <li class="list-group-item">
+ Cras justo odio
+ <span class="badge badge-primary badge-pill">14</span>
+ </li>
+ <li class="list-group-item">
+ Dapibus ac facilisis in
+ <span class="badge badge-primary badge-pill">2</span>
+ </li>
+ <li class="list-group-item">
+ Morbi leo risus
+ <span class="badge badge-primary badge-pill">1</span>
+ </li>
+</ul>
+Modals
Based on Bootstrap Modal.
-# Modal Example
+Example
- Launch modal
-
-
-
- Launch modal
+
+
- Body
+ Woohoo, you're reading this text in a modal!
-
-
-
+
+
-<abp-modal id="myModal"> - <abp-modal-header title="Header"></abp-modal-header> ++ ++ + ++<abp-button button-type="Primary" data-toggle="modal" data-target="#myModal">Launch modal</abp-button> + +<abp-modal centered="true" size="Large" id="myModal"> + <abp-modal-header title="Modal title"></abp-modal-header> <abp-modal-body> - Body + Woohoo, you're reading this text in a modal! </abp-modal-body> <abp-modal-footer buttons="(AbpModalButtons.Save|AbpModalButtons.Close)"></abp-modal-footer> </abp-modal> -
+<!-- Button trigger modal -->
+<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
+ Launch demo modal
+</button>
+
+<!-- Modal -->
+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+ <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-primary">Save</button>
+ </div>
+ </div>
+ </div>
+</div>
+Navs
Based on Bootstrap Navs.
-# Navs Examples
+Base nav
-
+
+
+
+
+
+
+
+ - <abp-nav nav-style="Pill" align="Center"> - <abp-nav-item> - <a abp-nav-link Active="true" href="#">Active</a> - </abp-nav-item> - <abp-nav-item > - <a abp-nav-link href="#">Longer nav link</a> - </abp-nav-item> - <abp-nav-item > - <a abp-nav-link href="#">link</a> - </abp-nav-item> - <abp-nav-item > - <a abp-nav-link disabled="true" href="#">disabled</a> - </abp-nav-item> - </abp-nav> -+
+
+<abp-nav nav-style="Pill" align="Center">
+ <abp-nav-item>
+<a abp-nav-link active="true" href="#">Active</a>
+ </abp-nav-item>
+ <abp-nav-item>
+<a abp-nav-link href="#">Longer nav link</a>
+ </abp-nav-item>
+ <abp-nav-item>
+<a abp-nav-link href="#">link</a>
+ </abp-nav-item>
+ <abp-nav-item>
+<a abp-nav-link disabled="true" href="#">disabled</a>
+ </abp-nav-item>
+</abp-nav>
+
+<ul class="nav justify-content-center nav-pills">
+ <li class="nav-item">
+ <a href="#" class="nav-link active">Active</a>
+ </li>
+ <li class="nav-item">
+ <a href="#" class="nav-link">Longer nav link</a>
+ </li>
+ <li class="nav-item">
+ <a href="#" class="nav-link">link</a>
+ </li>
+ <li class="nav-item">
+ <a href="#" class="nav-link disabled">disabled</a>
+ </li>
+</ul>
+
+
-
+
- + For vertical nav, set nav-style "PillVertical". + +
# Navs Examples
+Base nav
@@ -92,42 +135,85 @@
-
-
- <abp-nav-bar size="Lg" navbar-style="Dark_Warning"> - <a abp-navbar-brand href="#">Navbar</a> - <abp-navbar-toggle> - <abp-navbar-nav> - <abp-nav-item active="true"> - <a abp-nav-link href="#">Home <span class="sr-only">(current)</span></a> - </abp-nav-item> - <abp-nav-item> - <a abp-nav-link href="#">Link</a> - </abp-nav-item> - <abp-nav-item dropdown="true"> - <abp-dropdown> - <abp-dropdown-button nav-link="true" text="Dropdown" /> - <abp-dropdown-menu> - <abp-dropdown-header>Dropdown header</abp-dropdown-header> - <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item> - <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item> - <abp-dropdown-item href="#">Something else here</abp-dropdown-item> - <abp-dropdown-divider /> - <abp-dropdown-item href="#">Separated link</abp-dropdown-item> - </abp-dropdown-menu> - </abp-dropdown> - </abp-nav-item> - <abp-nav-item> - <a abp-nav-link disabled="true" href="#">Disabled</a> - </abp-nav-item> - </abp-navbar-nav> - <span abp-navbar-text> ++ ++ + +++ +<abp-nav-bar size="Lg" navbar-style="Dark_Warning"> + <a abp-navbar-brand href="#">Navbar</a> + <abp-navbar-toggle> + <abp-navbar-nav> + <abp-nav-item active="true"> + <a abp-nav-link href="#">Home <span class="sr-only">(current)</span></a> + </abp-nav-item> + <abp-nav-item> + <a abp-nav-link href="#">Link</a> + </abp-nav-item> + <abp-nav-item dropdown="true"> + <abp-dropdown> + <abp-dropdown-button nav-link="true" text="Dropdown" /> + <abp-dropdown-menu> + <abp-dropdown-header>Dropdown header</abp-dropdown-header> + <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item> + <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item> + <abp-dropdown-item href="#">Something else here</abp-dropdown-item> + <abp-dropdown-divider /> + <abp-dropdown-item href="#">Separated link</abp-dropdown-item> + </abp-dropdown-menu> + </abp-dropdown> + </abp-nav-item> + <abp-nav-item> + <a abp-nav-link disabled="true" href="#">Disabled</a> + </abp-nav-item> + </abp-navbar-nav> + <span abp-navbar-text> + Sample Text + </span> + </abp-navbar-toggle> +</abp-nav-bar> ++ + </ul> + </div> +</nav> ++<nav class="navbar navbar-expand-lg navbar-dark bg-warning"> + <a href="#" class="navbar-brand">Navbar</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#13da550319ec478099dd4c9c3efb3d09" aria-controls="13da550319ec478099dd4c9c3efb3d09" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button><div class="collapse navbar-collapse" id="13da550319ec478099dd4c9c3efb3d09"> + <ul class="navbar-nav"> + <li active="true" class="nav-item"> + <a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a> + </li> + <li class="nav-item"> + <a href="#" class="nav-link">Link</a> + </li> + <li class="nav-item dropdown"> + <div class="btn-group"> + <a class="dropdown-toggle btn nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-busy-text="Processing..." roles="button" href="#"><span>Dropdown</span></a> + <div></div> + <div class="dropdown-menu"> + <h6 class="dropdown-header">Dropdown header</h6> + <a href="#" class="dropdown-item active">Action</a> + <a href="#" class="dropdown-item disabled">Another disabled action</a> + <a href="#" class="dropdown-item">Something else here</a> + <div class="dropdown-divider"></div> + <a href="#" class="dropdown-item">Separated link</a> + </div> + </div> + </li> + <li class="nav-item"> + <a href="#" class="nav-link disabled">Disabled</a> + </li> + <span class="navbar-text"> Sample Text </span> - </abp-navbar-toggle> - </abp-nav-bar> -
Paginator
+@section scripts { +# Paginator Examples
+ + + -
-
-
-
- Paginator
+ + +Example
-
-
--<abp-paginator model="Model.PagerModel"/> --
-
-
-
-
+
+
+
+
+
+
+
--<abp-paginator model="Model.PagerModel" show-info="true"/> -+
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Pagination;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
+{
+ public class PaginatorModel : PageModel
+ {
+ public PagerModel PagerModel { get; set; }
+
+ public void OnGet(int currentPage, string sort)
+ {
+ PagerModel = new PagerModel(100, 10, currentPage, 10, "Paginator", sort);
+ }
+ }
+}
+
+<abp-paginator model="Model.PagerModel" show-info="true" />
+
+<div class="row mt-3">
+ <div class="col-sm-12 col-md-5">
+ Showing 80 to 90 of 100 entries.
+ </div>
+ <div class="col-sm-12 col-md-7">
+ <nav aria-label="Page navigation">
+ <ul class="pagination justify-localizationKey-end">
+ <li class="page-item ">
+ <a tabindex="-1" class="page-link" href="/Components/Paginator?currentPage=7">Previous</a>
+ </li>
+ <li class="page-item ">
+ <a tabindex="-1" class="page-link" href="/Components/Paginator?currentPage=1">1</a>
+ </li>
+ <li class="page-item ">
+ <a tabindex="-1" class="page-link" href="/Components/Paginator?currentPage=2">2</a>
+ </li>
+ <li class="page-item ">
+ <span class="page-link gap">…</span>
+ </li>
+ <li class="page-item ">
+ <a tabindex="-1" class="page-link" href="/Components/Paginator?currentPage=7">7</a>
+ </li>
+ <li class="page-item active">
+ <span class="page-link">
+ 8
+ <span class="sr-only">(current)</span>
+ </span>
+ </li>
+ <li class="page-item ">
+ <a tabindex="-1" class="page-link" href="/Components/Paginator?currentPage=9">9</a>
+ </li>
+ <li class="page-item ">
+ <a tabindex="-1" class="page-link" href="/Components/Paginator?currentPage=10">10</a>
+ </li>
+ <li class="page-item ">
+ <a tabindex="-1" class="page-link" href="/Components/Paginator?currentPage=9">Next</a>
+ </li>
+ </ul>
+ <!-- nav-->
+ </nav></div>
+</div>
+Popovers
Based on Bootstrap Popovers.
-# Popovers Examples
+ +Example
@@ -31,23 +45,41 @@
Disabled Popover
-
-
+
+
-<abp-button abp-popover="Hi, i'm popover content!"> - Popover Default ++ ++ + ++<abp-button abp-popover="Hi, i'm popover content!"> + Popover Default </abp-button> -<abp-button abp-popover-top="Hi, i'm popover content!" title="Popover Title"> - Popover With Title +<abp-button abp-popover-top="Hi, i'm popover content!" title="Popover Title"> + Popover With Title </abp-button> -<abp-button abp-popover-right="Hi, i'm popover content!" title="Popover Title" dismissible="true"> - Dismissible Popover +<abp-button abp-popover-right="Hi, i'm popover content!" title="Popover Title" dismissible="true"> + Dismissible Popover </abp-button> -<abp-button abp-popover-left="Hi, i'm popover content!" title="Popover Title" disabled="true"> - Disabled Popover +<abp-button abp-popover-left="Hi, i'm popover content!" title="Popover Title" disabled="true"> + Disabled Popover </abp-button> -
+<button class="btn" type="button" data-busy-text="Processing..." data-toggle="popover" data-placement="bottom" data-content="Hi, i'm popover content!" data-original-title="" title="">
+ Popover Default
+</button>
+<button title="" class="btn" type="button" data-busy-text="Processing..." data-toggle="popover" data-placement="top" data-content="Hi, i'm popover content!" data-original-title="Popover Title">
+ Popover With Title
+</button>
+<button title="" class="btn" type="button" data-busy-text="Processing..." data-toggle="popover" data-placement="right" data-content="Hi, i'm popover content!" data-trigger="focus" data-original-title="Popover Title">
+ Dismissible Popover
+</button>
+<span class="d-inline-block" title="" data-placement="left" data-toggle="popover" data-content="Hi, i'm popover content!" data-original-title="Popover Title"><button title="Popover Title" class="btn" type="button" data-busy-text="Processing..." style="pointer-events: none;">
+ Disabled Popover
+</button></span>
+Based on Bootstrap Progress Bars.
-# Progress Bar Examples
+ +Example
-
-
+
-
-
- %25
-
-
+ %25
-
-
-
-
+
-
-
- %50
-
-
+ %50
-
-
-
-
- %10
-
-
-
-
+
+ %10
+
-
-
-
-
-
-<abp-progress> - <abp-progress-bar value="70"/> -</abp-progress> ++ ++ + +++<abp-progress-bar value="70" /> + +<abp-progress-bar type="Warning" value="25"> %25 </abp-progress-bar> + +<abp-progress-bar type="Success" value="40" strip="true"/> + +<abp-progress-bar type="Dark" value="10" min-value="5" max-value="15" strip="true"> %50 </abp-progress-bar> + +<abp-progress-group> + <abp-progress-part type="Success" value="25"/> + <abp-progress-part type="Danger" value="10" strip="true"> %10 </abp-progress-part> + <abp-progress-part type="Primary" value="50" animation="true" strip="true" /> +</abp-progress-group> ++ +<div class="progress"> + <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> + <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"> %10 </div> + <div class="progress-bar progress-bar-animated progress-bar-striped bg-primary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> +</div> ++<div class="progress"> + <div class="progress-bar" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div> +</div> -<abp-progress> - <abp-progress-bar type="Warning" value="25">%25</abp-progress-bar> -</abp-progress> +<div class="progress"> + <div class="progress-bar bg-warning" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> %25 </div> +</div> -<abp-progress> - <abp-progress-bar type="Success" value="40" strip="true"/> -</abp-progress> +<div class="progress"> + <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div> +</div> -<abp-progress> - <abp-progress-bar type="Dark" value="10" min-value="5" max-value="15" strip="true">%50</abp-progress-bar> -</abp-progress> +<div class="progress"> + <div class="progress-bar progress-bar-striped bg-dark" role="progressbar" style="width: 50%" aria-valuenow="10" aria-valuemin="5" aria-valuemax="15"> %50 </div> +</div> -<abp-progress> - <abp-progress-bar type="Success" value="25"/> - <abp-progress-bar type="Danger" value="10" strip="true">%10</abp-progress-bar> - <abp-progress-bar type="Primary" value="50" animation="true" strip="true"/> -</abp-progress> -
Tables
Based on Bootstrap Tables.
-# Tables Examples
+Examples
-
-
+
+
#
First
@@ -33,9 +46,9 @@
1
Mark
Otto
- mdo
+ mdo
-
+
2
Jacob
Thornton
@@ -43,46 +56,413 @@
3
- Larry
+ Larry
the Bird
twitter
-
+ @*
+}
+
+
+
+
+
+
-
-
-
+
Content_Home
@@ -109,28 +194,56 @@
-
-
+
Content_Home
@@ -142,8 +255,10 @@
+
+
-
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/highlightCode.js b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/highlightCode.js
new file mode 100644
index 0000000000..a20784d518
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/highlightCode.js
@@ -0,0 +1,5 @@
+$(document).ready(function () {
+ $('pre code').each(function (i, block) {
+ hljs.highlightBlock(block);
+ });
+});
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml
index 9164ee5d87..39c62bfb96 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Index.cshtml
@@ -7,27 +7,28 @@
-
+
+
+- <abp-table striped-rows="true" small="true" hoverable-rows="true" responsive-sm="true"> - <thead theme="Dark"> ++ + ++ + +++<abp-table hoverable-rows="true" responsive-sm="true"> + <thead> + <tr> + <th scope="Column">#</th> + <th scope="Column">First</th> + <th scope="Column">Last</th> + <th scope="Column">Handle</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="Row">1</th> + <td>Mark</td> + <td>Otto</td> + <td table-style="Danger">mdo</td> + </tr> + <tr table-style="Warning"> + <th scope="Row">2</th> + <td>Jacob</td> + <td>Thornton</td> + <td>fat</td> + </tr> + <tr> + <th scope="Row">3</th> + <td table-style="Success">Larry</td> + <td>the Bird</td> + <td>twitter</td> + </tr> + </tbody> +</abp-table> ++ + </table> +</div> ++<div class="table-responsive-sm"> + <table class="table table-hover"> + <thead> <tr> - <th scope="Column">#</th> - <th scope="Column">First</th> - <th scope="Column">Last</th> - <th scope="Column">Handle</th> + <th scope="col">#</th> + <th scope="col">First</th> + <th scope="col">Last</th> + <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> - <th scope="Row">1</th> + <th scope="row">1</th> <td>Mark</td> <td>Otto</td> - <td abp-table-style="Danger">mdo</td> + <td class="table-danger">mdo</td> </tr> - <tr abp-table-style="Warning"> - <th scope="Row">2</th> + <tr class="table-warning"> + <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>fat</td> </tr> <tr> - <th scope="Row">3</th> - <td abp-table-style="Success">Larry</td> + <th scope="row">3</th> + <td class="table-success">Larry</td> <td>the Bird</td> <td>twitter</td> </tr> </tbody> - </abp-table> -
+
+
+
+
+
+
+
+ #
+ First
+ Last
+ Handle
+
+
+
+
+ 1
+ Mark
+ Otto
+ mdo
+
+
+ 2
+ Jacob
+ Thornton
+ fat
+
+
+ 3
+ Larry
+ the Bird
+ twitter
+
+
+
+
+
+
+
+
+
+
+
+
+
+<abp-table small="true" striped-rows="true" border-style="Bordered">
+ <thead Theme="Dark">
+ <tr>
+ <th scope="Column">#</th>
+ <th scope="Column">First</th>
+ <th scope="Column">Last</th>
+ <th scope="Column">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="Row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>mdo</td>
+ </tr>
+ <tr>
+ <th scope="Row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>fat</td>
+ </tr>
+ <tr>
+ <th scope="Row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>twitter</td>
+ </tr>
+ </tbody>
+</abp-table>
+
+<table class="table table-sm table-striped table-bordered">
+ <thead class="thead-dark">
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>twitter</td>
+ </tr>
+ </tbody>
+</table>
+
+
+
+
+
+
+
+ List of users
+
+
+ #
+ First
+ Last
+ Handle
+
+
+
+
+ 1
+ Mark
+ Otto
+ mdo
+
+
+ 2
+ Jacob
+ Thornton
+ fat
+
+
+ 3
+ Larry
+ the Bird
+ twitter
+
+
+
+
+
+
+
+
+
+
+
+
+
+<abp-table striped-rows="true" dark-theme="true">
+ <caption>List of users</caption>
+ <thead>
+ <tr>
+ <th scope="Column">#</th>
+ <th scope="Column">First</th>
+ <th scope="Column">Last</th>
+ <th scope="Column">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="Row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>mdo</td>
+ </tr>
+ <tr>
+ <th scope="Row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>fat</td>
+ </tr>
+ <tr>
+ <th scope="Row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>twitter</td>
+ </tr>
+ </tbody>
+</abp-table>
+
+<table class="table table-dark table-striped">
+ <caption>List of users</caption>
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>twitter</td>
+ </tr>
+ </tbody>
+</table>
+
+
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tabs.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tabs.cshtml
index c2c17a389d..367fe710b2 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tabs.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tabs.cshtml
@@ -10,19 +10,33 @@
}
+@section scripts {
+
+
+
+
+
+ #
+ First
+ Last
+ Handle
+
+
+
+
+ 1
+ Mark
+ Otto
+ mdo
+
+
+ 2
+ Jacob
+ Thornton
+ fat
+
+
+ 3
+ Larry
+ the Bird
+ twitter
+
+
+
+
+
+
+
+
+
+
+
+<abp-table border-style="Borderless">
+ <thead>
+ <tr>
+ <th scope="Column">#</th>
+ <th scope="Column">First</th>
+ <th scope="Column">Last</th>
+ <th scope="Column">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="Row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>mdo</td>
+ </tr>
+ <tr>
+ <th scope="Row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>fat</td>
+ </tr>
+ <tr>
+ <th scope="Row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>twitter</td>
+ </tr>
+ </tbody>
+</abp-table>
+
+<table class="table table-borderless">
+ <thead>
+ <tr>
+ <th scope="col">#</th>
+ <th scope="col">First</th>
+ <th scope="col">Last</th>
+ <th scope="col">Handle</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>twitter</td>
+ </tr>
+ </tbody>
+</table>
+Tabs
Based on Bootstrap tab.
-# Most Simple Tabs Example
+Example
+
Content_Home
-
Content_Profile
@@ -37,14 +51,16 @@
-
+
+
-<abp-tabs name="TabId"> ++ ++ + ++<abp-tabs> <abp-tab title="Home"> - Content_Home - </abp-tab> - <abp-tab-link title="Link" name="LinkId" href="#"/> + Content_Home + </abp-tab> + <abp-tab-link title="Link" href="#" /> <abp-tab title="profile"> - Content_Profile + Content_Profile </abp-tab> <abp-tab-dropdown title="Contact" name="ContactDropdown"> <abp-tab title="Contact 1" parent-dropdown-name="ContactDropdown"> @@ -55,11 +71,44 @@ </abp-tab> </abp-tab-dropdown> </abp-tabs> -
+<div>
+ <ul class="nav nav-tabs" id="48c14227782f4edab7f153b413ac1429" role="tablist">
+ <li class="nav-item"><a class="nav-link active" id="48c14227782f4edab7f153b413ac1429_0-tab" data-toggle="tab" href="#48c14227782f4edab7f153b413ac1429_0" role="tab" aria-controls="48c14227782f4edab7f153b413ac1429_0" aria-selected="true">Home</a></li>
+ <li class="nav-item"><a class="nav-link" id="LinkId-tab" href="#">Link</a></li>
+ <li class="nav-item"><a class="nav-link" id="48c14227782f4edab7f153b413ac1429_2-tab" data-toggle="tab" href="#48c14227782f4edab7f153b413ac1429_2" role="tab" aria-controls="48c14227782f4edab7f153b413ac1429_2" aria-selected="false">profile</a></li>
+ <li class="nav-item dropdown">
+ <a class="nav-link dropdown-toggle" id="ContactDropdown-tab" data-toggle="dropdown" href="#ContactDropdown" role="button" aria-haspopup="true" aria-expanded="false">Contact</a><div class="dropdown-menu">
+ <a class="dropdown-item" id="48c14227782f4edab7f153b413ac1429_3-tab" href="#48c14227782f4edab7f153b413ac1429_3" data-toggle="tab" role="tab" aria-controls="48c14227782f4edab7f153b413ac1429_3" aria-selected="false">Contact 1</a>
+ <a class="dropdown-item" id="48c14227782f4edab7f153b413ac1429_4-tab" href="#48c14227782f4edab7f153b413ac1429_4" data-toggle="tab" role="tab" aria-controls="48c14227782f4edab7f153b413ac1429_4" aria-selected="false">Contact 2</a>
+ </div>
+ </li>
+ </ul>
+ <div class="tab-content" id="48c14227782f4edab7f153b413ac1429Content">
+ <div class="tab-pane fade show active" id="48c14227782f4edab7f153b413ac1429_0" role="tabpanel" aria-labelledby="48c14227782f4edab7f153b413ac1429_0-tab">
+ Content_Home
+ </div>
+ <div class="tab-pane fade" id="48c14227782f4edab7f153b413ac1429_2" role="tabpanel" aria-labelledby="48c14227782f4edab7f153b413ac1429_2-tab">
+ Content_Profile
+ </div>
+ <div class="tab-pane fade" id="48c14227782f4edab7f153b413ac1429_3" role="tabpanel" aria-labelledby="48c14227782f4edab7f153b413ac1429_3-tab">
+ Content_1_Content
+ </div>
+ <div class="tab-pane fade" id="48c14227782f4edab7f153b413ac1429_4" role="tabpanel" aria-labelledby="48c14227782f4edab7f153b413ac1429_4-tab">
+ Content_2_Content
+ </div>
+ </div>
+</div>
+# Tabs With Name Attiribute Example
+Tab attributes
@@ -76,7 +125,9 @@
-
+
+
+
+ ++ ++ + +<abp-tabs name="TabId"> <abp-tab name="nav-home" title="Home"> Content_Home @@ -88,16 +139,50 @@ Content_Contact </abp-tab> </abp-tabs> -
+<div>
+ <ul class="nav nav-tabs" id="TabId" role="tablist">
+ <li class="nav-item"><a class="nav-link" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="false">Home</a></li>
+ <li class="nav-item"><a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">profile</a></li>
+ <li class="nav-item"><a class="nav-link active show" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="true">Contact</a></li>
+ </ul>
+ <div class="tab-content" id="TabIdContent">
+ <div class="tab-pane fade" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
+ Content_Home
+ </div>
+ <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
+ Content_Profile
+ </div>
+ <div class="tab-pane fade active show" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
+ Content_Contact
+ </div>
+ </div>
+</div>
+
+
-
+
- + name: Sets "id" attribute of generated elements. Default value is a Guid. Not needed unless tabs are changed or modified with Jquery. + +
- + active: Sets the active tab. + +
# Pill Example
+Pill Example
-
+
+
-<abp-tabs tab-style="Pill" > - <abp-tab active="true" title="Home"> - Content_Home - </abp-tab> ++ ++ + + ++<abp-tabs tab-style="Pill"> + <abp-tab title="Home"> + Content_Home + </abp-tab> <abp-tab title="profile"> - Content_Profile + Content_Profile </abp-tab> <abp-tab title="Contact"> - Content_Contact + Content_Contact </abp-tab> </abp-tabs> -
+<div>
+ <ul class="nav nav-pills" id="2eaad131e42c4a90962fcb3c4e55c946" role="tablist">
+ <li class="nav-item"><a class="nav-link active" id="2eaad131e42c4a90962fcb3c4e55c946_0-tab" data-toggle="pill" href="#2eaad131e42c4a90962fcb3c4e55c946_0" role="tab" aria-controls="2eaad131e42c4a90962fcb3c4e55c946_0" aria-selected="true">Home</a></li>
+ <li class="nav-item"><a class="nav-link" id="2eaad131e42c4a90962fcb3c4e55c946_1-tab" data-toggle="pill" href="#2eaad131e42c4a90962fcb3c4e55c946_1" role="tab" aria-controls="2eaad131e42c4a90962fcb3c4e55c946_1" aria-selected="false">profile</a></li>
+ <li class="nav-item"><a class="nav-link" id="2eaad131e42c4a90962fcb3c4e55c946_2-tab" data-toggle="pill" href="#2eaad131e42c4a90962fcb3c4e55c946_2" role="tab" aria-controls="2eaad131e42c4a90962fcb3c4e55c946_2" aria-selected="false">Contact</a></li>
+ </ul>
+ <div class="tab-content" id="2eaad131e42c4a90962fcb3c4e55c946Content">
+ <div class="tab-pane fade show active" id="2eaad131e42c4a90962fcb3c4e55c946_0" role="tabpanel" aria-labelledby="2eaad131e42c4a90962fcb3c4e55c946_0-tab">
+ Content_Home
+ </div>
+ <div class="tab-pane fade" id="2eaad131e42c4a90962fcb3c4e55c946_1" role="tabpanel" aria-labelledby="2eaad131e42c4a90962fcb3c4e55c946_1-tab">
+ Content_Profile
+ </div>
+ <div class="tab-pane fade" id="2eaad131e42c4a90962fcb3c4e55c946_2" role="tabpanel" aria-labelledby="2eaad131e42c4a90962fcb3c4e55c946_2-tab">
+ Content_Contact
+ </div>
+ </div>
+</div>
+
+# Vertical Example
+Vertical Example
-
+
+
--<abp-tabs name="TabId" tab-style="Pill" vertical-header-size="_2" > ++ ++ + + ++<abp-tabs tab-style="PillVertical" vertical-header-size="_2" > <abp-tab active="true" title="Home"> Content_Home </abp-tab> @@ -154,6 +269,44 @@ Content_Contact </abp-tab> </abp-tabs> -
+<div class="row">
+ <div class="col-2">
+ <ul class="nav flex-column nav-pills" id="2f347a2276af424ebbd67f85653edf1f" role="tablist">
+ <li class="nav-item"><a class="nav-link active" id="2f347a2276af424ebbd67f85653edf1f_0-tab" data-toggle="pill" href="#2f347a2276af424ebbd67f85653edf1f_0" role="tab" aria-controls="2f347a2276af424ebbd67f85653edf1f_0" aria-selected="true">Home</a></li>
+ <li class="nav-item"><a class="nav-link" id="2f347a2276af424ebbd67f85653edf1f_1-tab" data-toggle="pill" href="#2f347a2276af424ebbd67f85653edf1f_1" role="tab" aria-controls="2f347a2276af424ebbd67f85653edf1f_1" aria-selected="false">profile</a></li>
+ <li class="nav-item"><a class="nav-link" id="2f347a2276af424ebbd67f85653edf1f_2-tab" data-toggle="pill" href="#2f347a2276af424ebbd67f85653edf1f_2" role="tab" aria-controls="2f347a2276af424ebbd67f85653edf1f_2" aria-selected="false">Contact</a></li>
+ </ul>
+ </div>
+ <div class="col-10">
+ <div class="tab-content" id="2f347a2276af424ebbd67f85653edf1fContent">
+ <div class="tab-pane fade show active" id="2f347a2276af424ebbd67f85653edf1f_0" role="tabpanel" aria-labelledby="2f347a2276af424ebbd67f85653edf1f_0-tab">
+ Content_Home
+ </div>
+ <div class="tab-pane fade" id="2f347a2276af424ebbd67f85653edf1f_1" role="tabpanel" aria-labelledby="2f347a2276af424ebbd67f85653edf1f_1-tab">
+ Content_Profile
+ </div>
+ <div class="tab-pane fade" id="2f347a2276af424ebbd67f85653edf1f_2" role="tabpanel" aria-labelledby="2f347a2276af424ebbd67f85653edf1f_2-tab">
+ Content_Contact
+ </div>
+ </div>
+ </div>
+</div>
+
+
+
+
\ No newline at end of file
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tooltips.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tooltips.cshtml
index fe0aeebae4..a5bc9f27db 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tooltips.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tooltips.cshtml
@@ -1,7 +1,7 @@
@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.TooltipsModel
@{
- ViewData["Title"] = "Badges";
+ ViewData["Title"] = "Tooltips";
}
@section styles {
@@ -14,46 +14,77 @@
-
+
- + vertical-header-size: Sets the column width of tab headers. + +
Based on Bootstrap Tooltips.
-# Tooltips Examples
+Example
-
+
Tooltip Default
-
+
Tooltip on top
-
+
Tooltip on right
-
+
Tooltip on bottom
-
- Tooltip on left
+
+ Disabled button Tooltip
-
-
+
+
-<abp-button abp-tooltip="Tooltip Default"> - Tooltip Default ++ ++ + ++<abp-button abp-tooltip="Tooltip"> + Tooltip Default </abp-button> -<abp-button abp-tooltip-top="Tooltip on top"> - Tooltip on top + +<abp-button abp-tooltip-top="Tooltip"> + Tooltip on top </abp-button> -<abp-button abp-tooltip-right="Tooltip on right"> - Tooltip on right + +<abp-button abp-tooltip-right="Tooltip"> + Tooltip on right </abp-button> -<abp-button abp-tooltip-bottom="Tooltip on bottom"> - Tooltip on bottom + +<abp-button abp-tooltip-bottom="Tooltip"> + Tooltip on bottom </abp-button> -<abp-button abp-tooltip-left="Tooltip on left"> - Tooltip on left + +<abp-button disabled="true" abp-tooltip="Tooltip"> + Disabled button Tooltip </abp-button> -
+<button class="btn" type="button" data-busy-text="Processing..." data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip">
+ Tooltip Default
+</button>
+
+<button class="btn" type="button" data-busy-text="Processing..." data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip">
+ Tooltip on top
+</button>
+
+<button class="btn" type="button" data-busy-text="Processing..." data-toggle="tooltip" data-placement="right" title="" data-original-title="Tooltip">
+ Tooltip on right
+</button>
+
+<button class="btn" type="button" data-busy-text="Processing..." data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip">
+ Tooltip on bottom
+</button>
+
+<span class="d-inline-block" tabindex="0" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip">
+ <button class="btn" disabled="disabled" type="button" data-busy-text="Processing..." data-placement="top" style="pointer-events: none;">
+ Disabled button Tooltip
+ </button>
+</span>
+Components
-
-
- Buttons -
- Grids -
- Cards -
- Dynamic Forms -
- Tabs -
- Dropdowns
- Alerts
- Badges -
- Modals -
- Collapse -
- Tooltips -
- Popovers + @*
- > Blockquotes *@ +
- Borders
- Breadcrumbs -
- Progress Bars -
- Blockquotes -
- Images +
- Buttons +
- Button Groups +
- Cards
- Carousel +
- Collapse +
- Dropdowns +
- Dynamic Forms +
- Form Elements +
- > Grids
- List Groups -
- Tables +
- Modals
- Navs -
- Borders
- Paginator +
- Popovers +
- Progress Bars +
- Tables +
- Tabs +
- Tooltips
` tags; it tries
+to detect the language automatically. If automatic detection doesn’t
+work for you, you can specify the language in the `class` attribute:
+
+```html
+...
+```
+
+The list of supported language classes is available in the [class
+reference][2]. Classes can also be prefixed with either `language-` or
+`lang-`.
+
+To make arbitrary text look like code, but without highlighting, use the
+`plaintext` class:
+
+```html
+...
+```
+
+To disable highlighting altogether use the `nohighlight` class:
+
+```html
+...
+```
+
+## Custom Initialization
+
+When you need a bit more control over the initialization of
+highlight.js, you can use the [`highlightBlock`][3] and [`configure`][4]
+functions. This allows you to control *what* to highlight and *when*.
+
+Here’s an equivalent way to calling [`initHighlightingOnLoad`][1] using
+jQuery:
+
+```javascript
+$(document).ready(function() {
+ $('pre code').each(function(i, block) {
+ hljs.highlightBlock(block);
+ });
+});
+```
+
+You can use any tags instead of `` to mark up your code. If
+you don't use a container that preserves line breaks you will need to
+configure highlight.js to use the `
` tag:
+
+```javascript
+hljs.configure({useBR: true});
+
+$('div.code').each(function(i, block) {
+ hljs.highlightBlock(block);
+});
+```
+
+For other options refer to the documentation for [`configure`][4].
+
+
+## Web Workers
+
+You can run highlighting inside a web worker to avoid freezing the browser
+window while dealing with very big chunks of code.
+
+In your main script:
+
+```javascript
+addEventListener('load', function() {
+ var code = document.querySelector('#code');
+ var worker = new Worker('worker.js');
+ worker.onmessage = function(event) { code.innerHTML = event.data; }
+ worker.postMessage(code.textContent);
+})
+```
+
+In worker.js:
+
+```javascript
+onmessage = function(event) {
+ importScripts('/highlight.pack.js');
+ var result = self.hljs.highlightAuto(event.data);
+ postMessage(result.value);
+}
+```
+
+
+## Getting the Library
+
+You can get highlight.js as a hosted, or custom-build, browser script or
+as a server module. Right out of the box the browser script supports
+both AMD and CommonJS, so if you wish you can use RequireJS or
+Browserify without having to build from source. The server module also
+works perfectly fine with Browserify, but there is the option to use a
+build specific to browsers rather than something meant for a server.
+Head over to the [download page][5] for all the options.
+
+**Don't link to GitHub directly.** The library is not supposed to work straight
+from the source, it requires building. If none of the pre-packaged options
+work for you refer to the [building documentation][6].
+
+**The CDN-hosted package doesn't have all the languages.** Otherwise it'd be
+too big. If you don't see the language you need in the ["Common" section][5],
+it can be added manually:
+
+```html
+
+```
+
+**On Almond.** You need to use the optimizer to give the module a name. For
+example:
+
+```
+r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js
+```
+
+
+### CommonJS
+
+You can import Highlight.js as a CommonJS-module:
+
+```bash
+npm install highlight.js --save
+```
+
+In your application:
+
+```javascript
+import hljs from 'highlight.js';
+```
+
+The default import imports all languages! Therefore it is likely to be more efficient to import only the library and the languages you need:
+
+```javascript
+import hljs from 'highlight.js/lib/highlight';
+import javascript from 'highlight.js/lib/languages/javascript';
+hljs.registerLanguage('javascript', javascript);
+```
+
+To set the syntax highlighting style, if your build tool processes CSS from your JavaScript entry point, you can import the stylesheet directly into your CommonJS-module:
+
+```javascript
+import hljs from 'highlight.js/lib/highlight';
+import 'highlight.js/styles/github.css'
+```
+
+## License
+
+Highlight.js is released under the BSD License. See [LICENSE][7] file
+for details.
+
+## Links
+
+The official site for the library is at
`` tags instead of new-line characters. Options are set globally with ``configure``.
+
+Accepts a string with the highlighted markup.
+
+
+``highlightBlock(block)``
+-------------------------
+
+Applies highlighting to a DOM node containing code.
+
+This function is the one to use to apply highlighting dynamically after page load
+or within initialization code of third-party Javascript frameworks.
+
+The function uses language detection by default but you can specify the language
+in the ``class`` attribute of the DOM node. See the :doc:`class reference
+` for all available language names and aliases.
+
+
+``configure(options)``
+----------------------
+
+Configures global options:
+
+* ``tabReplace``: a string used to replace TAB characters in indentation.
+* ``useBR``: a flag to generate ``
`` tags instead of new-line characters in the output, useful when code is marked up using a non-```` container.
+* ``classPrefix``: a string prefix added before class names in the generated markup, used for backwards compatibility with stylesheets.
+* ``languages``: an array of language names and aliases restricting auto detection to only these languages.
+
+Accepts an object representing options with the values to updated. Other options don't change
+::
+
+ hljs.configure({
+ tabReplace: ' ', // 4 spaces
+ classPrefix: '' // don't append class prefix
+ // … other options aren't changed
+ })
+ hljs.initHighlighting();
+
+
+``initHighlighting()``
+----------------------
+
+Applies highlighting to all ``..
`` blocks on a page.
+
+
+
+``initHighlightingOnLoad()``
+----------------------------
+
+Attaches highlighting to the page load event.
+
+
+``registerLanguage(name, language)``
+------------------------------------
+
+Adds new language to the library under the specified name. Used mostly internally.
+
+* ``name``: a string with the name of the language being registered
+* ``language``: a function that returns an object which represents the
+ language definition. The function is passed the ``hljs`` object to be able
+ to use common regular expressions defined within it.
+
+
+``listLanguages()``
+----------------------------
+
+Returns the languages names list.
+
+
+
+.. _getLanguage:
+
+
+``getLanguage(name)``
+---------------------
+
+Looks up a language by name or alias.
+
+Returns the language object if found, ``undefined`` otherwise.
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/building-testing.rst b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/building-testing.rst
new file mode 100644
index 0000000000..16292cb84a
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/building-testing.rst
@@ -0,0 +1,88 @@
+Building and testing
+====================
+
+To actually run highlight.js it is necessary to build it for the environment
+where you're going to run it: a browser, the node.js server, etc.
+
+
+Building
+--------
+
+The build tool is written in JavaScript using node.js. Before running the
+script, make sure to have node installed and run ``npm install`` to get the
+dependencies.
+
+The tool is located in ``tools/build.js``. A few useful examples:
+
+* Build for a browser using only common languages::
+
+ node tools/build.js :common
+
+* Build for node.js including all available languages::
+
+ node tools/build.js -t node
+
+* Build two specific languages for debugging, skipping compression in this case::
+
+ node tools/build.js -n python ruby
+
+On some systems the node binary is named ``nodejs``; simply replace ``node``
+with ``nodejs`` in the examples above if that is the case.
+
+The full option reference is available with the usual ``--help`` option.
+
+The build result will be in the ``build/`` directory.
+
+.. _basic-testing:
+
+Basic testing
+-------------
+
+The usual approach to debugging and testing a language is first doing it
+visually. You need to build highlight.js with only the language you're working
+on (without compression, to have readable code in browser error messages) and
+then use the Developer tool in ``tools/developer.html`` to see how it highlights
+a test snippet in that language.
+
+A test snippet should be short and give the idea of the overall look of the
+language. It shouldn't include every possible syntactic element and shouldn't
+even make practical sense.
+
+After you satisfied with the result you need to make sure that language
+detection still works with your language definition included in the whole suite.
+
+Testing is done using `Mocha /default.txt``, build the package with all the languages
+for node and run the test suite. If your language breaks auto-detection, it
+should be fixed by :ref:`improving relevance `, which is a black art
+in and of itself. When in doubt, please refer to the discussion group!
+
+
+Testing markup
+--------------
+
+You can also provide additional markup tests for the language to test isolated
+cases of various syntactic construct. If your language has 19 different string
+literals or complicated heuristics for telling division (``/``) apart from
+regexes (``/ .. /``) -- this is the place.
+
+A test case consists of two files:
+
+* ``test/markup//.txt``: test code
+* ``test/markup//.expect.txt``: reference rendering
+
+To generate reference rendering use the Developer tool located at
+``tools/developer.html``. Make sure to explicitly select your language in the
+drop-down menu, as automatic detection is unlikely to work in this case.
+
+
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/css-classes-reference.rst b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/css-classes-reference.rst
new file mode 100644
index 0000000000..1975f235b8
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/css-classes-reference.rst
@@ -0,0 +1,460 @@
+CSS classes reference
+=====================
+
+
+Stylable classes
+----------------
+
++------------------------------------------------------------------------------+
+| **General-purpose** |
++--------------------------+---------------------------------------------------+
+| keyword | keyword in a regular Algol-style language |
++--------------------------+---------------------------------------------------+
+| built_in | built-in or library object (constant, class, |
+| | function) |
++--------------------------+---------------------------------------------------+
+| type | user-defined type in a language with first-class |
+| | syntactically significant types, like Haskell |
++--------------------------+---------------------------------------------------+
+| literal | special identifier for a built-in value ("true", |
+| | "false", "null") |
++--------------------------+---------------------------------------------------+
+| number | number, including units and modifiers, if any. |
++--------------------------+---------------------------------------------------+
+| regexp | literal regular expression |
++--------------------------+---------------------------------------------------+
+| string | literal string, character |
++--------------------------+---------------------------------------------------+
+| subst | parsed section inside a literal string |
++--------------------------+---------------------------------------------------+
+| symbol | symbolic constant, interned string, goto label |
++--------------------------+---------------------------------------------------+
+| class | class or class-level declaration (interfaces, |
+| | traits, modules, etc) |
++--------------------------+---------------------------------------------------+
+| function | function or method declaration |
++--------------------------+---------------------------------------------------+
+| title | name of a class or a function at the place of |
+| | declaration |
++--------------------------+---------------------------------------------------+
+| params | block of function arguments (parameters) at the |
+| | place of declaration |
++--------------------------+---------------------------------------------------+
+| **Meta** |
++--------------------------+---------------------------------------------------+
+| comment | comment |
++--------------------------+---------------------------------------------------+
+| doctag | documentation markup within comments |
++--------------------------+---------------------------------------------------+
+| meta | flags, modifiers, annotations, processing |
+| | instructions, preprocessor directive, etc |
++--------------------------+---------------------------------------------------+
+| meta-keyword | keyword or built-in within meta construct |
++--------------------------+---------------------------------------------------+
+| meta-string | string within meta construct |
++--------------------------+---------------------------------------------------+
+| **Tags, attributes, configs** |
++--------------------------+---------------------------------------------------+
+| section | heading of a section in a config file, heading in |
+| | text markup |
++--------------------------+---------------------------------------------------+
+| tag | XML/HTML tag |
++--------------------------+---------------------------------------------------+
+| name | name of an XML tag, the first word in an |
+| | s-expression |
++--------------------------+---------------------------------------------------+
+| builtin-name | s-expression name from the language standard |
+| | library |
++--------------------------+---------------------------------------------------+
+| attr | name of an attribute with no language defined |
+| | semantics (keys in JSON, setting names in .ini), |
+| | also sub-attribute within another highlighted |
+| | object, like XML tag |
++--------------------------+---------------------------------------------------+
+| attribute | name of an attribute followed by a structured |
+| | value part, like CSS properties |
++--------------------------+---------------------------------------------------+
+| variable | variable in a config or a template file, |
+| | environment var expansion in a script |
++--------------------------+---------------------------------------------------+
+| **Markup** |
++--------------------------+---------------------------------------------------+
+| bullet | list item bullet in text markup |
++--------------------------+---------------------------------------------------+
+| code | code block in text markup |
++--------------------------+---------------------------------------------------+
+| emphasis | emphasis in text markup |
++--------------------------+---------------------------------------------------+
+| strong | strong emphasis in text markup |
++--------------------------+---------------------------------------------------+
+| formula | mathematical formula in text markup |
++--------------------------+---------------------------------------------------+
+| link | hyperlink in text markup |
++--------------------------+---------------------------------------------------+
+| quote | quotation in text markup |
++--------------------------+---------------------------------------------------+
+| **CSS** |
++--------------------------+---------------------------------------------------+
+| selector-tag | tag selector in CSS |
++--------------------------+---------------------------------------------------+
+| selector-id | #id selector in CSS |
++--------------------------+---------------------------------------------------+
+| selector-class | .class selector in CSS |
++--------------------------+---------------------------------------------------+
+| selector-attr | [attr] selector in CSS |
++--------------------------+---------------------------------------------------+
+| selector-pseudo | :pseudo selector in CSS |
++--------------------------+---------------------------------------------------+
+| **Templates** |
++--------------------------+---------------------------------------------------+
+| template-tag | tag of a template language |
++--------------------------+---------------------------------------------------+
+| template-variable | variable in a template language |
++--------------------------+---------------------------------------------------+
+| **diff** |
++--------------------------+---------------------------------------------------+
+| addition | added or changed line in a diff |
++--------------------------+---------------------------------------------------+
+| deletion | deleted line in a diff |
++--------------------------+---------------------------------------------------+
+| **ReasonML** |
++--------------------------+---------------------------------------------------+
+| operator | reasonml operator such as pipe |
++--------------------------+---------------------------------------------------+
+| pattern-match | reasonml pattern matching matchers |
++--------------------------+---------------------------------------------------+
+| typing | type signatures on function parameters |
++--------------------------+---------------------------------------------------+
+| constructor | type constructors |
++--------------------------+---------------------------------------------------+
+| module-access | scope access into a ReasonML module |
++--------------------------+---------------------------------------------------+
+| module | ReasonML module reference within scope access |
++--------------------------+---------------------------------------------------+
+
+
+Language names and aliases
+--------------------------
+
++-------------------------+---------------------------------------------------+
+| 1C | 1c |
++-------------------------+---------------------------------------------------+
+| ABNF | abnf |
++-------------------------+---------------------------------------------------+
+| Access logs | accesslog |
++-------------------------+---------------------------------------------------+
+| Ada | ada |
++-------------------------+---------------------------------------------------+
+| ARM assembler | armasm, arm |
++-------------------------+---------------------------------------------------+
+| AVR assembler | avrasm |
++-------------------------+---------------------------------------------------+
+| ActionScript | actionscript, as |
++-------------------------+---------------------------------------------------+
+| AngelScript | angelscript, asc |
++-------------------------+---------------------------------------------------+
+| Apache | apache, apacheconf |
++-------------------------+---------------------------------------------------+
+| AppleScript | applescript, osascript |
++-------------------------+---------------------------------------------------+
+| Arcade | arcade |
++-------------------------+---------------------------------------------------+
+| AsciiDoc | asciidoc, adoc |
++-------------------------+---------------------------------------------------+
+| AspectJ | aspectj |
++-------------------------+---------------------------------------------------+
+| AutoHotkey | autohotkey |
++-------------------------+---------------------------------------------------+
+| AutoIt | autoit |
++-------------------------+---------------------------------------------------+
+| Awk | awk, mawk, nawk, gawk |
++-------------------------+---------------------------------------------------+
+| Axapta | axapta |
++-------------------------+---------------------------------------------------+
+| Bash | bash, sh, zsh |
++-------------------------+---------------------------------------------------+
+| Basic | basic |
++-------------------------+---------------------------------------------------+
+| BNF | bnf |
++-------------------------+---------------------------------------------------+
+| Brainfuck | brainfuck, bf |
++-------------------------+---------------------------------------------------+
+| C# | cs, csharp |
++-------------------------+---------------------------------------------------+
+| C++ | cpp, c, cc, h, c++, h++, hpp |
++-------------------------+---------------------------------------------------+
+| C/AL | cal |
++-------------------------+---------------------------------------------------+
+| Cache Object Script | cos, cls |
++-------------------------+---------------------------------------------------+
+| CMake | cmake, cmake.in |
++-------------------------+---------------------------------------------------+
+| Coq | coq |
++-------------------------+---------------------------------------------------+
+| CSP | csp |
++-------------------------+---------------------------------------------------+
+| CSS | css |
++-------------------------+---------------------------------------------------+
+| Cap’n Proto | capnproto, capnp |
++-------------------------+---------------------------------------------------+
+| Clojure | clojure, clj |
++-------------------------+---------------------------------------------------+
+| CoffeeScript | coffeescript, coffee, cson, iced |
++-------------------------+---------------------------------------------------+
+| Crmsh | crmsh, crm, pcmk |
++-------------------------+---------------------------------------------------+
+| Crystal | crystal, cr |
++-------------------------+---------------------------------------------------+
+| D | d |
++-------------------------+---------------------------------------------------+
+| DNS Zone file | dns, zone, bind |
++-------------------------+---------------------------------------------------+
+| DOS | dos, bat, cmd |
++-------------------------+---------------------------------------------------+
+| Dart | dart |
++-------------------------+---------------------------------------------------+
+| Delphi | delphi, dpr, dfm, pas, pascal, freepascal, |
+| | lazarus, lpr, lfm |
++-------------------------+---------------------------------------------------+
+| Diff | diff, patch |
++-------------------------+---------------------------------------------------+
+| Django | django, jinja |
++-------------------------+---------------------------------------------------+
+| Dockerfile | dockerfile, docker |
++-------------------------+---------------------------------------------------+
+| dsconfig | dsconfig |
++-------------------------+---------------------------------------------------+
+| DTS (Device Tree) | dts |
++-------------------------+---------------------------------------------------+
+| Dust | dust, dst |
++-------------------------+---------------------------------------------------+
+| EBNF | ebnf |
++-------------------------+---------------------------------------------------+
+| Elixir | elixir |
++-------------------------+---------------------------------------------------+
+| Elm | elm |
++-------------------------+---------------------------------------------------+
+| Erlang | erlang, erl |
++-------------------------+---------------------------------------------------+
+| Excel | excel, xls, xlsx |
++-------------------------+---------------------------------------------------+
+| F# | fsharp, fs |
++-------------------------+---------------------------------------------------+
+| FIX | fix |
++-------------------------+---------------------------------------------------+
+| Fortran | fortran, f90, f95 |
++-------------------------+---------------------------------------------------+
+| G-Code | gcode, nc |
++-------------------------+---------------------------------------------------+
+| Gams | gams, gms |
++-------------------------+---------------------------------------------------+
+| GAUSS | gauss, gss |
++-------------------------+---------------------------------------------------+
+| Gherkin | gherkin |
++-------------------------+---------------------------------------------------+
+| Go | go, golang |
++-------------------------+---------------------------------------------------+
+| Golo | golo, gololang |
++-------------------------+---------------------------------------------------+
+| Gradle | gradle |
++-------------------------+---------------------------------------------------+
+| Groovy | groovy |
++-------------------------+---------------------------------------------------+
+| HTML, XML | xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist |
++-------------------------+---------------------------------------------------+
+| HTTP | http, https |
++-------------------------+---------------------------------------------------+
+| Haml | haml |
++-------------------------+---------------------------------------------------+
+| Handlebars | handlebars, hbs, html.hbs, html.handlebars |
++-------------------------+---------------------------------------------------+
+| Haskell | haskell, hs |
++-------------------------+---------------------------------------------------+
+| Haxe | haxe, hx |
++-------------------------+---------------------------------------------------+
+| Hy | hy, hylang |
++-------------------------+---------------------------------------------------+
+| Ini, TOML | ini, toml |
++-------------------------+---------------------------------------------------+
+| Inform7 | inform7, i7 |
++-------------------------+---------------------------------------------------+
+| IRPF90 | irpf90 |
++-------------------------+---------------------------------------------------+
+| JSON | json |
++-------------------------+---------------------------------------------------+
+| Java | java, jsp |
++-------------------------+---------------------------------------------------+
+| JavaScript | javascript, js, jsx |
++-------------------------+---------------------------------------------------+
+| Leaf | leaf |
++-------------------------+---------------------------------------------------+
+| Lasso | lasso, ls, lassoscript |
++-------------------------+---------------------------------------------------+
+| Less | less |
++-------------------------+---------------------------------------------------+
+| LDIF | ldif |
++-------------------------+---------------------------------------------------+
+| Lisp | lisp |
++-------------------------+---------------------------------------------------+
+| LiveCode Server | livecodeserver |
++-------------------------+---------------------------------------------------+
+| LiveScript | livescript, ls |
++-------------------------+---------------------------------------------------+
+| Lua | lua |
++-------------------------+---------------------------------------------------+
+| Makefile | makefile, mk, mak |
++-------------------------+---------------------------------------------------+
+| Markdown | markdown, md, mkdown, mkd |
++-------------------------+---------------------------------------------------+
+| Mathematica | mathematica, mma |
++-------------------------+---------------------------------------------------+
+| Matlab | matlab |
++-------------------------+---------------------------------------------------+
+| Maxima | maxima |
++-------------------------+---------------------------------------------------+
+| Maya Embedded Language | mel |
++-------------------------+---------------------------------------------------+
+| Mercury | mercury |
++-------------------------+---------------------------------------------------+
+| Mizar | mizar |
++-------------------------+---------------------------------------------------+
+| Mojolicious | mojolicious |
++-------------------------+---------------------------------------------------+
+| Monkey | monkey |
++-------------------------+---------------------------------------------------+
+| Moonscript | moonscript, moon |
++-------------------------+---------------------------------------------------+
+| N1QL | n1ql |
++-------------------------+---------------------------------------------------+
+| NSIS | nsis |
++-------------------------+---------------------------------------------------+
+| Nginx | nginx, nginxconf |
++-------------------------+---------------------------------------------------+
+| Nimrod | nimrod, nim |
++-------------------------+---------------------------------------------------+
+| Nix | nix |
++-------------------------+---------------------------------------------------+
+| OCaml | ocaml, ml |
++-------------------------+---------------------------------------------------+
+| Objective C | objectivec, mm, objc, obj-c |
++-------------------------+---------------------------------------------------+
+| OpenGL Shading Language | glsl |
++-------------------------+---------------------------------------------------+
+| OpenSCAD | openscad, scad |
++-------------------------+---------------------------------------------------+
+| Oracle Rules Language | ruleslanguage |
++-------------------------+---------------------------------------------------+
+| Oxygene | oxygene |
++-------------------------+---------------------------------------------------+
+| PF | pf, pf.conf |
++-------------------------+---------------------------------------------------+
+| PHP | php, php3, php4, php5, php6 |
++-------------------------+---------------------------------------------------+
+| Parser3 | parser3 |
++-------------------------+---------------------------------------------------+
+| Perl | perl, pl, pm |
++-------------------------+---------------------------------------------------+
+| Plaintext: no highlight | plaintext |
++-------------------------+---------------------------------------------------+
+| Pony | pony |
++-------------------------+---------------------------------------------------+
+| PostgreSQL & PL/pgSQL | pgsql, postgres, postgresql |
++-------------------------+---------------------------------------------------+
+| PowerShell | powershell, ps |
++-------------------------+---------------------------------------------------+
+| Processing | processing |
++-------------------------+---------------------------------------------------+
+| Prolog | prolog |
++-------------------------+---------------------------------------------------+
+| Properties | properties |
++-------------------------+---------------------------------------------------+
+| Protocol Buffers | protobuf |
++-------------------------+---------------------------------------------------+
+| Puppet | puppet, pp |
++-------------------------+---------------------------------------------------+
+| Python | python, py, gyp |
++-------------------------+---------------------------------------------------+
+| Python profiler results | profile |
++-------------------------+---------------------------------------------------+
+| Q | k, kdb |
++-------------------------+---------------------------------------------------+
+| QML | qml |
++-------------------------+---------------------------------------------------+
+| R | r |
++-------------------------+---------------------------------------------------+
+| ReasonML | reasonml, re |
++-------------------------+---------------------------------------------------+
+| RenderMan RIB | rib |
++-------------------------+---------------------------------------------------+
+| RenderMan RSL | rsl |
++-------------------------+---------------------------------------------------+
+| Roboconf | graph, instances |
++-------------------------+---------------------------------------------------+
+| Ruby | ruby, rb, gemspec, podspec, thor, irb |
++-------------------------+---------------------------------------------------+
+| Rust | rust, rs |
++-------------------------+---------------------------------------------------+
+| SCSS | scss |
++-------------------------+---------------------------------------------------+
+| SQL | sql |
++-------------------------+---------------------------------------------------+
+| STEP Part 21 | p21, step, stp |
++-------------------------+---------------------------------------------------+
+| Scala | scala |
++-------------------------+---------------------------------------------------+
+| Scheme | scheme |
++-------------------------+---------------------------------------------------+
+| Scilab | scilab, sci |
++-------------------------+---------------------------------------------------+
+| Shell | shell, console |
++-------------------------+---------------------------------------------------+
+| Smali | smali |
++-------------------------+---------------------------------------------------+
+| Smalltalk | smalltalk, st |
++-------------------------+---------------------------------------------------+
+| Stan | stan |
++-------------------------+---------------------------------------------------+
+| Stata | stata |
++-------------------------+---------------------------------------------------+
+| SAS | SAS, sas |
++-------------------------+---------------------------------------------------+
+| Stylus | stylus, styl |
++-------------------------+---------------------------------------------------+
+| SubUnit | subunit |
++-------------------------+---------------------------------------------------+
+| Swift | swift |
++-------------------------+---------------------------------------------------+
+| Test Anything Protocol | tap |
++-------------------------+---------------------------------------------------+
+| Tcl | tcl, tk |
++-------------------------+---------------------------------------------------+
+| TeX | tex |
++-------------------------+---------------------------------------------------+
+| Thrift | thrift |
++-------------------------+---------------------------------------------------+
+| TP | tp |
++-------------------------+---------------------------------------------------+
+| Twig | twig, craftcms |
++-------------------------+---------------------------------------------------+
+| TypeScript | typescript, ts |
++-------------------------+---------------------------------------------------+
+| VB.Net | vbnet, vb |
++-------------------------+---------------------------------------------------+
+| VBScript | vbscript, vbs |
++-------------------------+---------------------------------------------------+
+| VHDL | vhdl |
++-------------------------+---------------------------------------------------+
+| Vala | vala |
++-------------------------+---------------------------------------------------+
+| Verilog | verilog, v |
++-------------------------+---------------------------------------------------+
+| Vim Script | vim |
++-------------------------+---------------------------------------------------+
+| x86 Assembly | x86asm |
++-------------------------+---------------------------------------------------+
+| XL | xl, tao |
++-------------------------+---------------------------------------------------+
+| XQuery | xpath, xq |
++-------------------------+---------------------------------------------------+
+| Zephir | zephir, zep |
++-------------------------+---------------------------------------------------+
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/index.rst b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/index.rst
new file mode 100644
index 0000000000..3288758bb5
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/index.rst
@@ -0,0 +1,44 @@
+.. highlight.js documentation master file, created by
+ sphinx-quickstart on Wed Sep 12 23:48:27 2012.
+ You can adapt this file completely to your liking, but it should at least
+ contain the root `toctree` directive.
+
+``highlight.js`` developer documentation
+==========================================
+
+Contents:
+
+.. toctree::
+ :maxdepth: 1
+
+ api
+ language-guide
+ reference
+ css-classes-reference
+ style-guide
+ language-contribution
+ building-testing
+ maintainers-guide
+
+Miscellaneous:
+
+.. toctree::
+ :maxdepth: 1
+
+ line-numbers
+ language-requests
+
+Links:
+
+- Code: https://github.com/highlightjs/highlight.js
+- Discussion: http://groups.google.com/group/highlightjs
+- Bug tracking: https://github.com/highlightjs/highlight.js/issues
+
+
+Indices and tables
+==================
+
+* :ref:`genindex`
+* :ref:`modindex`
+* :ref:`search`
+
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/language-contribution.rst b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/language-contribution.rst
new file mode 100644
index 0000000000..614e816339
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/language-contribution.rst
@@ -0,0 +1,77 @@
+Language contributor checklist
+==============================
+
+1. Put language definition into a .js file
+------------------------------------------
+
+The file defines a function accepting a reference to the library and returning a language object.
+The library parameter is useful to access common modes and regexps. You should not immediately call this function,
+this is done during the build process and details differ for different build targets.
+
+::
+
+ function(hljs) {
+ return {
+ keywords: 'foo bar',
+ contains: [ ..., hljs.NUMBER_MODE, ... ]
+ }
+ }
+
+The name of the file is used as a short language identifier and should be usable as a class name in HTML and CSS.
+
+
+2. Provide meta data
+--------------------
+
+At the top of the file there is a specially formatted comment with meta data processed by a build system.
+Meta data format is simply key-value pairs each occupying its own line:
+
+::
+
+ /*
+ Language: Superlanguage
+ Requires: java.js, sql.js
+ Author: John Smith
+ Contributors: Mike Johnson <...@...>, Matt Wilson <...@...>
+ Description: Some cool language definition
+ */
+
+``Language`` — the only required header giving a human-readable language name.
+
+``Requires`` — a list of other language files required for this language to work.
+This make it possible to describe languages that extend definitions of other ones.
+Required files aren't processed in any special way.
+The build system just makes sure that they will be in the final package in
+``LANGUAGES`` object.
+
+The meaning of the other headers is pretty obvious.
+
+
+3. Create a code example
+------------------------
+
+The code example is used both to test language detection and for the demo page
+on https://highlightjs.org/. Put it in ``test/detect//default.txt``.
+
+Take inspiration from other languages in ``test/detect/`` and read
+:ref:`testing instructions ` for more details.
+
+
+4. Write class reference
+------------------------
+
+Class reference lives in the :doc:`CSS classes reference `..
+Describe shortly names of all meaningful modes used in your language definition.
+
+
+5. Add yourself to AUTHORS.*.txt and CHANGES.md
+-----------------------------------------------
+
+If you're a new contributor add yourself to the authors list.
+Also it will be good to update CHANGES.md.
+
+
+6. Create a pull request
+------------------------
+
+Send your contribution as a pull request on GitHub.
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/language-guide.rst b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/language-guide.rst
new file mode 100644
index 0000000000..a3cf8d806a
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/language-guide.rst
@@ -0,0 +1,264 @@
+Language definition guide
+=========================
+
+Highlighting overview
+---------------------
+
+Programming language code consists of parts with different rules of parsing: keywords like ``for`` or ``if``
+don't make sense inside strings, strings may contain backslash-escaped symbols like ``\"``
+and comments usually don't contain anything interesting except the end of the comment.
+
+In highlight.js such parts are called "modes".
+
+Each mode consists of:
+
+* starting condition
+* ending condition
+* list of contained sub-modes
+* lexing rules and keywords
+* …exotic stuff like another language inside a language
+
+The parser's work is to look for modes and their keywords.
+Upon finding, it wraps them into the markup ``...``
+and puts the name of the mode ("string", "comment", "number")
+or a keyword group name ("keyword", "literal", "built-in") as the span's class name.
+
+
+General syntax
+--------------
+
+A language definition is a JavaScript object describing the default parsing mode for the language.
+This default mode contains sub-modes which in turn contain other sub-modes, effectively making the language definition a tree of modes.
+
+Here's an example:
+
+::
+
+ {
+ case_insensitive: true, // language is case-insensitive
+ keywords: 'for if while',
+ contains: [
+ {
+ className: 'string',
+ begin: '"', end: '"'
+ },
+ hljs.COMMENT(
+ '/\\*', // begin
+ '\\*/', // end
+ {
+ contains: [
+ {
+ className: 'doc', begin: '@\\w+'
+ }
+ ]
+ }
+ )
+ ]
+ }
+
+Usually the default mode accounts for the majority of the code and describes all language keywords.
+A notable exception here is XML in which a default mode is just a user text that doesn't contain any keywords,
+and most interesting parsing happens inside tags.
+
+
+Keywords
+--------
+
+In the simple case language keywords are defined in a string, separated by space:
+
+::
+
+ {
+ keywords: 'else for if while'
+ }
+
+Some languages have different kinds of "keywords" that might not be called as such by the language spec
+but are very close to them from the point of view of a syntax highlighter. These are all sorts of "literals", "built-ins", "symbols" and such.
+To define such keyword groups the attribute ``keywords`` becomes an object each property of which defines its own group of keywords:
+
+::
+
+ {
+ keywords: {
+ keyword: 'else for if while',
+ literal: 'false true null'
+ }
+ }
+
+The group name becomes then a class name in a generated markup enabling different styling for different kinds of keywords.
+
+To detect keywords highlight.js breaks the processed chunk of code into separate words — a process called lexing.
+The "word" here is defined by the regexp ``[a-zA-Z][a-zA-Z0-9_]*`` that works for keywords in most languages.
+Different lexing rules can be defined by the ``lexemes`` attribute:
+
+::
+
+ {
+ lexemes: '-[a-z]+',
+ keywords: '-import -export'
+ }
+
+
+Sub-modes
+---------
+
+Sub-modes are listed in the ``contains`` attribute:
+
+::
+
+ {
+ keywords: '...',
+ contains: [
+ hljs.QUOTE_STRING_MODE,
+ hljs.C_LINE_COMMENT,
+ { ... custom mode definition ... }
+ ]
+ }
+
+A mode can reference itself in the ``contains`` array by using a special keyword ``'self``'.
+This is commonly used to define nested modes:
+
+::
+
+ {
+ className: 'object',
+ begin: '{', end: '}',
+ contains: [hljs.QUOTE_STRING_MODE, 'self']
+ }
+
+
+Comments
+--------
+
+To define custom comments it is recommended to use a built-in helper function ``hljs.COMMENT`` instead of describing the mode directly, as it also defines a few default sub-modes that improve language detection and do other nice things.
+
+Parameters for the function are:
+
+::
+
+ hljs.COMMENT(
+ begin, // begin regex
+ end, // end regex
+ extra // optional object with extra attributes to override defaults
+ // (for example {relevance: 0})
+ )
+
+
+Markup generation
+-----------------
+
+Modes usually generate actual highlighting markup — ```` elements with specific class names that are defined by the ``className`` attribute:
+
+::
+
+ {
+ contains: [
+ {
+ className: 'string',
+ // ... other attributes
+ },
+ {
+ className: 'number',
+ // ...
+ }
+ ]
+ }
+
+Names are not required to be unique, it's quite common to have several definitions with the same name.
+For example, many languages have various syntaxes for strings, comments, etc…
+
+Sometimes modes are defined only to support specific parsing rules and aren't needed in the final markup.
+A classic example is an escaping sequence inside strings allowing them to contain an ending quote.
+
+::
+
+ {
+ className: 'string',
+ begin: '"', end: '"',
+ contains: [{begin: '\\\\.'}],
+ }
+
+For such modes ``className`` attribute should be omitted so they won't generate excessive markup.
+
+
+Mode attributes
+---------------
+
+Other useful attributes are defined in the :doc:`mode reference `.
+
+
+.. _relevance:
+
+Relevance
+---------
+
+Highlight.js tries to automatically detect the language of a code fragment.
+The heuristics is essentially simple: it tries to highlight a fragment with all the language definitions
+and the one that yields most specific modes and keywords wins. The job of a language definition
+is to help this heuristics by hinting relative relevance (or irrelevance) of modes.
+
+This is best illustrated by example. Python has special kinds of strings defined by prefix letters before the quotes:
+``r"..."``, ``u"..."``. If a code fragment contains such strings there is a good chance that it's in Python.
+So these string modes are given high relevance:
+
+::
+
+ {
+ className: 'string',
+ begin: 'r"', end: '"',
+ relevance: 10
+ }
+
+On the other hand, conventional strings in plain single or double quotes aren't specific to any language
+and it makes sense to bring their relevance to zero to lessen statistical noise:
+
+::
+
+ {
+ className: 'string',
+ begin: '"', end: '"',
+ relevance: 0
+ }
+
+The default value for relevance is 1. When setting an explicit value it's recommended to use either 10 or 0.
+
+Keywords also influence relevance. Each of them usually has a relevance of 1, but there are some unique names
+that aren't likely to be found outside of their languages, even in the form of variable names.
+For example just having ``reinterpret_cast`` somewhere in the code is a good indicator that we're looking at C++.
+It's worth to set relevance of such keywords a bit higher. This is done with a pipe:
+
+::
+
+ {
+ keywords: 'for if reinterpret_cast|10'
+ }
+
+
+Illegal symbols
+---------------
+
+Another way to improve language detection is to define illegal symbols for a mode.
+For example in Python first line of class definition (``class MyClass(object):``) cannot contain symbol "{" or a newline.
+Presence of these symbols clearly shows that the language is not Python and the parser can drop this attempt early.
+
+Illegal symbols are defined as a a single regular expression:
+
+::
+
+ {
+ className: 'class',
+ illegal: '[${]'
+ }
+
+
+Pre-defined modes and regular expressions
+-----------------------------------------
+
+Many languages share common modes and regular expressions. Such expressions are defined in core highlight.js code
+at the end under "Common regexps" and "Common modes" titles. Use them when possible.
+
+
+Contributing
+------------
+
+Follow the :doc:`contributor checklist `.
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/language-requests.rst b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/language-requests.rst
new file mode 100644
index 0000000000..4e4c2f0b61
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/language-requests.rst
@@ -0,0 +1,17 @@
+On requesting new languages
+===========================
+
+This is a general answer to requests for adding new languages that appear from
+time to time in the highlight.js issue tracker and discussion group.
+
+ Highlight.js doesn't have a fundamental plan for implementing languages,
+ instead the project works by accepting language definitions from
+ interested contributors. There are also no rules at the moment forbidding
+ any languages from being added to the library, no matter how obscure or
+ weird.
+
+ This means that there's no point in requesting a new language without
+ providing an implementation for it. If you want to see a particular language
+ included in highlight.js but cannot implement it, the best way to make it
+ happen is to get another developer interested in doing so. Here's our
+ :doc:`language-guide`.
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/line-numbers.rst b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/line-numbers.rst
new file mode 100644
index 0000000000..674542d4ed
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/line-numbers.rst
@@ -0,0 +1,39 @@
+Line numbers
+============
+
+Highlight.js' notable lack of line numbers support is not an oversight but a
+feature. Following is the explanation of this policy from the current project
+maintainer (hey guys!):
+
+ One of the defining design principles for highlight.js from the start was
+ simplicity. Not the simplicity of code (in fact, it's quite complex) but
+ the simplicity of usage and of the actual look of highlighted snippets on
+ HTML pages. Many highlighters, in my opinion, are overdoing it with such
+ things as separate colors for every single type of lexemes, striped
+ backgrounds, fancy buttons around code blocks and — yes — line numbers.
+ The more fancy stuff resides around the code the more it distracts a
+ reader from understanding it.
+
+ This is why it's not a straightforward decision: this new feature will not
+ just make highlight.js better, it might actually make it worse simply by
+ making it look more bloated in blog posts around the Internet. This is why
+ I'm asking people to show that it's worth it.
+
+ The only real use-case that ever was brought up in support of line numbers
+ is referencing code from the descriptive text around it. On my own blog I
+ was always solving this either with comments within the code itself or by
+ breaking the larger snippets into smaller ones and describing each small
+ part separately. I'm not saying that my solution is better. But I don't
+ see how line numbers are better either. And the only way to show that they
+ are better is to set up some usability research on the subject. I doubt
+ anyone would bother to do it.
+
+ Then there's maintenance. So far the core code of highlight.js is
+ maintained by only one person — yours truly. Inclusion of any new code in
+ highlight.js means that from that moment I will have to fix bugs in it,
+ improve it further, make it work together with the rest of the code,
+ defend its design. And I don't want to do all this for the feature that I
+ consider "evil" and probably will never use myself.
+
+This position is `subject to discuss `_.
+Also it doesn't stop anyone from forking the code and maintaining line-numbers implementation separately.
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/maintainers-guide.rst b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/maintainers-guide.rst
new file mode 100644
index 0000000000..21bfc52396
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/maintainers-guide.rst
@@ -0,0 +1,34 @@
+Maintainer's guide
+==================
+
+
+Commit policy
+-------------
+
+* Pull requests from outside contributors require a review from a maintainer.
+
+* Maintainers should avoid working on a master branch directly and create branches for everything. A code review from another maintainer is recommended but not required, use your best judgment.
+
+
+
+Release process
+---------------
+
+Releases happen on a 6-week schedule. Currently due to a long break the date of the next release is not set.
+
+* Update CHANGES.md with everything interesting since the last update.
+
+* Update version numbers using the three-part x.y.z notation everywhere:
+
+ * The header in CHANGES.md (this is where the site looks for the latest version number)
+ * ``"version"`` attribute in package.json
+ * ``"version"`` attribute in package-lock.json (run `npm install`)
+ * Two places in docs/conf.py (``version`` and ``release``)
+
+* Commit the version changes and tag the commit with the plain version number (no "v." or anything like that)
+
+* Push the commit and the tags to master (``git push && git push --tags``)
+
+Pushing the tag triggers the update process which can be monitored at http://highlightjs.org/api/release/
+
+When something didn't work *and* it's fixable in code (version numbers mismatch, last minute patches, etc), simply make another release incrementing the third (revision) part of the version number.
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/reference.rst b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/reference.rst
new file mode 100644
index 0000000000..de240fd48f
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/wwwroot/libs/highlight.js/docs/reference.rst
@@ -0,0 +1,360 @@
+Mode reference
+==============
+
+Types
+-----
+
+Types of attributes values in this reference:
+
++------------+-------------------------------------------------------------------------------------+
+| identifier | String suitable to be used as a Javascript variable and CSS class name |
+| | (i.e. mostly ``/[A-Za-z0-9_]+/``) |
++------------+-------------------------------------------------------------------------------------+
+| regexp | String representing a Javascript regexp. |
+| | Note that since it's not a literal regexp all back-slashes should be repeated twice |
++------------+-------------------------------------------------------------------------------------+
+| boolean | Javascript boolean: ``true`` or ``false`` |
++------------+-------------------------------------------------------------------------------------+
+| number | Javascript number |
++------------+-------------------------------------------------------------------------------------+
+| object | Javascript object: ``{ ... }`` |
++------------+-------------------------------------------------------------------------------------+
+| array | Javascript array: ``[ ... ]`` |
++------------+-------------------------------------------------------------------------------------+
+
+
+Attributes
+----------
+
+case_insensitive
+^^^^^^^^^^^^^^^^
+
+**type**: boolean
+
+Case insensitivity of language keywords and regexps. Used only on the top-level mode.
+
+
+aliases
+^^^^^^^
+
+**type**: array
+
+A list of additional names (besides the canonical one given by the filename) that can be used to identify a language in HTML classes and in a call to :ref:`getLanguage `.
+
+
+className
+^^^^^^^^^
+
+**type**: identifier
+
+The name of the mode. It is used as a class name in HTML markup.
+
+Multiple modes can have the same name. This is useful when a language has multiple variants of syntax
+for one thing like string in single or double quotes.
+
+
+begin
+^^^^^
+
+**type**: regexp
+
+Regular expression starting a mode. For example a single quote for strings or two forward slashes for C-style comments.
+If absent, ``begin`` defaults to a regexp that matches anything, so the mode starts immediately.
+
+
+end
+^^^
+
+**type**: regexp
+
+Regular expression ending a mode. For example a single quote for strings or "$" (end of line) for one-line comments.
+
+It's often the case that a beginning regular expression defines the entire mode and doesn't need any special ending.
+For example a number can be defined with ``begin: "\\b\\d+"`` which spans all the digits.
+
+If absent, ``end`` defaults to a regexp that matches anything, so the mode ends immediately.
+
+Sometimes a mode can end not by itself but implicitly with its containing (parent) mode.
+This is achieved with :ref:`endsWithParent ` attribute.
+
+
+beginKeywords
+^^^^^^^^^^^^^^^^
+
+**type**: string
+
+Used instead of ``begin`` for modes starting with keywords to avoid needless repetition:
+
+::
+
+ {
+ begin: '\\b(extends|implements) ',
+ keywords: 'extends implements'
+ }
+
+… becomes:
+
+::
+
+ {
+ beginKeywords: 'extends implements'
+ }
+
+Unlike the :ref:`keywords ` attribute, this one allows only a simple list of space separated keywords.
+If you do need additional features of ``keywords`` or you just need more keywords for this mode you may include ``keywords`` along with ``beginKeywords``.
+
+
+.. _endsWithParent:
+
+endsWithParent
+^^^^^^^^^^^^^^
+
+**type**: boolean
+
+A flag showing that a mode ends when its parent ends.
+
+This is best demonstrated by example. In CSS syntax a selector has a set of rules contained within symbols "{" and "}".
+Individual rules separated by ";" but the last one in a set can omit the terminating semicolon:
+
+::
+
+ p {
+ width: 100%; color: red
+ }
+
+This is when ``endsWithParent`` comes into play:
+
+::
+
+ {
+ className: 'rules', begin: '{', end: '}',
+ contains: [
+ {className: 'rule', /* ... */ end: ';', endsWithParent: true}
+ ]
+ }
+
+.. _endsParent:
+
+endsParent
+^^^^^^^^^^^^^^
+
+**type**: boolean
+
+Forces closing of the parent mode right after the current mode is closed.
+
+This is used for modes that don't have an easily expressible ending lexeme but
+instead could be closed after the last interesting sub-mode is found.
+
+Here's an example with two ways of defining functions in Elixir, one using a
+keyword ``do`` and another using a comma:
+
+::
+
+ def foo :clear, list do
+ :ok
+ end
+
+ def foo, do: IO.puts "hello world"
+
+Note that in the first case the parameter list after the function title may also
+include a comma. And iIf we're only interested in highlighting a title we can
+tell it to end the function definition after itself:
+
+::
+
+ {
+ className: 'function',
+ beginKeywords: 'def', end: /\B\b/,
+ contains: [
+ {
+ className: 'title',
+ begin: hljs.IDENT_RE, endsParent: true
+ }
+ ]
+ }
+
+(The ``end: /\B\b/`` regex tells function to never end by itself.)
+
+.. _endSameAsBegin:
+
+endSameAsBegin
+^^^^^^^^^^^^^^
+
+**type**: boolean
+
+Acts as ``end`` matching exactly the same string that was found by the
+corresponding ``begin`` regexp.
+
+For example, in PostgreSQL string constants can uee "dollar quotes",
+consisting of a dollar sign, an optional tag of zero or more characters,
+and another dollar sign. String constant must be ended with the same
+construct using the same tag. It is possible to nest dollar-quoted string
+constants by choosing different tags at each nesting level:
+
+::
+
+ $foo$
+ ...
+ $bar$ nested $bar$
+ ...
+ $foo$
+
+In this case you can't simply specify the same regexp for ``begin`` and
+``end`` (say, ``"\\$[a-z]\\$"``), but you can use ``begin: "\\$[a-z]\\$"``
+and ``endSameAsBegin: true``.
+
+.. _lexemes:
+
+lexemes
+^^^^^^^
+
+**type**: regexp
+
+A regular expression that extracts individual lexemes from language text to find :ref:`keywords ` among them.
+Default value is ``hljs.IDENT_RE`` which works for most languages.
+
+
+.. _keywords:
+
+keywords
+^^^^^^^^
+
+**type**: object
+
+Keyword definition comes in two forms:
+
+* ``'for while if else weird_voodoo|10 ... '`` -- a string of space-separated keywords with an optional relevance over a pipe
+* ``{'keyword': ' ... ', 'literal': ' ... '}`` -- an object whose keys are names of different kinds of keywords and values are keyword definition strings in the first form
+
+For detailed explanation see :doc:`Language definition guide `.
+
+
+illegal
+^^^^^^^
+
+**type**: regexp
+
+A regular expression that defines symbols illegal for the mode.
+When the parser finds a match for illegal expression it immediately drops parsing the whole language altogether.
+
+
+excludeBegin, excludeEnd
+^^^^^^^^^^^^^^^^^^^^^^^^
+
+**type**: boolean
+
+Exclude beginning or ending lexemes out of mode's generated markup. For example in CSS syntax a rule ends with a semicolon.
+However visually it's better not to color it as the rule contents. Having ``excludeEnd: true`` forces a ```` element for the rule to close before the semicolon.
+
+
+returnBegin
+^^^^^^^^^^^
+
+**type**: boolean
+
+Returns just found beginning lexeme back into parser. This is used when beginning of a sub-mode is a complex expression
+that should not only be found within a parent mode but also parsed according to the rules of a sub-mode.
+
+Since the parser is effectively goes back it's quite possible to create a infinite loop here so use with caution!
+
+
+returnEnd
+^^^^^^^^^
+
+**type**: boolean
+
+Returns just found ending lexeme back into parser. This is used for example to parse Javascript embedded into HTML.
+A Javascript block ends with the HTML closing tag ```` that cannot be parsed with Javascript rules.
+So it is returned back into its parent HTML mode that knows what to do with it.
+
+Since the parser is effectively goes back it's quite possible to create a infinite loop here so use with caution!
+
+
+contains
+^^^^^^^^
+
+**type**: array
+
+The list of sub-modes that can be found inside the mode. For detailed explanation see :doc:`Language definition guide `.
+
+
+starts
+^^^^^^
+
+**type**: identifier
+
+The name of the mode that will start right after the current mode ends. The new mode won't be contained within the current one.
+
+Currently this attribute is used to highlight Javascript and CSS contained within HTML.
+Tags ``