Skip to content

Commit 114361e

Browse files
gvreddy04gvreddy04
authored
Ribbon component (#652)
* Ribbon component
1 parent 833ca29 commit 114361e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+1275
-22
lines changed

‎BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
</ItemGroup>
2121

2222
<ItemGroup>
23+
<Folder Include="Pages\Ribbon\" />
2324
<Folder Include="Pages\SortableList\" />
2425
</ItemGroup>
2526

‎BlazorBootstrap.Demo.RCL/Pages/Index.razor‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,11 @@
160160
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Sliders" class="me-2" /> Range Input</h4>
161161
</a>
162162
</div>
163+
<div class="col-sm-4 mb-2">
164+
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/ribbon">
165+
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.WindowStack" class="me-2" /> Ribbon <Badge Color="BadgeColor.Danger">New</Badge></h4>
166+
</a>
167+
</div>
163168
<div class="col-sm-4 mb-2">
164169
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/script-loader">
165170
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.CodeSlash" class="me-2" /> Script Loader</h4>

‎BlazorBootstrap.Demo.RCL/Pages/Ribbon/RibbonDocumentation.razor‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
@page "/ribbon"
2+
3+
<PageTitle>@title</PageTitle>
4+
5+
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
6+
7+
<h1>Blazor Ribbon</h1>
8+
<div class="lead mb-3">Documentation and examples for using the Blazor Bootstrap Ribbon component.</div>
9+
10+
@* <CarbonAds /> *@
11+
12+
<SectionHeading Size="HeadingSize.H2" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
13+
<div class="mb-3">In the following example, you will see a ribbon similar to the one found in Outlook.</div>
14+
<Demo Type="typeof(Ribbon_Demo_01_How_It_Works)" Tabs="true" />
15+
16+
<SectionHeading Size="HeadingSize.H2" Text="Other icons" PageUrl="@pageUrl" HashTagName="other-icons" />
17+
<div class="mb-3">In the following example, instead of icons like Bootstrap, Font Awesome, etc., we used PNG icons.</div>
18+
<Demo Type="typeof(Ribbon_Demo_02_Images)" Tabs="true" />
19+
20+
<Callout Type="CalloutType.Warning" HideHeading="true">
21+
<b>NOTE:</b> All the PNG icons used on this page are from Flaticon with a premium license only.
22+
</Callout>
23+
24+
@code {
25+
private string pageUrl = "/ribbon";
26+
private string title = "Blazor Ribbon Component";
27+
private string description = "Documentation and examples for using the Blazor Bootstrap Ribbon component.";
28+
private string imageUrl = "https://i.imgur.com/LpZVLbF.png";
29+
}

‎BlazorBootstrap.Demo.RCL/Pages/Ribbon/Ribbon_Demo_01_How_It_Works.razor‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<Ribbon OnClick="OnRibbonItemClick">
2+
<RibbonTab Title="Home" IsActive="true">
3+
<Content>
4+
<!-- New -->
5+
<RibbonItemGroup Text="New">
6+
<RibbonItem Name="NewEmail" IconName="IconName.EnvelopePlus" IconSize="IconSize.x3" IsFirstItem="true">New<br />Email</RibbonItem>
7+
<RibbonItem Name="Appointment" IconName="IconName.Calendar3Event" IconSize="IconSize.x3" Text="Appointment" IsLastItem="true" />
8+
</RibbonItemGroup>
9+
<!-- Delete -->
10+
<RibbonItemGroup Text="Delete">
11+
<RibbonItem Name="Delete" IconColor="IconColor.Danger" IconName="IconName.Trash" IconSize="IconSize.x3" Text="Delete" IsFirstItem="true" />
12+
<RibbonItem Name="Archive" IconColor="IconColor.Primary" IconName="IconName.Archive" IconSize="IconSize.x3" Text="Archive" IsLastItem="true" />
13+
</RibbonItemGroup>
14+
</Content>
15+
</RibbonTab>
16+
<RibbonTab Title="Send / Receive">
17+
<Content>
18+
<!-- Send & Receive -->
19+
<RibbonItemGroup Text="Send & Receive">
20+
<RibbonItem Name="SendReceiveAllFolders" IconColor="IconColor.Success" IconName="IconName.EnvelopePlus" IconSize="IconSize.x3" IsFirstItem="true">Send/Receive<br />All Folders</RibbonItem>
21+
<RibbonItem Name="UpdateFolder" IconColor="IconColor.Primary" IconName="IconName.Calendar3Event" IconSize="IconSize.x3" IsLastItem="true">Update<br />Folder</RibbonItem>
22+
</RibbonItemGroup>
23+
<!-- Download -->
24+
<RibbonItemGroup Text="Download">
25+
<RibbonItem Name="ShowProgress" IconColor="IconColor.Success" IconName="IconName.Trash" IconSize="IconSize.x3" IsFirstItem="true">Show<br />Progress</RibbonItem>
26+
<RibbonItem Name="CancelAll" IconColor="IconColor.Primary" IconName="IconName.XSquareFill" IconSize="IconSize.x3" IsLastItem="true">Cancel<br />All</RibbonItem>
27+
</RibbonItemGroup>
28+
</Content>
29+
</RibbonTab>
30+
<RibbonTab Title="Folder">
31+
<Content>
32+
<!-- New -->
33+
<RibbonItemGroup Text="New">
34+
<RibbonItem Name="NewFolder" IconColor="IconColor.Success" IconName="IconName.FolderPlus" IconSize="IconSize.x3" IsFirstItem="true">New<br />Folder</RibbonItem>
35+
<RibbonItem Name="NewSearchFolder" IconColor="IconColor.Primary" IconName="IconName.Search" IconSize="IconSize.x3" IsLastItem="true">New<br />Search Folder</RibbonItem>
36+
</RibbonItemGroup>
37+
<!-- Actions -->
38+
<RibbonItemGroup Text="Actions">
39+
<RibbonItem Name="RenameFolder" IconColor="IconColor.Success" IconName="IconName.CursorText" IconSize="IconSize.x3" IsFirstItem="true">Rename<br />Folder</RibbonItem>
40+
<RibbonItem Name="CopyFolder" IconColor="IconColor.Primary" IconName="IconName.Copy" IconSize="IconSize.x3">Copy<br />Folder</RibbonItem>
41+
<RibbonItem Name="MoveFolder" IconColor="IconColor.Primary" IconName="IconName.ArrowRight" IconSize="IconSize.x3">Move<br />Folder</RibbonItem>
42+
<RibbonItem Name="DeleteFolder" IconColor="IconColor.Primary" IconName="IconName.FolderX" IconSize="IconSize.x3" IsLastItem="true">Delete<br />Folder</RibbonItem>
43+
</RibbonItemGroup>
44+
</Content>
45+
</RibbonTab>
46+
</Ribbon>
47+
48+
<div class="mt-2">
49+
Selected ribbon item: @selectedRibbonItem
50+
</div>
51+
52+
@code {
53+
string? selectedRibbonItem;
54+
55+
private void OnRibbonItemClick(RibbonItemEventArgs args)
56+
{
57+
selectedRibbonItem = args.Name;
58+
}
59+
}

‎BlazorBootstrap.Demo.RCL/Pages/Ribbon/Ribbon_Demo_02_Images.razor‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<Ribbon OnClick="OnRibbonItemClick">
2+
<RibbonTab Title="Home">
3+
<Content>
4+
<!-- New -->
5+
<RibbonItemGroup Text="New">
6+
<RibbonItem Name="NewEmail" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/new-email.png" IsFirstItem="true">New<br />Email</RibbonItem>
7+
<RibbonItem Name="Appointment" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/calendar.png" Text="Appointment" IsLastItem="true" />
8+
</RibbonItemGroup>
9+
<!-- Delete -->
10+
<RibbonItemGroup Text="Delete">
11+
<RibbonItem Name="Delete" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/bin.png" Text="Delete" IsFirstItem="true" />
12+
<RibbonItem Name="Archive" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/archive.png" Text="Archive" IsLastItem="true" />
13+
</RibbonItemGroup>
14+
</Content>
15+
</RibbonTab>
16+
<RibbonTab Title="Send / Receive" IsActive="true">
17+
<Content>
18+
<!-- Send & Receive -->
19+
<RibbonItemGroup Text="Send & Receive">
20+
<RibbonItem Name="SendReceiveAllFolders" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/refresh.png" IsFirstItem="true">Send/Receive<br />All Folders</RibbonItem>
21+
<RibbonItem Name="UpdateFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-sync.png" IsLastItem="true">Update<br />Folder</RibbonItem>
22+
</RibbonItemGroup>
23+
<!-- Download -->
24+
<RibbonItemGroup Text="Download">
25+
<RibbonItem Name="ShowProgress" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/loading-bar.png" IsFirstItem="true">Show<br />Progress</RibbonItem>
26+
<RibbonItem Name="CancelAll" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/cancelled.png" IsLastItem="true">Cancel<br />All</RibbonItem>
27+
</RibbonItemGroup>
28+
</Content>
29+
</RibbonTab>
30+
<RibbonTab Title="Folder" IsActive="true">
31+
<Content>
32+
<!-- New -->
33+
<RibbonItemGroup Text="New">
34+
<RibbonItem Name="NewFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-add.png" IsFirstItem="true">New<br />Folder</RibbonItem>
35+
<RibbonItem Name="NewSearchFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-search.png" IsLastItem="true">New<br />Search Folder</RibbonItem>
36+
</RibbonItemGroup>
37+
<!-- Actions -->
38+
<RibbonItemGroup Text="Actions">
39+
<RibbonItem Name="RenameFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-rename.png" IsFirstItem="true">Rename<br />Folder</RibbonItem>
40+
<RibbonItem Name="CopyFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-copy.png">Copy<br />Folder</RibbonItem>
41+
<RibbonItem Name="MoveFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-move.png">Move<br />Folder</RibbonItem>
42+
<RibbonItem Name="DeleteFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-delete.png" IsLastItem="true">Delete<br />Folder</RibbonItem>
43+
</RibbonItemGroup>
44+
</Content>
45+
</RibbonTab>
46+
</Ribbon>
47+
48+
<div class="mt-2">
49+
Selected ribbon item: @selectedRibbonItem
50+
</div>
51+
52+
@code {
53+
string? selectedRibbonItem;
54+
55+
private void OnRibbonItemClick(RibbonItemEventArgs args)
56+
{
57+
selectedRibbonItem = args.Name;
58+
}
59+
}

‎BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -64,14 +64,15 @@ private IEnumerable<NavItem> GetNavItems()
6464
new (){ Id = "516", Text = "Placeholders", Href = "/placeholders", IconName = IconName.ColumnsGap, ParentId = "5" },
6565
new (){ Id = "517", Text = "Preload", Href = "/preload", IconName = IconName.ArrowClockwise, ParentId = "5" },
6666
new (){ Id = "518", Text = "Progress", Href = "/progress", IconName = IconName.UsbC, ParentId = "5" },
67-
new (){ Id = "519", Text = "Script Loader", Href = "/script-loader", IconName = IconName.CodeSlash, ParentId = "5" },
68-
new (){ Id = "520", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" },
69-
new (){ Id = "521", Text = "Sidebar 2", Href = "/sidebar2", IconName = IconName.ListNested, ParentId = "5" },
70-
new (){ Id = "521", Text = "Sortable List", Href = "/sortable-list", IconName = IconName.ArrowsMove, ParentId = "5" },
71-
new (){ Id = "522", Text = "Spinner", Href = "/spinners", IconName = IconName.ArrowRepeat, ParentId = "5" },
72-
new (){ Id = "523", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" },
73-
new (){ Id = "524", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" },
74-
new (){ Id = "525", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" },
67+
new (){ Id = "519", Text = "Ribbon", Href = "/ribbon", IconName = IconName.WindowStack, ParentId = "5" },
68+
new (){ Id = "520", Text = "Script Loader", Href = "/script-loader", IconName = IconName.CodeSlash, ParentId = "5" },
69+
new (){ Id = "521", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" },
70+
new (){ Id = "522", Text = "Sidebar 2", Href = "/sidebar2", IconName = IconName.ListNested, ParentId = "5" },
71+
new (){ Id = "523", Text = "Sortable List", Href = "/sortable-list", IconName = IconName.ArrowsMove, ParentId = "5" },
72+
new (){ Id = "524", Text = "Spinner", Href = "/spinners", IconName = IconName.ArrowRepeat, ParentId = "5" },
73+
new (){ Id = "525", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" },
74+
new (){ Id = "526", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" },
75+
new (){ Id = "527", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" },
7576

7677
new (){ Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning },
7778
new (){ Id = "600", Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All },

‎BlazorBootstrap.Demo.RCL/wwwroot/blazorbootstrap.demo.rcl.css‎ renamed to ‎BlazorBootstrap.Demo.RCL/wwwroot/css/blazorbootstrap.demo.rcl.css‎

File renamed without changes.

‎BlazorBootstrap.Demo.RCL/wwwroot/icons/archive.png‎

398 Bytes
Loading

‎BlazorBootstrap.Demo.RCL/wwwroot/icons/bin.png‎

465 Bytes
Loading

‎BlazorBootstrap.Demo.RCL/wwwroot/icons/calendar.png‎

913 Bytes
Loading

0 commit comments

Comments
 (0)