diff --git a/docs/docs/05-components/dropdown.mdx b/docs/docs/05-components/dropdown.mdx index 20641c575..9e071be9b 100644 --- a/docs/docs/05-components/dropdown.mdx +++ b/docs/docs/05-components/dropdown.mdx @@ -96,12 +96,12 @@ They are toggled by clicking, not by hovering; this is an intentional design dec Blazor Bootstrap: Dropdown Component - Single button ```cshtml {} showLineNumbers - - Dropdown button + + Dropdown button - Action - Another action - Something else here + Action + Another action + Something else here ``` @@ -112,54 +112,59 @@ They are toggled by clicking, not by hovering; this is an intentional design dec Blazor Bootstrap: Dropdown Component - Color -```cshtml {3,11,19,27,35,43} showLineNumbers +```cshtml {2,11,20,29,38,47} showLineNumbers
- - Primary + + Primary - Action - Another action - Something else here + Action + Another action + Something else here - - Secondary + + + Secondary - Action - Another action - Something else here + Action + Another action + Something else here - - Success + + + Success - Action - Another action - Something else here + Action + Another action + Something else here - - Info + + + Info - Action - Another action - Something else here + Action + Another action + Something else here - - Warning + + + Warning - Action - Another action - Something else here + Action + Another action + Something else here - - Danger + + + Danger - Action - Another action - Something else here + Action + Another action + Something else here
@@ -171,60 +176,65 @@ They are toggled by clicking, not by hovering; this is an intentional design dec Blazor Bootstrap: Dropdown Component - Split button -```cshtml {3-4,12-13,21-22,30-31,39-40,48-49} showLineNumbers +```cshtml {2-3,12-13,22-23,32-33,42-43,52-53} showLineNumbers
- - Primary - + + Primary + - Action - Another action - Something else here + Action + Another action + Something else here - - Secondary - + + + Secondary + - Action - Another action - Something else here + Action + Another action + Something else here - - Success - + + + Success + - Action - Another action - Something else here + Action + Another action + Something else here - - Info - + + + Info + - Action - Another action - Something else here + Action + Another action + Something else here - - Warning - + + + Warning + - Action - Another action - Something else here + Action + Another action + Something else here - - Danger - + + + Danger + - Action - Another action - Something else here + Action + Another action + Something else here
@@ -236,23 +246,24 @@ They are toggled by clicking, not by hovering; this is an intentional design dec Blazor Bootstrap: Dropdown Component - Sizing - Large -```cshtml {2,10} showLineNumbers +```cshtml {2,11} showLineNumbers
- - Large button + + Large button - Action - Another action - Something else here + Action + Another action + Something else here - - Large split button - + + + Large split button + - Action - Another action - Something else here + Action + Another action + Something else here
@@ -260,23 +271,24 @@ They are toggled by clicking, not by hovering; this is an intentional design dec Blazor Bootstrap: Dropdown Component - Sizing - Small -```cshtml {2,10} showLineNumbers +```cshtml {2,11} showLineNumbers
- - Small button + + Small button - Action - Another action - Something else here + Action + Another action + Something else here - - Small split button - + + + Small split button + - Action - Another action - Something else here + Action + Another action + Something else here
@@ -292,23 +304,24 @@ To trigger **DropdownMenu** above elements, add the `Direction="DropdownDirectio Blazor Bootstrap: Dropdown Component - Dropup -```cshtml {2,10} showLineNumbers +```cshtml {2,11} showLineNumbers
- - Dropup button with text + + Dropup button with text - Action - Another action - Something else here + Action + Another action + Something else here - - Dropup split button - + + + Dropup split button + - Action - Another action - Something else here + Action + Another action + Something else here
@@ -324,12 +337,12 @@ To center the DropdownMenu above the toggle, add the Direction="DropdownDirectio ```cshtml {2} showLineNumbers
- - Centered dropup + + Centered dropup - Action - Another action - Something else here + Action + Another action + Something else here
@@ -343,23 +356,24 @@ To trigger DropdownMenu at the right of elements, add the Direction="DropdownDir Blazor Bootstrap: Dropdown Component - Dropend -```cshtml {2,10} showLineNumbers +```cshtml {2,11} showLineNumbers
- - Dropend + + Dropend - Action - Another action - Something else here + Action + Another action + Something else here - - Split dropend - + + + Split dropend + - Action - Another action - Something else here + Action + Another action + Something else here
@@ -375,22 +389,22 @@ To trigger DropdownMenu at the left of elements, you can add the Direction="Drop ```cshtml {2,10} showLineNumbers
- - Dropstart + + Dropstart - Action - Another action - Something else here + Action + Another action + Something else here - - + + - Action - Another action - Something else here + Action + Another action + Something else here - Split dropstart + Split dropstart
``` @@ -404,12 +418,12 @@ To style DropdownItem as active, add the Active="true" parameter to the Dropdown Blazor Bootstrap: Dropdown Component - Active ```cshtml {5} showLineNumbers - - Dropstart + + Dropstart - Action - Another action - Something else here + Action + Another action + Something else here ``` @@ -423,18 +437,18 @@ To disable the dropdown, set the Disabled parameter to true on the Blazor Bootstrap: Dropdown Component - Disabled ```cshtml {1} showLineNumbers - - Dropstart + + Dropstart - Action - Another action - Something else here + Action + Another action + Something else here
- - + +
@code { @@ -449,12 +463,12 @@ To style a dropdown item as disabled, set the Disabled parameter to tr Blazor Bootstrap: Dropdown Component - Disabled (Dropdown Item) ```cshtml {5} showLineNumbers - - Dropstart + + Dropstart - Action - Another action - Something else here + Action + Another action + Something else here ``` @@ -470,12 +484,12 @@ To right-align a DropdownMenu, add the Position="DropdownMenuPosition.End" param Blazor Bootstrap: Dropdown Component - Menu position ```cshtml {3} showLineNumbers - - Right-aligned menu example + + Right-aligned menu example - Action - Another action - Something else here + Action + Another action + Something else here ``` @@ -491,13 +505,13 @@ Add a header to label sections of actions in any dropdown menu. Blazor Bootstrap: Dropdown Component - Header ```cshtml {4} showLineNumbers - - Dropdown + + Dropdown Dropdown header - Action - Another action - Something else here + Action + Another action + Something else here ``` @@ -511,14 +525,14 @@ Separate groups of related menu items with a divider. Blazor Bootstrap: Dropdown Component - Dividers ```cshtml {7} showLineNumbers - - Dropdown + + Dropdown - Action - Another action - Something else here + Action + Another action + Something else here Dropdown header - Separated link + Separated link ``` @@ -532,8 +546,8 @@ Place any freeform text within a dropdown menu with text and use spacing utiliti Blazor Bootstrap: Dropdown Component - Text ```cshtml {3-6} showLineNumbers - - Dropdown + + Dropdown

Some example text that's free-flowing within the dropdown menu.

And this is more example text.

@@ -566,8 +580,8 @@ Put a form within a dropdown menu, or make it into a dropdown menu, and use marg } - - Dropdown form + + Dropdown form @@ -674,37 +688,40 @@ By default, the DropdownMenu is closed when clicking either inside or outside th Blazor Bootstrap: Dropdown Component - Auto close behavior -```cshtml {1,9,17,25} showLineNumbers - - Default dropdown +```cshtml {1,10,19,28} showLineNumbers + + Default dropdown - Menu item - Menu item - Menu item + Menu item + Menu item + Menu item - - Clickable outside + + + Clickable outside - Menu item - Menu item - Menu item + Menu item + Menu item + Menu item - - Clickable inside + + + Clickable inside - Menu item - Menu item - Menu item + Menu item + Menu item + Menu item - - Manual close + + + Manual close - Menu item - Menu item - Menu item + Menu item + Menu item + Menu item ``` @@ -715,13 +732,13 @@ By default, the DropdownMenu is closed when clicking either inside or outside th Blazor Bootstrap: Dropdown Component - Methods -```cshtml {10-12} showLineNumbers - - Dropdown button +```cshtml {1,10-12} showLineNumbers + + Dropdown button - Action - Another action - Something else here + Action + Another action + Something else here @@ -748,27 +765,38 @@ All dropdown events are fired at the toggling element and then bubbled up. Blazor Bootstrap: Dropdown Component - Events -```cshtml {1-4} showLineNumbers - - Dropdown button + Dropdown button - Action - Another action - Something else here + Action + Another action + Something else here + +
+ @foreach (var item in messages) + { +

Event: @item

+ } +
``` -```cs {4-7} showLineNumbers +```cs {4,6,8,10} showLineNumbers @code { List messages = new List(); private void OnDropdownHidingAsync() => messages.Add(new("OnHiding")); + private void OnDropdownHiddenAsync() => messages.Add(new("OnHidden")); + private void OnDropdownShowingAsync() => messages.Add(new("OnShowing")); + private void OnDropdownShownAsync() => messages.Add(new("OnShown")); } ```