From a933bb705ba71a18404c4b91af519010808050c1 Mon Sep 17 00:00:00 2001 From: Yunus Emre Kalkan Date: Tue, 18 Dec 2018 11:14:48 +0300 Subject: [PATCH] dropdown tag helper docs --- .../Pages/Components/Dropdowns.cshtml | 741 ++++++++++++++++-- .../Pages/Components/Dropdowns.cshtml.cs | 15 + 2 files changed, 705 insertions(+), 51 deletions(-) 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 { + + @* + *@ + +} + + + + +

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>
+
+ + +
+
- + - 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 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>
+
+ + +
+
+ +
+
+ + + +
+ + + + + + + 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>
+
+ + +
+
\ 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() {