@inherits LocalizableComponentBase @* What opens in place on a desktop (the composer at the top of the feed, a reply under its post) and as a sheet from the bottom of a phone's screen (below md), over a dimmed page, with its heading and a close button; a tap outside it or Escape closes it too. Class is the inline look from md (padding, a raised panel). *@ @if (IsOpen) {
@Heading
@ChildContent
} @code { [Parameter] public bool IsOpen { get; set; } [Parameter] public EventCallback OnClose { get; set; } /// The sheet's heading on a phone. [Parameter] public string Heading { get; set; } [Parameter] public RenderFragment ChildContent { get; set; } [Parameter] public string Class { get; set; } [Inject] OverlayService Overlays { get; set; } IDisposable overlay; protected override void OnInitialized() => IsLoading = false; // open, the Back button closes it protected override void OnParametersSet() { if (IsOpen && overlay is null) overlay = Overlays.Open(() => InvokeAsync(Close)); else if (!IsOpen && overlay is not null) { overlay.Dispose(); overlay = null; } } public override async ValueTask DisposeAsync() { overlay?.Dispose(); await base.DisposeAsync(); } Task Close() => OnClose.InvokeAsync(); Task OnKeyDown(KeyboardEventArgs e) => e.Key == "Escape" ? Close() : Task.CompletedTask; }