Drawer - fixes

Container - rework
This commit is contained in:
stm 2023-01-10 07:57:54 +01:00
parent 7c8ca6fc47
commit 8d5445a509
4 changed files with 47 additions and 30 deletions

View File

@ -2,6 +2,6 @@
@inherits UIComponent @inherits UIComponent
<div @attributes="CustomAttributes" class="@Classname"> <div @attributes="CustomAttributes" class="@CompiledClassList.Build()" style="@CompiledStyleList.Build()">
@ChildContent @ChildContent
</div> </div>

View File

@ -1,36 +1,54 @@
using Connected.Annotations; using Connected.Utilities;
using Connected.Extensions;
using Connected.Utilities;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
namespace Connected.Components; namespace Connected.Components;
public partial class Container : UIComponent public partial class Container : UIComponent
{ {
protected string Classname =>
new CssBuilder("container")
.AddClass($"container-fixed", Fixed)
.AddClass($"container-maxwidth-{MaxWidth.ToDescription()}", !Fixed)
.AddClass(AdditionalClassList)
.Build();
/// <summary> #region Event callbacks
/// Set the max-width to match the min-width of the current breakpoint. This is useful if you'd prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport. It's fluid by default. #endregion
/// </summary>
[Parameter]
[Category(CategoryTypes.Container.Behavior)]
public bool Fixed { get; set; } = false;
/// <summary> #region Content placeholders
/// Determine the max-width of the container. The container width grows with the size of the screen. Set to false to disable maxWidth.
/// </summary>
[Parameter]
[Category(CategoryTypes.Container.Behavior)]
public MaxWidth MaxWidth { get; set; } = MaxWidth.Large;
/// <summary> /// <summary>
/// Child content of component. /// Child content of component.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Container.Behavior)]
public RenderFragment ChildContent { get; set; } public RenderFragment ChildContent { get; set; }
#endregion
#region Styling properties
private CssBuilder CompiledClassList
{
get
{
return new CssBuilder("container")
.AddClass(ClassList);
}
}
protected StyleBuilder CompiledStyleList
{
get
{
return new StyleBuilder()
.AddStyle(StyleList);
}
}
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? ClassList { get; set; }
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? StyleList { get; set; }
#endregion
} }

View File

@ -1,7 +1,6 @@
@namespace Connected.Components @namespace Connected.Components
@inherits UIComponent @inherits UIComponent
<p>@_screenBreakpoint.ToString()</p>
@if (_screenBreakpoint.ToString().ToLower() != "xs") @if (_screenBreakpoint.ToString().ToLower() != "xs")
{ {
<aside @onmouseenter="OnMouseEnter" @onmouseleave="OnMouseLeave" @attributes="CustomAttributes" class="@CompiledClassList.Build()" style="@CompiledStyleList.Build()"> <aside @onmouseenter="OnMouseEnter" @onmouseleave="OnMouseLeave" @attributes="CustomAttributes" class="@CompiledClassList.Build()" style="@CompiledStyleList.Build()">

View File

@ -255,12 +255,12 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
{ {
get get
{ {
return new CssBuilder("drawer-overlay mud-overlay-drawer") return new CssBuilder("drawer-overlay")
.AddClass($"drawer-pos-{GetPosition()}") .AddClass($"drawer-pos-{GetPosition()}")
.AddClass($"drawer-overlay--open", Open) .AddClass($"drawer-overlay--open", Open)
.AddClass($"drawer-overlay-{Variant.ToDescription()}") .AddClass($"drawer-overlay-{Variant.ToDescription()}")
.AddClass($"drawer-overlay-{Breakpoint.ToDescription()}") .AddClass($"drawer-overlay-{Breakpoint.ToDescription()}")
.AddClass($"drawer-overlay--initial", _initial); .AddClass($"drawer-overlay--initial", _initial);
} }
} }