Styles and Appearance in Angular Sidebar

26 Sep 20263 minutes to read

The Angular Sidebar component can be customized using CSS to modify its appearance based on its state, position, or configuration. The following sections provide CSS rules targeting component-specific classes (e.g., .e-sidebar, .e-dock, .e-rtl) that are automatically applied based on properties like position, enableDock, or enableRtl. Apply these styles in styles.css or a component-specific stylesheet, ensuring specificity to avoid conflicts.

Styling the Angular Sidebar root element

The .e-sidebar class targets the <ejs-sidebar> element to customize its overall appearance, such as the background color.

.e-sidebar {
    background: #898b2b;
}

Styling Angular Sidebar positions

Customize the Sidebar’s appearance based on its position, set via the position property (default: Left).

Left-Positioned Angular Sidebar

Add a border to a left-positioned Angular Sidebar:

.e-sidebar.e-left {
    border-right: 2px solid red;
}

Right-Positioned Angular Sidebar

Add a border to a right-positioned Angular Sidebar:

.e-sidebar.e-right {
    border-left: 2px solid red;
}

Styling Angular Sidebar active states

Customize transitions for the Angular Sidebar’s open or closed states, which use the .e-open or .e-close classes, applied based on the isOpen property.

Open state for left Angular Sidebar

Adjust the transition for a left-positioned Angular Sidebar when open:

.e-sidebar.e-left.e-open {
    transition: transform 2.5s ease;
}

Open state for right Angular Sidebar

Adjust the transition for a right-positioned Angular Sidebar when open:

.e-sidebar.e-right.e-open {
    transition: transform 2.5s ease;
}

Closed state for left Angular Sidebar

Customize the transition and visibility for a left-positioned Angular Sidebar when closed:

.e-sidebar.e-left.e-transition.e-close {
    transition: transform 2.5s ease, visibility 1200ms;
}

Closed state for right Sidebar

Customize the transition and visibility for a right-positioned Angular Sidebar when closed:

.e-sidebar.e-right.e-transition.e-close {
    transition: transform 2.5s ease, visibility 1200ms;
}

Styling Angular Sidebar with Dock state

When you enable the Dock support, the e-dock class will be added to the root element. Based on that class, you can also customize all the above stated customization. Use the following CSS to customize the Sidebar element with a dock state.

.e-sidebar.e-dock {
    background: #2d323e;
}

Styling Angular Sidebar types

Customize the Sidebar based on its type property (default: Auto), which applies classes like .e-auto, .e-push, .e-over, or .e-slide.

Auto Type Angular Sidebar

Style a left-positioned Angular Sidebar with type="Auto":

.e-sidebar.e-left.e-auto {
    background-color: pink;
}

Push type Angular Sidebar

Style a left-positioned Angular Sidebar with type="Push":

.e-sidebar.e-left.e-push {
    background-color: beige;
}

Over type Angular Sidebar

Style a left-positioned Angular Sidebar with type="Over":

.e-sidebar.e-left.e-over {
    background-color: aqua;
}

Slide type Angular Sidebar

Style a left-positioned Angular Sidebar with type="Slide":

.e-sidebar.e-left.e-slide {
    background-color: green;
}

Styling the Angular Sidebar Backdrop

When the showBackdrop property is set to true, the .e-sidebar-overlay class is applied to the backdrop, allowing customization of its appearance.

.e-sidebar-overlay {
    background-color: aqua;
}

Styling Angular Sidebar in right-to-left mode

When you enable the RTL (right to left direction) support, the e-rtl class will be added to the root element. Based on that class, you can also customize all the above stated customization. Use the following CSS to customize the Angular Sidebar element in the RTL (right to left direction) mode.

.e-sidebar.e-left.e-rtl {
    background-color: antiquewhite;
}

Disabling animation transitions

To disable animation transitions for the Angular Sidebar, typically controlled by the animate property (default: true), override the .e-content-animation class to remove transitions for the main content area.

.e-sidebar-context .e-content-animation {
    transition: none;
    transform: none;
}