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.
Inherited Members
Namespace: Syncfusion.Blazor.Navigations
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfSidebar : SfBaseComponent
Constructors
SfSidebar()
Declaration
public SfSidebar()
Properties
Animate
Enable or disable the animation transitions on expanding or collapsing the Sidebar.
Declaration
public bool Animate { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Changed
Triggers when the state(expand/collapse) of the component is changed.
Declaration
public EventCallback<ChangeEventArgs> Changed { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.EventCallback<ChangeEventArgs> | An event callback function. |
ChildContent
Specifies the child content.
Declaration
public RenderFragment ChildContent { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.RenderFragment | Accepts a RenderFragment that defines the content of the child element. |
CloseOnDocumentClick
Specifies whether the Sidebar needs to be closed or not when the document area is clicked.
Declaration
public bool CloseOnDocumentClick { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Created
Triggers when the component is created.
Declaration
public EventCallback<object> Created { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.EventCallback<System.Object> | An event callback function. |
Destroyed
Triggers when the component gets destroyed.
Declaration
public EventCallback<object> Destroyed { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.EventCallback<System.Object> | An event callback function. |
DockSize
Specifies the size of the Sidebar in dock state. Dock size can be set in pixel values.
Declaration
public string DockSize { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value. The default value is |
EnableDock
Specifies the docking state of the component.
Declaration
public bool EnableDock { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
EnableGestures
Enables the expand or collapse while swiping in the touch devices.
Declaration
public bool EnableGestures { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
EnablePersistence
Enable or disable the persisting component's state between page reloads. If enabled, isOpen state will be persisted.
Declaration
public bool EnablePersistence { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
EnableRtl
Enable or disable rendering Sidebar in right to left direction.
Declaration
public bool EnableRtl { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
HtmlAttributes
You can add the additional html attributes such as disabled, value, and more to the root element.
Declaration
public Dictionary<string, object> HtmlAttributes { get; set; }
Property Value
Type | Description |
---|---|
System.Collections.Generic.Dictionary<System.String, System.Object> | A dictionary of additional html attributes for the root element of the component. |
ID
Sets id attribute for the sidebar element.
Declaration
public string ID { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value. |
IsOpen
Gets or sets the Sidebar component 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
public bool IsOpen { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
IsOpenChanged
Gets or sets a callback of the bound value.
Declaration
public EventCallback<bool> IsOpenChanged { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.EventCallback<System.Boolean> | An event callback function. |
MediaQuery
Specifies 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
public string MediaQuery { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value. |
OnClose
Triggers when the component is ready to close.
Declaration
public EventCallback<EventArgs> OnClose { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.EventCallback<EventArgs> | An event callback function. |
OnOpen
Triggers when the component is ready to open.
Declaration
public EventCallback<EventArgs> OnOpen { get; set; }
Property Value
Type | Description |
---|---|
Microsoft.AspNetCore.Components.EventCallback<EventArgs> | An event callback function. |
Position
Specifies the position of the Sidebar.
Declaration
public SidebarPosition Position { get; set; }
Property Value
Type |
---|
SidebarPosition |
ShowBackdrop
Specifies whether to apply overlay options to the main content or not when the Sidebar is in an open state.
Declaration
public bool ShowBackdrop { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean |
|
Target
Allows to place the sidebar inside the target element.
Declaration
public string Target { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value. |
Type
Specifies 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
public SidebarType Type { get; set; }
Property Value
Type |
---|
SidebarType |
Width
Specifies 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
public string Width { get; set; }
Property Value
Type | Description |
---|---|
System.String | Accepts the string value. The default value is |
ZIndex
Specifies the z-index of the Sidebar. It is applicable only when sidebar act as the overlay type.
Declaration
public int ZIndex { get; set; }
Property Value
Type | Description |
---|---|
System.Int32 | Accepts an integer value. The default value is |
Methods
BuildRenderTree(RenderTreeBuilder)
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type | Name | Description |
---|---|---|
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder | __builder |
GetProperties()
Method to Get Properties.
Declaration
protected Dictionary<string, object> GetProperties()
Returns
Type | Description |
---|---|
System.Collections.Generic.Dictionary<System.String, System.Object> | properties. |
OnAfterRenderAsync(Boolean)
Method invoked after each time the component has been rendered.
Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type | Name | Description |
---|---|---|
System.Boolean | firstRender | Set to true for the first time component rendering; otherwise gets false. |
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | ="Task". |
Overrides
OnInitializedAsync()
Method invoked when the component is ready to start.
Declaration
protected override Task OnInitializedAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | ="Task". |
Overrides
OnParametersSetAsync()
Method invoked when any changes in component state occurs.
Declaration
protected override Task OnParametersSetAsync()
Returns
Type | Description |
---|---|
System.Threading.Tasks.Task | ="Task". |