Class SfSidebar

The SfSidebar component is an expandable and collapsible component that typically acts as a side container to place primary or secondary content alongside the main content.

Inheritance

object

ComponentBase

OwningComponentBase

SfOwningComponentBase

SfBaseComponent

SfSidebar

Implements

Inherited Members

ComponentBase.Assets

ComponentBase.AssignedRenderMode

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.OnAfterRender(bool)

ComponentBase.OnInitialized()

ComponentBase.OnParametersSet()

ComponentBase.RendererInfo

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.ShouldRender()

ComponentBase.StateHasChanged()

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

OwningComponentBase.IsDisposed

OwningComponentBase.ScopedServices

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(bool)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(string, object, bool, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.Navigations

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfSidebar : SfBaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Constructors

SfSidebar()

Declaration

public SfSidebar()

Properties

Animate

Gets or sets a boolean value to enable or disable the animation transitions on expanding or collapsing the Sidebar.

Declaration

[Parameter]
public bool Animate { get; set; }

Property Value

Type	Description
bool	`true`, if the animation can be enabled. Otherwise, `false`. The default value is `true`.

Changed

Triggers when the state(expand/collapse) of the component is changed.

Declaration

[Parameter]
public EventCallback<ChangeEventArgs> Changed { get; set; }

Property Value

Type	Description
EventCallback<ChangeEventArgs>	An event callback function.

ChildContent

Specifies the child content.

Declaration

[Parameter]
[JsonIgnore]
public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
RenderFragment	Accepts a RenderFragment that defines the content of the child element.

CloseOnDocumentClick

Gets or sets a boolean value which indicates whether the Sidebar needs to be closed or not when the document area is clicked.

Declaration

[Parameter]
public bool CloseOnDocumentClick { get; set; }

Property Value

Type	Description
bool	`true`, if the sidebar will be closed when the document area is clicked.

Created

Triggers when the component is created.

Declaration

[Parameter]
public EventCallback<object> Created { get; set; }

Property Value

Type	Description
EventCallback<object>	An event callback function.

Destroyed

Triggers when the component gets destroyed.

Declaration

[Parameter]
public EventCallback<object> Destroyed { get; set; }

Property Value

Type	Description
EventCallback<object>	An event callback function.

DockSize

Gets or sets the size of the Sidebar in dock state. Dock size can be set in pixel values.

Declaration

[Parameter]
public string DockSize { get; set; }

Property Value

Type	Description
string	Accepts the string value. The default value is `auto`.

EnableDock

Gets or sets the docking state of the component.

Declaration

[Parameter]
public bool EnableDock { get; set; }

Property Value

Type	Description
bool	`true`, if the docking state can be enabled. Otherwise, `false`.

EnableGestures

Gets or sets a boolean value to enable or disable the expand or collapse of Sidebar while swiping in the touch devices.

Declaration

[Parameter]
public bool EnableGestures { get; set; }

Property Value

Type	Description
bool	`true`, if the gestures can be enabled. Otherwise, `false`. The default value is `true`.

Remarks

To avoid expand or collapse while swiping in desktop, this property can be set to false

EnablePersistence

Gets or sets a boolean value to enable or disable the persisting component's state between page reloads. If enabled, isOpen state will be persisted.

Declaration

[Parameter]
public bool EnablePersistence { get; set; }

Property Value

Type	Description
bool	`true`, if the persistence can be enabled. Otherwise, `false`.

EnableRtl

Gets or sets a boolean value to enable or disable rendering the Sidebar in right to left direction.

Declaration

[Parameter]
public bool EnableRtl { get; set; }

Property Value

Type	Description
bool	`true`, if the right to left direction can be enabled for the component. Otherwise, `false`. The default value is `false`.

HtmlAttributes

You can add the additional html attributes such as disabled, value, and more to the root element.

Declaration

[Parameter(CaptureUnmatchedValues = true)]
[Obsolete("This property is deprecated.Use @attributes to set additional attributes for sidebar element.")]
public Dictionary<string, object> HtmlAttributes { get; set; }

Property Value

Type	Description
Dictionary<string, object>	A dictionary of additional html attributes for the root element of the component.

ID

Sets id attribute for the sidebar element.

Declaration

[Parameter]
public string ID { get; set; }

Property Value

Type	Description
string	Accepts the string value.

IsOpen

Gets or sets a boolean value which indicates whether the Sidebar component's state is open or close. When the Sidebar type is set to Auto, the component will be expanded in the desktop and collapsed in the mobile mode regardless of the isOpen property.

Declaration

[Parameter]
public bool IsOpen { get; set; }

Property Value

Type	Description
bool	`true`, if the sidebar is in open position. Otherwise, `false`.

IsOpenChanged

Gets or sets a event callback when the IsOpen value of Sidebar is changed.

Declaration

[Parameter]
public EventCallback<bool> IsOpenChanged { get; set; }

Property Value

Type	Description
EventCallback<bool>	An event callback function.

MediaQuery

Gets or sets the media query string for resolution, when opens the Sidebar. Example: assigning media query value to '(min-width: 600px)' will open the sidebar component only when the provided resolution is met else the sidebar will be in closed state.

Declaration

[Parameter]
public string MediaQuery { get; set; }

Property Value

Type	Description
string	Accepts the string value.

OnClose

Triggers when the component is ready to close.

Declaration

[Parameter]
public EventCallback<EventArgs> OnClose { get; set; }

Property Value

Type	Description
EventCallback<EventArgs>	An event callback function.

OnOpen

Triggers when the component is ready to open.

Declaration

[Parameter]
public EventCallback<EventArgs> OnOpen { get; set; }

Property Value

Type	Description
EventCallback<EventArgs>	An event callback function.

Position

Gets or sets the position of the Sidebar.

Declaration

[Parameter]
[JsonConverter(typeof(JsonStringEnumConverter))]
public SidebarPosition Position { get; set; }

Property Value

Type
SidebarPosition

ShowBackdrop

Gets or sets whether to apply overlay options to the main content or not when the Sidebar is in an open state.

Declaration

[Parameter]
public bool ShowBackdrop { get; set; }

Property Value

Type	Description
bool	`true`, if the back drop option can be enabled. Otherwise, `false`.

Target

Gets or sets the target element where the sidebar will be placed.

Declaration

[Parameter]
public string Target { get; set; }

Property Value

Type	Description
string	A string value that identifies the target element.

Type

Gets or sets the expanding types of the Sidebar. Over - The sidebar floats over the main content area. Push - The sidebar pushes the main content area to appear side-by-side and shrinks the main content within the screen width. Slide - The sidebar translates the x and y positions of the main content area based on the sidebar width. The main content area will not be adjusted within the screen width. Auto - Sidebar with Over type in mobile resolution and Push type in other higher resolutions.

Declaration

[Parameter]
[JsonConverter(typeof(JsonStringEnumConverter))]
public SidebarType Type { get; set; }

Property Value

Type
SidebarType

Width

Gets or sets the width of the Sidebar. By default, the width of the Sidebar sets based on the size of its content. Width can also be set in pixel values.

Declaration

[Parameter]
public string Width { get; set; }

Property Value

Type	Description
string	Accepts the string value. The default value is `auto`.

ZIndex

Gets or sets the z-index of the Sidebar. It is applicable only when sidebar act as the overlay type.

Declaration

[Parameter]
public int ZIndex { get; set; }

Property Value

Type	Description
int	Accepts an integer value. The default value is `1000`.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

GetProperties()

Method to Get Properties.

Declaration

protected Dictionary<string, object> GetProperties()

Returns

Type	Description
Dictionary<string, object>	properties.

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
bool	firstRender	Set to true for the first time component rendering; otherwise gets false.

Returns

Type	Description
Task	="Task".

Overrides

SfBaseComponent.OnAfterRenderAsync(bool)

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
Task	="Task".

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Method invoked when any changes in component state occurs.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
Task	="Task".

Overrides

ComponentBase.OnParametersSetAsync()

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable