Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ribbon component #652

Merged
merged 10 commits into from
Apr 14, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Ribbon demos updated
gvreddy04 committed Apr 13, 2024
commit e5075c6a034fee114669552787576f4c81387e26
17 changes: 13 additions & 4 deletions BlazorBootstrap.Demo.RCL/Pages/Ribbon/RibbonDocumentation.razor
Original file line number Diff line number Diff line change
@@ -5,19 +5,28 @@
<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />

<h1>Blazor Ribbon</h1>
<div class="lead mb-3">Documentation and examples for using the Blazor Progress component featuring support for stacked bars, animated backgrounds, and text labels.</div>
<div class="lead mb-3">Documentation and examples for using the Blazor Bootstrap Ribbon component.</div>

@* <CarbonAds /> *@

<SectionHeading Size="HeadingSize.H2" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
<div class="mb-3">In the following example, you will see a ribbon similar to the one found in Outlook.</div>
<Demo Type="typeof(Ribbon_Demo_01_How_It_Works)" Tabs="true" />

<SectionHeading Size="HeadingSize.H2" Text="Images" PageUrl="@pageUrl" HashTagName="images" />
<SectionHeading Size="HeadingSize.H2" Text="Other icons" PageUrl="@pageUrl" HashTagName="other-icons" />
<div class="mb-3">In the following example, instead of icons like Bootstrap, Font Awesome, etc., we used PNG icons.</div>
<Demo Type="typeof(Ribbon_Demo_02_Images)" Tabs="true" />

<Callout Type="CalloutType.Warning" HideHeading="true">
<b>NOTE:</b> All the PNG icons used on this page are from Flaticon with a premium license only.
</Callout>

@code {
private string pageUrl = "/ribbon";
private string title = "Blazor Ribbon Component";
private string description = "Documentation and examples for using Blazor Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels."; // TODO: update
private string imageUrl = "https://i.imgur.com/MK142lQ.png"; // TODO: update
private string description = "Documentation and examples for using the Blazor Bootstrap Ribbon component.";
private string imageUrl = "https://i.imgur.com/LpZVLbF.png";

// 1. https://i.imgur.com/6liyurS.png
// 2. https://i.imgur.com/KmWBVvz.png
}
Original file line number Diff line number Diff line change
@@ -1,46 +1,59 @@
<Ribbon EnableFadeEffect="true" NavStyle="NavStyle.Underline">
<Ribbon OnClick="OnRibbonItemClick">
<RibbonTab Title="Home" IsActive="true">
<Content>
<!-- New -->
<RibbonItemGroup Text="New">
<RibbonItem IconName="IconName.EnvelopePlus" IconSize="IconSize.x3" Text="New Email" IsFirstItem="true" />
<RibbonItem IconName="IconName.Calendar3Event" IconSize="IconSize.x3" Text="Appointment" IsLastItem="true" />
<RibbonItem Name="NewEmail" IconName="IconName.EnvelopePlus" IconSize="IconSize.x3" IsFirstItem="true">New<br />Email</RibbonItem>
<RibbonItem Name="Appointment" IconName="IconName.Calendar3Event" IconSize="IconSize.x3" Text="Appointment" IsLastItem="true" />
</RibbonItemGroup>
<!-- Delete -->
<RibbonItemGroup Text="Delete">
<RibbonItem IconColor="IconColor.Danger" IconName="IconName.Trash" IconSize="IconSize.x3" Text="Delete" IsFirstItem="true" />
<RibbonItem IconColor="IconColor.Primary" IconName="IconName.Archive" IconSize="IconSize.x3" Text="Archive" IsLastItem="true" />
<RibbonItem Name="Delete" IconColor="IconColor.Danger" IconName="IconName.Trash" IconSize="IconSize.x3" Text="Delete" IsFirstItem="true" />
<RibbonItem Name="Archive" IconColor="IconColor.Primary" IconName="IconName.Archive" IconSize="IconSize.x3" Text="Archive" IsLastItem="true" />
</RibbonItemGroup>
</Content>
</RibbonTab>
<RibbonTab Title="Send / Receive">
<Content>
<!-- Send & Receive -->
<RibbonItemGroup Text="Send & Receive">
<RibbonItem IconColor="IconColor.Success" IconName="IconName.EnvelopePlus" IconSize="IconSize.x3" Text="Send/Receive All Folders" IsFirstItem="true" />
<RibbonItem IconColor="IconColor.Primary" IconName="IconName.Calendar3Event" IconSize="IconSize.x3" Text="Update Folder" IsLastItem="true" />
<RibbonItem Name="SendReceiveAllFolders" IconColor="IconColor.Success" IconName="IconName.EnvelopePlus" IconSize="IconSize.x3" IsFirstItem="true">Send/Receive<br />All Folders</RibbonItem>
<RibbonItem Name="UpdateFolder" IconColor="IconColor.Primary" IconName="IconName.Calendar3Event" IconSize="IconSize.x3" IsLastItem="true">Update<br />Folder</RibbonItem>
</RibbonItemGroup>
<!-- Download -->
<RibbonItemGroup Text="Download">
<RibbonItem IconColor="IconColor.Success" IconName="IconName.Trash" IconSize="IconSize.x3" Text="Show Progress" IsFirstItem="true" />
<RibbonItem IconColor="IconColor.Primary" IconName="IconName.XSquareFill" IconSize="IconSize.x3" Text="Cancel All" IsLastItem="true" />
<RibbonItem Name="ShowProgress" IconColor="IconColor.Success" IconName="IconName.Trash" IconSize="IconSize.x3" IsFirstItem="true">Show<br />Progress</RibbonItem>
<RibbonItem Name="CancelAll" IconColor="IconColor.Primary" IconName="IconName.XSquareFill" IconSize="IconSize.x3" IsLastItem="true">Cancel<br />All</RibbonItem>
</RibbonItemGroup>
</Content>
</RibbonTab>
<RibbonTab Title="Folder">
<Content>
<!-- New -->
<RibbonItemGroup Text="New">
<RibbonItem IconColor="IconColor.Success" IconName="IconName.FolderPlus" IconSize="IconSize.x3" Text="New Folder" IsFirstItem="true" />
<RibbonItem IconColor="IconColor.Primary" IconName="IconName.Search" IconSize="IconSize.x3" Text="New Search Folder" IsLastItem="true" />
<RibbonItem Name="NewFolder" IconColor="IconColor.Success" IconName="IconName.FolderPlus" IconSize="IconSize.x3" IsFirstItem="true">New<br />Folder</RibbonItem>
<RibbonItem Name="NewSearchFolder" IconColor="IconColor.Primary" IconName="IconName.Search" IconSize="IconSize.x3" IsLastItem="true">New<br />Search Folder</RibbonItem>
</RibbonItemGroup>
<!-- Actions -->
<RibbonItemGroup Text="Actions">
<RibbonItem IconColor="IconColor.Success" IconName="IconName.CursorText" IconSize="IconSize.x3" Text="Rename Folder" IsFirstItem="true" />
<RibbonItem IconColor="IconColor.Primary" IconName="IconName.Copy" IconSize="IconSize.x3" Text="Copy Folder" />
<RibbonItem IconColor="IconColor.Primary" IconName="IconName.ArrowRight" IconSize="IconSize.x3" Text="Move Folder" />
<RibbonItem IconColor="IconColor.Primary" IconName="IconName.FolderX" IconSize="IconSize.x3" Text="Delete Folder" IsLastItem="true" />
<RibbonItem Name="RenameFolder" IconColor="IconColor.Success" IconName="IconName.CursorText" IconSize="IconSize.x3" IsFirstItem="true">Rename<br />Folder</RibbonItem>
<RibbonItem Name="CopyFolder" IconColor="IconColor.Primary" IconName="IconName.Copy" IconSize="IconSize.x3">Copy<br />Folder</RibbonItem>
<RibbonItem Name="MoveFolder" IconColor="IconColor.Primary" IconName="IconName.ArrowRight" IconSize="IconSize.x3">Move<br />Folder</RibbonItem>
<RibbonItem Name="DeleteFolder" IconColor="IconColor.Primary" IconName="IconName.FolderX" IconSize="IconSize.x3" IsLastItem="true">Delete<br />Folder</RibbonItem>
</RibbonItemGroup>
</Content>
</RibbonTab>
</Ribbon>

<div class="mt-2">
Selected ribbon item: @selectedRibbonItem
</div>

@code {
string? selectedRibbonItem;

private void OnRibbonItemClick(RibbonItemEventArgs args)
{
selectedRibbonItem = args.Name;
}
}
51 changes: 29 additions & 22 deletions BlazorBootstrap.Demo.RCL/Pages/Ribbon/Ribbon_Demo_02_Images.razor
Original file line number Diff line number Diff line change
@@ -1,52 +1,59 @@
<Ribbon NavStyle="NavStyle.Underline">
<Ribbon OnClick="OnRibbonItemClick">
<RibbonTab Title="Home">
<Content>
<!-- New -->
<RibbonItemGroup Text="New">
<RibbonItem ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/new-email.png" IsFirstItem="true">
New<br />Email
</RibbonItem>
<RibbonItem ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/calendar.png" Text="Appointment" IsLastItem="true" />
<RibbonItem Name="NewEmail" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/new-email.png" IsFirstItem="true">New<br />Email</RibbonItem>
<RibbonItem Name="Appointment" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/calendar.png" Text="Appointment" IsLastItem="true" />
</RibbonItemGroup>
<!-- Delete -->
<RibbonItemGroup Text="Delete">
<RibbonItem ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/bin.png" Text="Delete" IsFirstItem="true" />
<RibbonItem ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/archive.png" Text="Archive" IsLastItem="true" />
<RibbonItem Name="Delete" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/bin.png" Text="Delete" IsFirstItem="true" />
<RibbonItem Name="Archive" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/archive.png" Text="Archive" IsLastItem="true" />
</RibbonItemGroup>
</Content>
</RibbonTab>
<RibbonTab Title="Send / Receive" IsActive="true">
<Content>
<!-- Send & Receive -->
<RibbonItemGroup Text="Send & Receive">
<RibbonItem ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/refresh.png" IsFirstItem="true">
Send/Receive<br />All Folders
</RibbonItem>
<RibbonItem ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder.png" IsLastItem="true">
Update<br />Folder
</RibbonItem>
<RibbonItem Name="SendReceiveAllFolders" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/refresh.png" IsFirstItem="true">Send/Receive<br />All Folders</RibbonItem>
<RibbonItem Name="UpdateFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-sync.png" IsLastItem="true">Update<br />Folder</RibbonItem>
</RibbonItemGroup>
<!-- Download -->
<RibbonItemGroup Text="Download">
<RibbonItem ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/loading-bar.png" IsFirstItem="true">Show<br />Progress</RibbonItem>
<RibbonItem ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/cancelled.png" IsLastItem="true">Cancel<br />All</RibbonItem>
<RibbonItem Name="ShowProgress" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/loading-bar.png" IsFirstItem="true">Show<br />Progress</RibbonItem>
<RibbonItem Name="CancelAll" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/cancelled.png" IsLastItem="true">Cancel<br />All</RibbonItem>
</RibbonItemGroup>
</Content>
</RibbonTab>
<RibbonTab Title="Folder">
<RibbonTab Title="Folder" IsActive="true">
<Content>
<!-- New -->
<RibbonItemGroup Text="New">
<RibbonItem IconColor="IconColor.Success" IconName="IconName.FolderPlus" IconSize="IconSize.x3" Text="New Folder" IsFirstItem="true" />
<RibbonItem IconColor="IconColor.Primary" IconName="IconName.Search" IconSize="IconSize.x3" Text="New Search Folder" IsLastItem="true" />
<RibbonItem Name="NewFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-add.png" IsFirstItem="true">New<br />Folder</RibbonItem>
<RibbonItem Name="NewSearchFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-search.png" IsLastItem="true">New<br />Search Folder</RibbonItem>
</RibbonItemGroup>
<!-- Actions -->
<RibbonItemGroup Text="Actions">
<RibbonItem IconColor="IconColor.Success" IconName="IconName.CursorText" IconSize="IconSize.x3" Text="Rename Folder" IsFirstItem="true" />
<RibbonItem IconColor="IconColor.Primary" IconName="IconName.Copy" IconSize="IconSize.x3" Text="Copy Folder" />
<RibbonItem IconColor="IconColor.Primary" IconName="IconName.ArrowRight" IconSize="IconSize.x3" Text="Move Folder" />
<RibbonItem IconColor="IconColor.Primary" IconName="IconName.FolderX" IconSize="IconSize.x3" Text="Delete Folder" IsLastItem="true" />
<RibbonItem Name="RenameFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-rename.png" IsFirstItem="true">Rename<br />Folder</RibbonItem>
<RibbonItem Name="CopyFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-copy.png">Copy<br />Folder</RibbonItem>
<RibbonItem Name="MoveFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-move.png">Move<br />Folder</RibbonItem>
<RibbonItem Name="DeleteFolder" ImgSrc="/_content/BlazorBootstrap.Demo.RCL/icons/folder-delete.png" IsLastItem="true">Delete<br />Folder</RibbonItem>
</RibbonItemGroup>
</Content>
</RibbonTab>
</Ribbon>

<div class="mt-2">
Selected ribbon item: @selectedRibbonItem
</div>

@code {
string? selectedRibbonItem;

private void OnRibbonItemClick(RibbonItemEventArgs args)
{
selectedRibbonItem = args.Name;
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions blazorbootstrap/BlazorBootstrap.csproj
Original file line number Diff line number Diff line change
@@ -48,4 +48,8 @@
<PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.26" />
</ItemGroup>

<ItemGroup>
<Folder Include="EventArguments\Ribbon\" />
</ItemGroup>

</Project>
6 changes: 4 additions & 2 deletions blazorbootstrap/Components/Ribbon/Ribbon.razor
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@namespace BlazorBootstrap
@inherits BlazorBootstrapComponentBase

<CascadingValue Value="@(this)" IsFixed="true">
<CascadingValue Value="this" Name="Ribbon1" IsFixed="true">
@ChildContent
</CascadingValue>

@@ -35,7 +35,9 @@
{
<div class="tab-pane @(EnableFadeEffect ? "fade" : "")" id="nav-@t.ElementId" role="tabpanel" aria-labelledby="@t.ElementId">
<div class="d-flex flex-row border">
@t.Content
<CascadingValue Value="this" Name="Ribbon2" IsFixed="true">
@t.Content
</CascadingValue>
</div>
</div>
}
16 changes: 15 additions & 1 deletion blazorbootstrap/Components/Ribbon/Ribbon.razor.cs
Original file line number Diff line number Diff line change
@@ -30,6 +30,8 @@ protected override void BuildClasses()
/// <inheritdoc />
protected override async ValueTask DisposeAsync(bool disposing)
{
// TODO: update

if (disposing) tabs = null;

await base.DisposeAsync(disposing);
@@ -254,6 +256,12 @@ internal async Task SetDefaultActiveTabAsync()
await ShowTabAsync(activeTab);
}

internal async Task OnRibbonItemClick(RibbonItemEventArgs args)
{
if (OnClick.HasDelegate)
await OnClick.InvokeAsync(args);
}

private async Task OnTabClickAsync(RibbonTab tab) => await ShowTabAsync(tab);

private async Task ShowTabAsync(RibbonTab tab)
@@ -297,7 +305,13 @@ private async Task ShowTabAsync(RibbonTab tab)
/// Get or sets the nav style.
/// </summary>
[Parameter]
public NavStyle NavStyle { get; set; } = NavStyle.Tabs;
public NavStyle NavStyle { get; set; } = NavStyle.Underline;

/// <summary>
/// This event fires when the user clicks the corresponding <see cref="RibbonItem" />.
/// </summary>
[Parameter]
public EventCallback<RibbonItemEventArgs> OnClick { get; set; }

/// <summary>
/// This event fires after a new tab is shown (and thus the previous active tab is hidden).
61 changes: 0 additions & 61 deletions blazorbootstrap/Components/Ribbon/Ribbon2.razor

This file was deleted.

Loading