Package Components and Decorators Documentation

Understanding the distinction between Components and Decorators within our package is crucial for maximizing the effectiveness of your web projects. Here’s a brief overview to get you started.

Components vs. Decorators

What is a Component?

A Component is an independent block that encapsulates a specific functionality or piece of UI, designed to be reusable across web applications. These are the fundamental building blocks for creating dynamic and interactive interfaces.

What is a Decorator?

A Decorator is a special component that wraps another component to enhance or modify its functionality without changing the core behavior. Decorators provide a dynamic way to extend component capabilities with additional features like animations, links, or positioning.

Components Overview

Each component in our package is crafted to fulfill specific UI needs, from displaying media to organizing content.

Responsive Media

Designed to display images, videos, and more, adapting seamlessly to any screen size for the best viewing experience.

Below is a recording demonstrating the usage of Responsive Media within different breakpoints. As the screen size changes, the displayed media adjusts accordingly.

The recording showcases the seamless transition between different breakpoints, ensuring that the media content remains visually appealing and functional across various device sizes.

Carousel

A highly flexible carousel that can contain various types of components, making it a reusable and fully configurable option for showcasing dynamic content.

• Automatic Rotation: The carousel automatically transitions between slides, providing a seamless viewing experience.
• Navigation Controls: Users can navigate through the carousel using intuitive controls such as arrows or pagination.
• Responsive Design: The carousel adjusts smoothly to different screen sizes, ensuring optimal display on various devices.
• Customizable Content: Each slide within the carousel can contain diverse content types, including images, videos, or custom components.

Container

A generic model for grouping elements, facilitating structured page layouts and coherent organization.

For instance, the Container component allows you to encapsulate any component or decorator within it and apply custom styling. You can define a list of CSS classes that will be implemented in your Spartacus project to style the Container according to your design requirements.

Custom HTML

Custom HTML is a versatile component that empowers you to embed free-form HTML directly into your web pages. This feature offers unparalleled flexibility, enabling you to customize your website with virtually limitless possibilities.

Whether you need to implement complex layouts, or add unique styling elements, the Custom HTML component allows you to do so effortlessly. By leveraging Custom HTML, you have full control over the structure and appearance of your web pages, empowering you to create engaging and dynamic user experiences tailored to your specific needs.

Grid

A configurable grid component that allows for a structured layout with customizable rows and columns, each responsive to ensure content adapts to different devices.

• Customizable Layout: Users can specify colSpans, rowSpans, and columnCount for each row to create unique and structured layouts tailored to their needs.
• Responsive Design: Users can make use of responsive options to ensure that the grid adapts smoothly to various screen sizes, providing an optimal viewing experience across devices.
• Class Customization: Users can apply any custom CSS classes, allowing for granular control over styling aspects such as spacing, alignment, and appearance.

Tab

Enables content organization through a tabular interface, allowing for easy switching between different views or sections.

Angular Component

Allows specific Angular components to be embedded within your pages, simplifying the incorporation of unique, non-reusable elements.

3D Viewer

The 3D Viewer component, built on top of three.js, offers interactive 3D model viewing capabilities, enriching user engagement by enabling detailed exploration of 3D content.

• Interactive 3D Model Viewing: Users can interactively explore 3D models, rotating, and panning to examine details from various angles.
• Enhanced User Engagement: The immersive nature of 3D viewing enhances user engagement, providing a more interactive and compelling experience compared to traditional 2D images.
• Inputting 3D Models: To utilize the 3D Viewer component, users need to provide a 3D model in a compatible format, such as OBJ, STL, or glTF.

Decorators Overview

Decorators wrap around components to provide additional functionalities, from animations to custom interactivity.

Animation

Brings elements to life with engaging animations, perfect for scroll-triggered effects and adding motion to your site. The Animation decorator encapsulates an item and adds a GSAP Animation to it. It utilizes a JSON object to determine the type of animation to be played.

• Engaging Animations: Users can enhance their web pages with captivating animations that draw attention and create a dynamic user experience.
• Scroll-Triggered Effects: The Animation decorator supports scroll-triggered animations, allowing elements to animate into view as the user scrolls down the page.
• GSAP Integration: Leveraging the power of GSAP, the decorator offers a wide range of animation options and effects, enabling users to create fluid and visually appealing transitions.

For instance, an animation can be created to fade in <p> tags, transitioning them from transparent to opaque while simultaneously moving them downward by 200 pixels. Each <p> tag is introduced with a 0.5-second delay and is triggered based on scrolling.

[
    [
        "from",
        "p",
        {
            "y": 200,
            "opacity": 0,
            "stagger": 0.5,
            "duration": 0.5,
            "scrollTrigger": {
                "trigger": "",
                "toggleActions": "restart none restart none"
            }
        }
    ]
]

Link

The feature allows users to designate any component as clickable, typically through a simple configuration or setting within the user interface.

Once enabled, users can interact with the designated component by clicking on it, regardless of its original purpose or appearance.

Position

A layout tool that provides precise control over the positioning of elements, enabling customized arrangements within any space. With this tool, you can easily center, left-align, or right-align any component inside a flex box, ensuring flexible and responsive layouts tailored to your design needs.