Added parameters to fill the entire space & to add a header

This commit is contained in:
Thorsten Sommer 2024-11-02 22:45:02 +01:00
parent bd97c0fb4b
commit 71634ea566
Signed by: tsommer
GPG Key ID: 371BBA77A02C0108
2 changed files with 19 additions and 2 deletions

View File

@ -1,6 +1,12 @@
@inherits MSGComponentBase
<div class="d-flex flex-column" style="@this.Height">
<div class="@this.Classes" style="@this.Styles">
@if (this.HeaderContent is not null)
{
<div>
@this.HeaderContent
</div>
}
<div class="flex-auto overflow-auto">
@this.ChildContent

View File

@ -6,6 +6,9 @@ namespace AIStudio.Components;
public partial class InnerScrolling : MSGComponentBase
{
[Parameter]
public bool FillEntireHorizontalSpace { get; set; } = false;
/// <summary>
/// Set the height of anything above the scrolling content; usually a header.
/// What we do is calc(100vh - HeaderHeight). Means, you can use multiple measures like
@ -14,6 +17,9 @@ public partial class InnerScrolling : MSGComponentBase
[Parameter]
public string HeaderHeight { get; set; } = "3em";
[Parameter]
public RenderFragment? HeaderContent { get; set; }
[Parameter]
public RenderFragment? ChildContent { get; set; }
@ -22,6 +28,9 @@ public partial class InnerScrolling : MSGComponentBase
/// </summary>
[Parameter]
public RenderFragment? FooterContent { get; set; }
[Parameter]
public string Class { get; set; } = string.Empty;
[CascadingParameter]
private MainLayout MainLayout { get; set; } = null!;
@ -62,7 +71,9 @@ public partial class InnerScrolling : MSGComponentBase
#endregion
private string Height => $"height: calc(100vh - {this.HeaderHeight} - {this.MainLayout.AdditionalHeight});";
private string Styles => this.FillEntireHorizontalSpace ? $"height: calc(100vh - {this.HeaderHeight} - {this.MainLayout.AdditionalHeight}); overflow-x: auto; min-width: 0;" : $"height: calc(100vh - {this.HeaderHeight} - {this.MainLayout.AdditionalHeight}); flex-shrink: 0;";
private string Classes => this.FillEntireHorizontalSpace ? $"{this.Class} d-flex flex-column flex-grow-1" : $"{this.Class} d-flex flex-column";
public async Task ScrollToBottom()
{