Skip to content

Commit d278db3

Browse files
gvreddy04gvreddy04
authored
Dropdown component (#55)
- Introduced a modular and reusable Dropdown component with supporting subcomponents (`DropdownTrigger`, `DropdownContent`, `DropdownLinkItem`, `DropdownDivider`, and `DropdownItem`). - Updated layouts and documentation to add links and detailed usage instructions for the new Dropdown features. - Enhanced Dropdown functionality: toggle state via click/hover, right alignment, dropup, and icon-only triggers. - Improved code structure, maintainability, and clarity across Dropdown and PdfViewer components. - Added comprehensive, step-by-step documentation and new demo files to illustrate different Dropdown configurations. - Updated default values and added a new image for UI use. - Enhanced PdfViewer documentation and demos, including orientation and base64 string features, with improved event logging and user guidance.
1 parent 5226da5 commit d278db3

26 files changed

Lines changed: 738 additions & 15 deletions

‎BlazorExpress.Bulma.Demo.RCL/Constants/DemoScreenshotSrcConstants.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ public class DemoScreenshotSrcConstants
3535
// Components
3636
public const string Breadcrumb = DemoScreenshotSrcPrefix + "breadcrumb.png";
3737
public const string ConfirmDialog = DemoScreenshotSrcPrefix + "confirm-dialog.png";
38+
public const string Dropdown = DemoScreenshotSrcPrefix + "dropdown.png";
3839
public const string GoogleMap = DemoScreenshotSrcPrefix + "google-map.png";
3940
public const string Grid = DemoScreenshotSrcPrefix + "grid.png";
4041
public const string Message = DemoScreenshotSrcPrefix + "message.png";

‎BlazorExpress.Bulma.Demo.RCL/Layout/DemosMainLayout.razor.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ private HashSet<LinkGroup> GetLinkGroups()
9191
Links = [
9292
new Link { Href = DemoRouteConstants.Demos_Breadcrumb_Documentation, Text = "Breadcrumb" },
9393
new Link { Href = DemoRouteConstants.Demos_ConfirmDialog_Documentation, Text = "Confirm Dialog" },
94+
new Link { Href = DemoRouteConstants.Demos_Dropdown_Documentation, Text = "Dropdown" },
9495
new Link { Href = DemoRouteConstants.Demos_GoogleMap_Documentation, Text = "Google Maps" },
9596
new Link { Href = DemoRouteConstants.Demos_Grid_Documentation, Text = "Grid" },
9697
new Link { Href = DemoRouteConstants.Demos_Message_Documentation, Text = "Message" },

‎BlazorExpress.Bulma.Demo.RCL/Layout/DocsMainLayout.razor.cs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ private HashSet<LinkGroup> GetLinkGroups()
105105
Links = [
106106
new Link { Href = DemoRouteConstants.Docs_Breadcrumb_Documentation, Text = "Breadcrumb" },
107107
new Link { Href = DemoRouteConstants.Docs_ConfirmDialog_Documentation, Text = "Confirm Dialog" },
108+
new Link { Href = DemoRouteConstants.Docs_Dropdown_Documentation, Text = "Dropdown" },
108109
new Link { Href = DemoRouteConstants.Docs_GoogleMap_Documentation, Text = "Google Maps" },
109110
new Link { Href = DemoRouteConstants.Docs_Grid_Documentation, Text = "Grid" },
110111
new Link { Href = DemoRouteConstants.Docs_Message_Documentation, Text = "Message" },

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Dropdown/DropdownDocumentation.razor‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
@attribute [Route(pageUrl)]
2+
@layout DemosMainLayout
3+
4+
<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
5+
6+
<PageHero Title="@pageTitle">
7+
<SubTitleTemplate>
8+
@((MarkupString)pageDescription)
9+
</SubTitleTemplate>
10+
</PageHero>
11+
12+
<DocsLink Href="@DemoRouteConstants.Docs_Dropdown_Documentation" />
13+
14+
<Section Class="p-0" Size="HeadingSize.H3" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
15+
<Block>
16+
The <strong>Dropdown</strong> component displays a menu of actions or links that appears when triggered, providing a compact way to present options to users.
17+
<br /><br />
18+
<strong>How to use:</strong>
19+
<div class="content">
20+
<ol>
21+
<li>Add the <code>Dropdown</code> component to your page.</li>
22+
<li>Place your trigger element (such as a button) inside <code>&lt;DropdownTrigger&gt;</code>.</li>
23+
<li>Define the dropdown menu items inside <code>&lt;DropdownContent&gt;</code> using <code>DropdownLinkItem</code> for links and <code>DropdownDivider</code> for separators.</li>
24+
<li>Use the <code>IsActive</code> parameter on a <code>DropdownLinkItem</code> to highlight the active item if needed.</li>
25+
<li>Refer to the demo code for a basic dropdown setup and customization options.</li>
26+
</ol>
27+
</div>
28+
This demo shows the essential structure for a dropdown menu and how to organize its content for user interaction.
29+
</Block>
30+
<Demo Type="typeof(Dropdown_Demo_01_How_it_works)" Tabs="true" />
31+
</Section>
32+
33+
<Section Class="p-0" Size="HeadingSize.H3" Name="Dropdown content" PageUrl="@pageUrl" Link="dropdown-content">
34+
<Block>
35+
The <strong>Dropdown</strong> menu supports any type of content, not just links, allowing for flexible layouts and custom markup.
36+
<br /><br />
37+
<strong>How to use:</strong>
38+
<div class="content">
39+
<ol>
40+
<li>Place any markup (such as paragraphs, divs, or custom components) inside <code>&lt;DropdownContent&gt;</code>.</li>
41+
<li>Use <code>DropdownItem</code> for custom content and <code>DropdownLinkItem</code> for navigational links.</li>
42+
<li>Insert <code>DropdownDivider</code> to visually separate groups of items.</li>
43+
<li>Refer to the demo code for examples of mixed content and layout options.</li>
44+
</ol>
45+
</div>
46+
This demo illustrates how to combine different content types within a dropdown for advanced scenarios.
47+
</Block>
48+
<Demo Type="typeof(Dropdown_Demo_02_Content)" Tabs="true" />
49+
</Section>
50+
51+
<Section Class="p-0" Size="HeadingSize.H3" Name="Hoverable" PageUrl="@pageUrl" Link="hoverable">
52+
<Block>
53+
The <strong>Hoverable Dropdown</strong> opens automatically when the user hovers over the trigger, offering a seamless and interactive experience.
54+
<br /><br />
55+
<strong>How to use:</strong>
56+
<div class="content">
57+
<ol>
58+
<li>Add the <code>Dropdown</code> component and set <code>IsHoverable="true"</code>.</li>
59+
<li>Place your trigger element inside <code>&lt;DropdownTrigger&gt;</code> and menu items inside <code>&lt;DropdownContent&gt;</code>.</li>
60+
<li>The dropdown will open on mouse hover without requiring a click.</li>
61+
<li>Refer to the demo code for a working example of a hoverable dropdown.</li>
62+
</ol>
63+
</div>
64+
This demo demonstrates how to enable hover-based activation for dropdown menus.
65+
</Block>
66+
<Demo Type="typeof(Dropdown_Demo_03_Hoverable)" Tabs="true" />
67+
</Section>
68+
69+
<Section Class="p-0" Size="HeadingSize.H3" Name="Right aligned" PageUrl="@pageUrl" Link="right-aligned">
70+
<Block>
71+
The <strong>Right-aligned Dropdown</strong> positions the dropdown menu to the right edge of the trigger, useful for aligning menus in toolbars or layouts.
72+
<br /><br />
73+
<strong>How to use:</strong>
74+
<div class="content">
75+
<ol>
76+
<li>Add the <code>Dropdown</code> component and set <code>IsRight="true"</code> to align the menu to the right.</li>
77+
<li>Place your trigger and menu items as usual.</li>
78+
<li>By default, dropdowns are left-aligned; use <code>IsRight</code> for right alignment.</li>
79+
<li>Refer to the demo code for both left and right-aligned dropdown examples.</li>
80+
</ol>
81+
</div>
82+
This demo shows how to control the alignment of dropdown menus for different UI needs.
83+
</Block>
84+
<Demo Type="typeof(Dropdown_Demo_04_Right_aligned)" Tabs="true" />
85+
</Section>
86+
87+
<Section Class="p-0" Size="HeadingSize.H3" Name="Dropup" PageUrl="@pageUrl" Link="dropup">
88+
<Block>
89+
The <strong>Dropup</strong> variant displays the dropdown menu above the trigger, ideal for use near the bottom of the viewport.
90+
<br /><br />
91+
<strong>How to use:</strong>
92+
<div class="content">
93+
<ol>
94+
<li>Add the <code>Dropdown</code> component and set <code>IsUp="true"</code>.</li>
95+
<li>Place your trigger and menu items as usual.</li>
96+
<li>The dropdown menu will appear above the trigger button.</li>
97+
<li>Refer to the demo code for a dropup configuration example.</li>
98+
</ol>
99+
</div>
100+
This demo demonstrates how to create a dropup menu for improved usability in certain layouts.
101+
</Block>
102+
<Demo Type="typeof(Dropdown_Demo_05_Dropup)" Tabs="true" />
103+
</Section>
104+
105+
<Section Class="p-0" Size="HeadingSize.H3" Name="Icon only" PageUrl="@pageUrl" Link="icon-only">
106+
<Block>
107+
The <strong>Icon-only Dropdown</strong> uses an icon as the trigger, providing a compact and modern way to access menu actions.
108+
<br /><br />
109+
<strong>How to use:</strong>
110+
<div class="content">
111+
<ol>
112+
<li>Add the <code>Dropdown</code> component and set <code>IsRight="true"</code> if you want right alignment.</li>
113+
<li>Place an icon component (such as <code>BootstrapIcon</code>) inside <code>&lt;DropdownTrigger&gt;</code> to use it as the clickable element.</li>
114+
<li>Define your menu items inside <code>&lt;DropdownContent&gt;</code> as usual.</li>
115+
<li>Refer to the demo code for an example of an icon-only dropdown menu.</li>
116+
</ol>
117+
</div>
118+
This demo shows how to implement a dropdown menu triggered by an icon for streamlined interfaces.
119+
</Block>
120+
<Demo Type="typeof(Dropdown_Demo_06_Icon_only)" Tabs="true" />
121+
</Section>
122+
123+
@code {
124+
private const string componentName = nameof(Dropdown);
125+
private const string pageUrl = DemoRouteConstants.Demos_Dropdown_Documentation;
126+
private const string pageTitle = componentName;
127+
private const string pageDescription = $"An interactive <code>{componentName}</code> component for discoverable content.";
128+
private const string metaTitle = $"Blazor {componentName} Component";
129+
private const string metaDescription = $"An interactive {componentName} component for discoverable content.";
130+
private const string imageUrl = DemoScreenshotSrcConstants.Dropdown;
131+
}

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Dropdown/Dropdown_Demo_01_How_it_works.razor‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<Dropdown>
2+
<DropdownTrigger>
3+
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
4+
<span>Dropdown button</span>
5+
<span class="icon is-small">
6+
<i class="bi bi-chevron-down" aria-hidden="true"></i>
7+
</span>
8+
</button>
9+
</DropdownTrigger>
10+
<DropdownContent>
11+
<DropdownLinkItem Href="#"> Dropdown item </DropdownLinkItem>
12+
<DropdownLinkItem Href="#"> Other dropdown item </DropdownLinkItem>
13+
<DropdownLinkItem Href="#" IsActive="true"> Active dropdown item </DropdownLinkItem>
14+
<DropdownLinkItem Href="#"> Other dropdown item </DropdownLinkItem>
15+
<DropdownDivider />
16+
<DropdownLinkItem Href="#"> With a divider </DropdownLinkItem>
17+
</DropdownContent>
18+
</Dropdown>

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Dropdown/Dropdown_Demo_02_Content.razor‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<Dropdown>
2+
<DropdownTrigger>
3+
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
4+
<span>Dropdown button</span>
5+
<span class="icon is-small">
6+
<i class="bi bi-chevron-down" aria-hidden="true"></i>
7+
</span>
8+
</button>
9+
</DropdownTrigger>
10+
<DropdownContent>
11+
<DropdownItem>
12+
<p>
13+
You can insert <strong>any type of content</strong> within the
14+
dropdown menu.
15+
</p>
16+
</DropdownItem>
17+
<DropdownDivider />
18+
<DropdownItem>
19+
<p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
20+
</DropdownItem>
21+
<DropdownDivider />
22+
<DropdownLinkItem Href="#"> This is a link item </DropdownLinkItem>
23+
</DropdownContent>
24+
</Dropdown>

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Dropdown/Dropdown_Demo_03_Hoverable.razor‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<Dropdown IsHoverable="true">
2+
<DropdownTrigger>
3+
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
4+
<span>Dropdown button</span>
5+
<span class="icon is-small">
6+
<i class="bi bi-chevron-down" aria-hidden="true"></i>
7+
</span>
8+
</button>
9+
</DropdownTrigger>
10+
<DropdownContent>
11+
<DropdownItem>
12+
<p>
13+
You can insert <strong>any type of content</strong> within the
14+
dropdown menu.
15+
</p>
16+
</DropdownItem>
17+
</DropdownContent>
18+
</Dropdown>

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Dropdown/Dropdown_Demo_04_Right_aligned.razor‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<Dropdown>
2+
<DropdownTrigger>
3+
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
4+
<span>Left aligned</span>
5+
<span class="icon is-small">
6+
<i class="bi bi-chevron-down" aria-hidden="true"></i>
7+
</span>
8+
</button>
9+
</DropdownTrigger>
10+
<DropdownContent>
11+
<DropdownItem>
12+
<p>The dropdown is <strong>left-aligned</strong> by default.</p>
13+
</DropdownItem>
14+
</DropdownContent>
15+
</Dropdown>
16+
17+
<Dropdown IsRight="true">
18+
<DropdownTrigger>
19+
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
20+
<span>Right aligned</span>
21+
<span class="icon is-small">
22+
<i class="bi bi-chevron-down" aria-hidden="true"></i>
23+
</span>
24+
</button>
25+
</DropdownTrigger>
26+
<DropdownContent>
27+
<DropdownItem>
28+
<p>
29+
Add the <code>is-right</code> modifier for a
30+
<strong>right-aligned</strong> dropdown.
31+
</p>
32+
</DropdownItem>
33+
</DropdownContent>
34+
</Dropdown>

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Dropdown/Dropdown_Demo_05_Dropup.razor‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<Dropdown IsUp="true">
2+
<DropdownTrigger>
3+
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
4+
<span>Dropup button</span>
5+
<span class="icon is-small">
6+
<i class="bi bi-chevron-up" aria-hidden="true"></i>
7+
</span>
8+
</button>
9+
</DropdownTrigger>
10+
<DropdownContent>
11+
<DropdownItem>
12+
<p>
13+
You can add the <code>is-up</code> modifier to have a dropdown menu
14+
that appears above the dropdown button.
15+
</p>
16+
</DropdownItem>
17+
</DropdownContent>
18+
</Dropdown>

‎BlazorExpress.Bulma.Demo.RCL/Pages/Demos/Dropdown/Dropdown_Demo_06_Icon_only.razor‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div style="justify-self: self-end;">
2+
<Dropdown IsRight="true">
3+
<DropdownTrigger>
4+
<BootstrapIcon Name="BootstrapIconName.ThreeDotsVertical" role="button" />
5+
</DropdownTrigger>
6+
<DropdownContent>
7+
<DropdownLinkItem Href="#"> Overview </DropdownLinkItem>
8+
<DropdownLinkItem Href="#"> Block </DropdownLinkItem>
9+
<DropdownLinkItem Href="#"> Box </DropdownLinkItem>
10+
<DropdownLinkItem Href="#"> Progress Bar </DropdownLinkItem>
11+
<DropdownLinkItem Href="#"> Pdf Viewer </DropdownLinkItem>
12+
<DropdownLinkItem Href="#"> Bootstrap Icons </DropdownLinkItem>
13+
<DropdownLinkItem Href="#"> Google Maps </DropdownLinkItem>
14+
</DropdownContent>
15+
</Dropdown>
16+
</div>

0 commit comments

Comments
 (0)