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.

Sign up for GitHub

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

Fix for responsive offcanvas #859

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix for responsive offcanvas #859

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6947923
- Fixed #849 by providing an option to suppress the default "offcanva…
SerratedSharp Aug 26, 2024
94a382d
Fix comment typo
SerratedSharp Aug 27, 2024
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
4 changes: 4 additions & 0 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,10 @@
<div class="mb-3">Blazor Bootstrap offcanvas component exposes a few events for hooking into offcanvas functionality.</div>
<Demo Type="typeof(Offcanvas_Demo_06_Events)" Tabs="true" />

<SectionHeading Size="HeadingSize.H2" Text="Responsive" PageUrl="@pageUrl" HashTagName="responsive" />
<div class="mb-3">Blazor Bootstrap offcanvas component can implement responsiveness to show its content inline on larger devices and revert to default hidden behavior on smaller devices. This example switches between the two responsive views at the lg breakpoint.</div>
<Demo Type="typeof(Offcanvas_Demo_07_Responsive)" Tabs="true" />

@code {
private string pageUrl = "/offcanvas";
private string title = "Blazor Offcanvas Component";
Expand Down
19 changes: 19 additions & 0 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/Offcanvas_Demo_07_Responsive.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
@* Per bootstrap documentation, disable the default "offcanvas" class and replace with responsive offcanvas-lg class.
This will make the offcanvas appear as a modal on small devices and on larger devices show the content inline.
*@
<Offcanvas @ref="offcanvas" Title="Responsive Offcanvas" Class="offcanvas-lg" EnableDefaultClass="false">
<BodyTemplate>...</BodyTemplate>
</Offcanvas>

@* Only show the button when the offcanvas is hidden below its breakpoint. *@
<Button Class="d-lg-none" Color="ButtonColor.Primary" @onclick="() => OnShowOffcanvasClick()">Show offcanvas</Button>

@code {
private Offcanvas offcanvas = default!;
private Placement placement;

private async Task OnShowOffcanvasClick()
{
await offcanvas.ShowAsync();
}
}
2 changes: 1 addition & 1 deletion blazorbootstrap/Components/Offcanvas/Offcanvas.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

@if (ShowCloseButton)
{
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#@Id" aria-label="Close"></button>
}
</div>
}
Expand Down
11 changes: 10 additions & 1 deletion blazorbootstrap/Components/Offcanvas/Offcanvas.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,19 @@ private async Task ShowAsync(string? title, Type? type, Dictionary<string, objec

protected override string? ClassNames =>
BuildClassNames(Class,
(BootstrapClass.Offcanvas, true),
(BootstrapClass.Offcanvas, EnableDefaultClass),
(Placement.ToOffcanvasPlacementClass(), true),
(Size.ToOffcanvasSizeClass(), true));

/// <summary>
/// When set to false, suppresses the rendering of the default "offcanvas" class, which must be ommitted in some scenarios such as a responsive offcanvas.
/// </summary>
/// <remarks>
/// Defaults to true.
/// </remarks>
[Parameter]
public bool EnableDefaultClass { get; set; } = true;

/// <summary>
/// Gets or sets the body CSS class.
/// </summary>
Expand Down