Sidebar

INFO

This is a wrapped version of the Sidebar component from PrimeVue. The accessible properties can be found in the docs below.

If other features are required, please contact Codey to submit a request. The Sidebar full documentation can be found here.

import { XerSidebar } from "@xerius/codey-components";

Showcases

Default

With Different Positions

With Long Content

As Mini Wizard

Note

A Sidebar is not the preferred choice for creating a wizard like experience. Wizards should ideally be connected to the router, work with page navigation and seen as a view.

As a Sidebar is a overlay component, it may not provide the best user experience for a wizard flow.

Props

The default props from the PrimeVue Sidebar component are available except the limitations described below. The prop documentation can be found here

Name	Description
unstyled	Not available as prime config is unstyled by default
pt	Only root, mask andcloseButton is available

Events

The default events from the PrimeVue Sidebar component are available. The event documentation can be found here

no custom events defined

Slots

Name	Purpose
default	The main content of the sidebar
header	Custom header content

Automation Ids

A data-automation-id needs to be provided to the component as Prime Vue based components do not have a default data-automation-id.

Name	Purpose
sidebar-content	The main content area of the sidebar