The "Blank Slide Over" component is a versatile tool that allows you to create customizable slide-over dialogs for various purposes on your website. It provides a clean and simple canvas for you to add your own content, making it suitable for a wide range of use cases.
Whether you want to display additional information, gather user input, or present important updates, the "Blank Slideover" is a flexible solution that ensures your content remains accessible and engaging. Explore the possibilities and unlock new ways to interact with your audience using the "Blank Slideover" component.
The "Slideover Size" component allows you to control the dimensions of your slide-over dialogs, ensuring that they are visually appealing and perfectly tailored to your content. With multiple size options available, you can choose the one that best suits your specific use case.
Tailor the size of your slideover to create a user-friendly and visually engaging experience. Whether you need a compact notification or a spacious form, the "Slideover Size" component gives you the flexibility to achieve your desired layout. Explore the different size options and elevate your website's user experience with the "Slideover Size" component.
The "Slide Over with Close Button" component adds an extra layer of user convenience to your slide-over dialogs. This feature allows users to easily dismiss the slide-over by clicking a close button, enhancing the overall user experience.
The "Slide Over with Close Button" component enhances user interaction by offering a clear and intuitive method for closing the slide-over. It's particularly useful for scenarios where users may want to quickly exit or minimize the dialog without navigating away from the current page.
The "Overlapping Slide Over" is a versatile feature that allows you to create layered slide-over dialogs within your web application. This feature is perfect for scenarios where you need to present information or actions in a sequential manner while keeping the user focused.
The "Overlapping Slide Over" feature provides a user-friendly way to present information or actions progressively, ensuring that users can focus on one piece of content at a time. It's a valuable tool for creating engaging user experiences and guiding users through complex workflows. Explore the possibilities of this feature to enhance your web application's usability and interactivity.
The "Header & Footer Slide Over" component is a powerful tool to create slide-over dialogs with customized headers and footers. This feature enables you to present content to your users while maintaining a consistent user interface and providing additional functionality in the header and footer sections.
The "Header & Footer Slide Over" component empowers you to create dynamic slide-over dialogs that are both informative and interactive. You can easily tailor the header and footer sections to suit your application's needs, making it a versatile solution for a wide range of use cases. Enhance your user experience by presenting content with clarity and providing users with intuitive actions through this feature.
The "Programmatically Show/Hide Slide Over" feature provides you with the capability to control the visibility of the slide-over dialog through your code. This functionality allows you to trigger the opening, closing, or toggling of the slide-over programmatically, providing a seamless and interactive user experience.
The "Programmatically Show/Hide Slide Over" functionality enhances your control over the slide-over dialog, making it a dynamic and responsive element in your user interface. By using these programmatic methods, you can create engaging user experiences and tailor the slide-over's visibility to suit your application's needs. Whether it's showing additional information, capturing user input, or providing context-based interactions, this feature empowers you to take full control of your slide-over dialogs.
In this section, you will find detailed information about the available props, classes, and options that can be used with the component. Understanding these properties is essential for customizing and configuring the component to suit your specific requirements.
Below is a list of props that can be passed to the component:
| Prop | Type | Description |
|---|---|---|
| `as` | `string` | The HTML element type to be used for the Slideover (default is "div"). |
| `open` | `boolean` | Indicates whether the Slideover is open or closed (default is false). |
| `onClose` | `function` | A function to be called when the Slideover is closed. |
| `staticBackdrop` | `boolean` | If true, the Slideover backdrop remains static when the Slideover is closed (default is false). |
| `size` | `Size` | The size of the Slideover, which can be "sm," "md," "lg," or "xl" (default is "md"). |
| Prop | Type | Description |
|---|---|---|
| `as` | `string` | The HTML element type to be used for the Slideover panel (default is "div"). |
| Prop | Type | Description |
|---|---|---|
| `as` | `string` | The HTML element type to be used for the Slideover title (default is "div"). |
| Prop | Type | Description |
|---|---|---|
| `as` | `string` | The HTML element type to be used for the Slideover description (default is "div"). |
| Prop | Type | Description |
|---|---|---|
| `as` | `string` | The HTML element type to be used for the Slideover footer (default is "div"). |
