Slide component

The <day-slide> component provides a highly configurable sliding panel (sidebar) that emerges from the side of the screen. It is designed to display contextual content or related actions without leaving the current view. It exposes settings to control its appearance, behavior, and how it integrates with the main page content.

Import

import { DAYSlideComponent } from '@dayerlin-bustamante/slide';
import { DAYSlideHeaderComponent } from '@dayerlin-bustamante/slide';
import { DAYSlideBodyComponent } from '@dayerlin-bustamante/slide';
import { DAYSlideFooterComponent } from '@dayerlin-bustamante/slide';

Selectors

Element	Description
<day-slide>	Slide container component
<day-slide-header>	Header section of the slide
<day-slide-body>	Body section of the slide
<day-slide-footer>	Footer section of the slide

Installation and Usage

npm install @dayerlin-bustamante/slide

import { DAYSlideComponent } from '@dayerlin-bustamante/slide';

<day-slide [opened]="true">
    <day-slide-body>Content</day-slide-body>
</day-slide>

Inputs

Name	Description
Not included

Output

Name	Description
Not included

Directives

Name	Description
Not included

Public methods

Method create in DAYSlideService:

Creates and displays a slide dialog component.

This method instantiates the specified component inside a slide dialog, applies the provided configuration, and attaches the dialog (and optional overlay) to the DOM. It returns a reference to the dialog for further interaction.

component - The component to render inside the slide dialog. Can be an IDAYDialogTmpl or any Angular component.

config - Optional configuration object to customize the dialog's behavior and appearance.

returns - A DAYDialogRef instance representing the created dialog, allowing for programmatic control.

Dependencies

'@dayerlin-bustamante/core'

Example

Html

Demo

Description

Utilizes a main container component (day-slide-container) to manage the structure and positioning of the sliding panel.
Allows content projection for header (day-slide-header), body (day-slide-body), and footer (day-slide-footer) sections, offering flexibility in internal layout.
Integrates with DAYSlideService for programmatic creation and management of slide instances.
Supports configuration for initial, minimum, and maximum width, as well as user-resizable functionality if enabled (via DAYResizeComponent).
Can display an optional overlay layer behind the slide to focus user attention, managed by DAYOverlayComponent.
Entry and exit animations are controlled using Angular Animations for a smooth user experience.
Configuration is provided via the DAY_SLIDE_CONFIGURATION injection token, allowing for global and per-instance adjustments.