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. Sections can be added, cleared, or animated individually.

Sample

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sectionStack = SectionStack();

            sectionStack.AddAnimatedTitle(TextBlock("SectionStack Example"));

            for (int i = 1; i <= 3; i++)
            {
                sectionStack.AddAnimated(Stack().Children(
                    TextBlock($"Section {i}").MediumPlus().SemiBold(),
                    TextBlock("Sample content inside the section.")));
            }

            document.body.style.overflow = "hidden";
            MountCenteredToBody(sectionStack);
        }
    }
}

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.

See also

• Panel
• Dialog