Dropdown Tag Helper examples

src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Dropdown/AbpDropdownButtonTagHelperService.cs

@@ -14,16 +14,13 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Dropdown
     {
 
         private readonly HtmlEncoder _htmlEncoder;
-        private readonly IHtmlGenerator _htmlGenerator;
         private readonly IServiceProvider _serviceProvider;
 
         public AbpDropdownButtonTagHelperService(
             HtmlEncoder htmlEncoder,
-            IHtmlGenerator htmlGenerator,
             IServiceProvider serviceProvider)
         {
             _htmlEncoder = htmlEncoder;
-            _htmlGenerator = htmlGenerator;
             _serviceProvider = serviceProvider;
         }
 

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

@@ -10,11 +10,81 @@
 
 <h4># Dropdown Example</h4>
 
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <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-menu>
+        </abp-dropdown>
+
+    </div>
+    <div class="code-area">
+        <pre>
+&lt;abp-dropdown&gt;
+    &lt;abp-dropdown-button button-type=&quot;Primary&quot; text=&quot;Dropdown&quot;/&gt;
+       &lt;abp-dropdown-menu&gt;
+       &lt;abp-dropdown-header&gt;Dropdown header&lt;/abp-dropdown-header&gt;
+       &lt;abp-dropdown-item href=&quot;#&quot; active=&quot;true&quot;&gt;Action&lt;/abp-dropdown-item&gt;
+       &lt;abp-dropdown-item href=&quot;#&quot; disabled=&quot;true&quot;&gt;Another disabled action&lt;/abp-dropdown-item&gt;
+       &lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
+       &lt;abp-dropdown-divider/&gt;
+       &lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
+    &lt;/abp-dropdown-menu&gt;
+&lt;/abp-dropdown&gt;
+</pre>
+    </div>
+</div>
+
+<h4># Split Dropdown Example</h4>
+
+<div class="demo-with-code">
+    <div class="demo-area">
+
+        <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>
+            </abp-dropdown-menu>
+        </abp-dropdown>
+
+    </div>
+    <div class="code-area">
+        <pre>
+&lt;abp-dropdown direction=&quot;Right&quot;&gt;
+    &lt;abp-dropdown-button dropdown-style=&quot;Split&quot; button-type=&quot;Danger&quot; text=&quot;Dropdown&quot;/&gt;
+       &lt;abp-dropdown-menu&gt;
+       &lt;abp-dropdown-header&gt;Dropdown header&lt;/abp-dropdown-header&gt;
+       &lt;abp-dropdown-item href=&quot;#&quot; active=&quot;true&quot;&gt;Action&lt;/abp-dropdown-item&gt;
+       &lt;abp-dropdown-item href=&quot;#&quot; disabled=&quot;true&quot;&gt;Another disabled action&lt;/abp-dropdown-item&gt;
+       &lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
+       &lt;abp-dropdown-divider/&gt;
+       &lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
+    &lt;/abp-dropdown-menu&gt;
+&lt;/abp-dropdown&gt;
+</pre>
+    </div>
+</div>
+
+<h4># Link Dropdown Example</h4>
+
 <div class="demo-with-code">
     <div class="demo-area">
 
         <abp-dropdown direction="Right">
-            <abp-dropdown-button dropdown-style="Split" link="true" href="#" button-type="Primary" text="Dropdown"/>
+            <abp-dropdown-button Link="true" 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>
@@ -29,7 +99,7 @@
     <div class="code-area">
         <pre>
 &lt;abp-dropdown direction=&quot;Right&quot;&gt;
-    &lt;abp-dropdown-button dropdown-style=&quot;Split&quot; link=&quot;true&quot; href=&quot;#&quot; button-type=&quot;Primary&quot; text=&quot;Dropdown&quot;/&gt;
+    &lt;abp-dropdown-button Link=&quot;true&quot; button-type=&quot;Primary&quot; text=&quot;Dropdown&quot;/&gt;
        &lt;abp-dropdown-menu&gt;
        &lt;abp-dropdown-header&gt;Dropdown header&lt;/abp-dropdown-header&gt;
        &lt;abp-dropdown-item href=&quot;#&quot; active=&quot;true&quot;&gt;Action&lt;/abp-dropdown-item&gt;