Search results

Styles and Appearance in Angular Sidebar component

29 Jul 2021 / 3 minutes to read

The following content provides the exact CSS structure that can be used to modify the component’s appearance based on the user’s preference.

Customizing the sidebar

Use the below CSS to customize the sidebar root element.

Copied to clipboard
.e-sidebar {
    background: #898b2b
}

Customizing the sidebar based on the positions

Use the below CSS to customize the left positioned sidebar.

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

Use the below CSS to customize the right positioned sidebar.

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

Customizing the sidebar based on the active state

Use the below CSS to customize the open state of the left positioned sidebar.

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

Use the below CSS to customize the open state of the right positioned sidebar.

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

Use the below CSS to customize the closed state of the left positioned sidebar.

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

Use the below CSS to customize the closed state of the right positioned sidebar.

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

Customizing the 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.

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

Customizing the different types of sidebar

Use the below CSS to customize the auto type sidebar.

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

Use the below CSS to customize the push type sidebar.

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

Use the below CSS to customize the over type sidebar.

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

Use the below CSS to customize the slide type sidebar.

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

Customizing the backdrop of the sidebar

Use the below CSS to customize the backdrop of the sidebar.

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

Customizing the sidebar in the RTL direction

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 sidebar element in the RTL (right to left direction) mode.

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