# Section Stack

# SectionStack

# Description

SectionStack is a container component used to organize content into distinct sections presented in a vertical layout. It handles sections with animated transitions for adding titles and content cards. Use SectionStack when you need to display grouped, expandable content blocks with a clear separation between titles and content.

# Usage

You can instantiate a SectionStack using the static helper method from the Tesserae.UI class. This component is typically used inside layouts that benefit from dynamic section management, where sections can be added, cleared, or animated individually.

Below is a simple example that creates a SectionStack and populates it with several animated sections:

using System;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

public class SectionStackExample : IComponent
{
    public HTMLElement Render()
    {
        // Create the SectionStack container
        var sectionStack = SectionStack();
        
        // Add an animated title section
        sectionStack.AddAnimatedTitle(TextBlock("SectionStack Example"));
        
        // Add multiple animated sections
        for (int i = 0; i < 3; i++)
        {
            sectionStack.AddAnimated(Stack().Children(
                TextBlock($"Section {i}").MediumPlus().SemiBold(),
                TextBlock("This is a sample content inside the section."))
            );
        }
        
        return sectionStack.Render();
    }
}

# Methods

AddAnimated(IComponent component, bool grow = false, bool shrink = false, string customPadding = "")
- Adds an animated section to the stack. You can specify if the section should grow or shrink and optionally set a custom padding.
AddAnimatedTitle(IComponent component)
- Adds an animated title to the stack. Typically used for section headers.
Clear()
- Removes all sections from the SectionStack and resets internal count.
Render()
- Renders the underlying HTML element representing the SectionStack.

# Properties

There are no additional public properties provided by the SectionStack component.

# Samples

# Dynamic SectionStack with Animated Sections

This sample demonstrates creating a SectionStack and dynamically adding sections with animated transitions. When integrated into a UI, this component can be used to display multiple groupings of content with titles and bodies.

using System;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

public class SectionStackSample : IComponent
{
    public HTMLElement Render()
    {
        // Create a SectionStack instance
        var sectionStack = SectionStack();

        // Create a header for the SectionStack
        sectionStack.AddAnimatedTitle(TextBlock("SectionStack Sample Header"));

        // Populate SectionStack with three animated sections
        for (int i = 0; i < 3; i++)
        {
            sectionStack.AddAnimated(Stack().Children(
                TextBlock($"Section {i}").MediumPlus().SemiBold(),
                TextBlock("This section demonstrates a simple animated card.")
            ));
        }

        return sectionStack.Render();
    }
}

# See also

Panel
Dialog