Merge pull request #6659 from jack-gaojz/dev

[dev-issue-6369]Added the "scrollable" feature for the Bootstrap Modal Tag Helper.

docs/en/UI/AspNetCore/Tag-Helpers/Modals.md

@@ -11,7 +11,7 @@ Basic usage:
 ````xml
 <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 centered="true" scrollable="true" size="Large" id="myModal">
    <abp-modal-header title="Modal title"></abp-modal-header>
    <abp-modal-body>
        Woohoo, you're reading this text in a modal!
@@ -33,6 +33,13 @@ A value indicates the positioning of the modal. Should be one of the following v
 * `false` (default value)
 * `true`
 
+### Scrollable
+
+A value indicates the scrolling of the modal. Should be one of the following values:
+
+* `false` (default value)
+* `true`
+
 ### size
 
 A value indicates the size of the modal. Should be one of the following values:
@@ -78,4 +85,4 @@ A value indicates the positioning of your modal footer buttons. Should be one of
 * `Center`
 * `Around`
 * `Between`
-* `End`
+* `End`

docs/zh-Hans/UI/AspNetCore/Tag-Helpers/Modals.md

@@ -9,7 +9,7 @@
 ````xml
 <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 centered="true" scrollable="true" size="Large" id="myModal">
    <abp-modal-header title="Modal title"></abp-modal-header>
    <abp-modal-body>
        Woohoo, you're reading this text in a modal!
@@ -31,6 +31,13 @@
 * `false` (默认值)
 * `true`
 
+### Scrollable
+
+指定模态框滚动. 应为以下值之一:
+
+* `false` (默认值)
+* `true`
+
 ### size
 
 指定模态框的大小. 应为以下值之一:
@@ -76,4 +83,4 @@
 * `Center`
 * `Around`
 * `Between`
-* `End`
+* `End`

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelper.cs

@@ -6,6 +6,8 @@
 
         public bool? Centered { get; set; } = false;
 
+        public bool? Scrollable { get; set; } = false;
+
         public bool? Static { get; set; } = false;
 
         public AbpModalTagHelper(AbpModalTagHelperService tagHelperService)

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Modal/AbpModalTagHelperService.cs

@@ -1,112 +1,118 @@
-using Microsoft.AspNetCore.Html;
-using Microsoft.AspNetCore.Mvc.Rendering;
-using Microsoft.AspNetCore.Razor.TagHelpers;
-using System.Text;
-using System.Threading.Tasks;
-
-namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
-{
-    public class AbpModalTagHelperService : AbpTagHelperService<AbpModalTagHelper>
-    {
-        public async override Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
-        {
-            output.TagName = null;
-
-            var childContent = await output.GetChildContentAsync();
-
-            SetContent(context, output, childContent);
-        }
-
-        protected virtual void SetContent(TagHelperContext context, TagHelperOutput output, TagHelperContent childContent)
-        {
-            var modalContent = GetModalContentElement(context, output, childContent);
-            var modalDialog = GetModalDialogElement(context, output, modalContent);
-            var modal = GetModal(context, output, modalDialog);
-
-            output.Content.SetHtmlContent(modal);
-        }
-
-        protected virtual TagBuilder GetModalContentElement(TagHelperContext context, TagHelperOutput output, TagHelperContent childContent)
-        {
-            var element = new TagBuilder("div");
-            element.AddCssClass(GetModalContentClasses());
-            element.InnerHtml.SetHtmlContent(childContent);
-            return element;
-        }
-
-        protected virtual TagBuilder GetModalDialogElement(TagHelperContext context, TagHelperOutput output, IHtmlContent innerHtml)
-        {
-            var element = new TagBuilder("div");
-            element.AddCssClass(GetModalDialogClasses());
-            element.Attributes.Add("role", "document");
-            element.InnerHtml.SetHtmlContent(innerHtml);
-            return element;
-        }
-
-        protected virtual TagBuilder GetModal(TagHelperContext context, TagHelperOutput output, IHtmlContent innerHtml)
-        {
-            var element = new TagBuilder("div");
-            element.AddCssClass(GetModalClasses());
-            element.Attributes.Add("tabindex", "-1");
-            element.Attributes.Add("role", "dialog");
-            element.Attributes.Add("aria-hidden", "true");
-
-            foreach (var attr in output.Attributes)
-            {
-                element.Attributes.Add(attr.Name, attr.Value.ToString());
-            }
-
-            SetDataAttributes(element);
-
-            element.InnerHtml.SetHtmlContent(innerHtml);
-
-            return element;
-        }
-
-        protected virtual string GetModalClasses()
-        {
-            return "modal fade";
-        }
-
-        protected virtual string GetModalDialogClasses()
-        {
-            var classNames = new StringBuilder("modal-dialog");
-
-            if (TagHelper.Centered ?? false)
-            {
-                classNames.Append(" ");
-                classNames.Append("modal-dialog-centered");
-            }
-
-            if (TagHelper.Size != AbpModalSize.Default)
-            {
-                classNames.Append(" ");
-                classNames.Append(TagHelper.Size.ToClassName());
-            }
-
-            return classNames.ToString();
-        }
-
-        protected virtual string GetModalContentClasses()
-        {
-            return "modal-content";
-        }
-
-        protected virtual string GetDataAttributes()
-        {
-            if (TagHelper.Static == true)
-            {
-                return "data-backdrop=\"static\" ";
-            }
-            return string.Empty;
-        }
-
-        protected virtual void SetDataAttributes(TagBuilder builder)
-        {
-            if (TagHelper.Static == true)
-            {
-                builder.Attributes.Add("data-backdrop", "static");
-            }
-        }
-    }
-}
+using Microsoft.AspNetCore.Html;
+using Microsoft.AspNetCore.Mvc.Rendering;
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
+{
+    public class AbpModalTagHelperService : AbpTagHelperService<AbpModalTagHelper>
+    {
+        public async override Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = null;
+
+            var childContent = await output.GetChildContentAsync();
+
+            SetContent(context, output, childContent);
+        }
+
+        protected virtual void SetContent(TagHelperContext context, TagHelperOutput output, TagHelperContent childContent)
+        {
+            var modalContent = GetModalContentElement(context, output, childContent);
+            var modalDialog = GetModalDialogElement(context, output, modalContent);
+            var modal = GetModal(context, output, modalDialog);
+
+            output.Content.SetHtmlContent(modal);
+        }
+
+        protected virtual TagBuilder GetModalContentElement(TagHelperContext context, TagHelperOutput output, TagHelperContent childContent)
+        {
+            var element = new TagBuilder("div");
+            element.AddCssClass(GetModalContentClasses());
+            element.InnerHtml.SetHtmlContent(childContent);
+            return element;
+        }
+
+        protected virtual TagBuilder GetModalDialogElement(TagHelperContext context, TagHelperOutput output, IHtmlContent innerHtml)
+        {
+            var element = new TagBuilder("div");
+            element.AddCssClass(GetModalDialogClasses());
+            element.Attributes.Add("role", "document");
+            element.InnerHtml.SetHtmlContent(innerHtml);
+            return element;
+        }
+
+        protected virtual TagBuilder GetModal(TagHelperContext context, TagHelperOutput output, IHtmlContent innerHtml)
+        {
+            var element = new TagBuilder("div");
+            element.AddCssClass(GetModalClasses());
+            element.Attributes.Add("tabindex", "-1");
+            element.Attributes.Add("role", "dialog");
+            element.Attributes.Add("aria-hidden", "true");
+
+            foreach (var attr in output.Attributes)
+            {
+                element.Attributes.Add(attr.Name, attr.Value.ToString());
+            }
+
+            SetDataAttributes(element);
+
+            element.InnerHtml.SetHtmlContent(innerHtml);
+
+            return element;
+        }
+
+        protected virtual string GetModalClasses()
+        {
+            return "modal fade";
+        }
+
+        protected virtual string GetModalDialogClasses()
+        {
+            var classNames = new StringBuilder("modal-dialog");
+
+            if (TagHelper.Centered ?? false)
+            {
+                classNames.Append(" ");
+                classNames.Append("modal-dialog-centered");
+            }
+
+            if (TagHelper.Scrollable ?? false)
+            {
+                classNames.Append(" ");
+                classNames.Append("modal-dialog-scrollable");
+            }
+
+            if (TagHelper.Size != AbpModalSize.Default)
+            {
+                classNames.Append(" ");
+                classNames.Append(TagHelper.Size.ToClassName());
+            }
+
+            return classNames.ToString();
+        }
+
+        protected virtual string GetModalContentClasses()
+        {
+            return "modal-content";
+        }
+
+        protected virtual string GetDataAttributes()
+        {
+            if (TagHelper.Static == true)
+            {
+                return "data-backdrop=\"static\" ";
+            }
+            return string.Empty;
+        }
+
+        protected virtual void SetDataAttributes(TagBuilder builder)
+        {
+            if (TagHelper.Static == true)
+            {
+                builder.Attributes.Add("data-backdrop", "static");
+            }
+        }
+    }
+}

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

@@ -34,7 +34,7 @@
     <div class="demo-area">
         <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 centered="true" scrollable="true" size="Large" id="myModal">
             <abp-modal-header title="Modal title"></abp-modal-header>
             <abp-modal-body>
                 Woohoo, you're reading this text in a modal!
@@ -45,16 +45,16 @@
     <div class="code-area">
         <abp-tabs>
             <abp-tab title="Tag Helper">
-                <pre><code>
-    &lt;abp-button button-type=&quot;Primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;Launch modal&lt;/abp-button&gt;
-
-    &lt;abp-modal centered=&quot;true&quot; size=&quot;Large&quot; id=&quot;myModal&quot;&gt;
-    &lt;abp-modal-header title=&quot;Modal title&quot;&gt;&lt;/abp-modal-header&gt;
-    &lt;abp-modal-body&gt;
-    Woohoo, you're reading this text in a modal!
-    &lt;/abp-modal-body&gt;
-    &lt;abp-modal-footer buttons=&quot;&commat;(AbpModalButtons.Save|AbpModalButtons.Close)&quot;&gt;&lt;/abp-modal-footer&gt;
-    &lt;/abp-modal&gt;
+                <pre><code>
+    &lt;abp-button button-type=&quot;Primary&quot; data-toggle=&quot;modal&quot; data-target=&quot;#myModal&quot;&gt;Launch modal&lt;/abp-button&gt;
+
+    &lt;abp-modal centered=&quot;true&quot; scrollable=&quot;true&quot; size=&quot;Large&quot; id=&quot;myModal&quot;&gt;
+    &lt;abp-modal-header title=&quot;Modal title&quot;&gt;&lt;/abp-modal-header&gt;
+    &lt;abp-modal-body&gt;
+    Woohoo, you're reading this text in a modal!
+    &lt;/abp-modal-body&gt;
+    &lt;abp-modal-footer buttons=&quot;&commat;(AbpModalButtons.Save|AbpModalButtons.Close)&quot;&gt;&lt;/abp-modal-footer&gt;
+    &lt;/abp-modal&gt;
 </code></pre>
             </abp-tab>
             <abp-tab title="Rendered">
@@ -66,7 +66,7 @@
 
 &lt;!-- Modal --&gt;
 &lt;div class=&quot;modal fade&quot; id=&quot;exampleModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
-  &lt;div class=&quot;modal-dialog modal-dialog-centered modal-lg&quot; role=&quot;document&quot;&gt;
+  &lt;div class=&quot;modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg&quot; role=&quot;document&quot;&gt;
     &lt;div class=&quot;modal-content&quot;&gt;
       &lt;div class=&quot;modal-header&quot;&gt;
         &lt;h5 class=&quot;modal-title&quot; id=&quot;exampleModalLabel&quot;&gt;Modal title&lt;/h5&gt;