Tesserae

Float

Description

The Float component is part of the Surfaces group and is designed to create absolute-positioned overlays within other containers. It is used to display UI elements that float relative to their parent container, such as buttons, labels, or custom content. Use Float when you need to position an element at one of several predefined locations (for example, top-left, center, bottom-right) within a parent container that has a relative positioning context.

Usage

To instantiate a Float component, simply call the static helper method from Tesserae.UI using the Float() operator. Pass in the child component you want to float and specify a position from the Float.Position enum. Remember to ensure that the parent container (e.g., Stack or Grid) is marked as relative by calling the .Relative() method, so that the floated component positions itself correctly.

Below is a minimal example of how to create a Float element:

float-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
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 sampleComponent = new FloatUsageExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class FloatUsageExample : IComponent
    {
        public HTMLElement Render()
        {
            // Parent container must be marked Relative to enable proper positioning of Float components.
            return Stack().Relative().Children(
                // Create a Float component displaying a Button in the top left corner
                Float(Button("Floating Button"), Float.Position.TopLeft)
            ).Render();
        }
    }
}

Methods

Render()

Signature: HTMLElement Render()
Description: Renders the Float component and returns the corresponding HTMLElement. This method is part of the IComponent interface, and it ensures that the underlying DOM element is correctly generated.

Public Properties

The Float component does not expose additional public properties apart from what is provided via its constructor and the public enum for positioning.

Public Enum: Position

Defines the possible positions for the floated element. The enum values include:

TopLeft (tss-float-topleft)
TopMiddle (tss-float-topmiddle)
TopRight (tss-float-topright)
LeftCenter (tss-float-leftcenter)
Center (tss-float-center)
RightCenter (tss-float-rightcenter)
BottomLeft (tss-float-bottomleft)
BottonMiddle (tss-float-bottonmiddle)
BottomRight (tss-float-bottomright)

Samples

Float Component Overview Sample

The sample below demonstrates how to use the Float component in a realistic scenario. A parent container is set to have a relative position, and multiple Float components are added at various positions.

float-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
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 sampleComponent = new FloatSampleUsage();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class FloatSampleUsage : IComponent
    {
        public HTMLElement Render()
        {
            // Parent container with relative positioning.
            return Stack().Relative().Horizontal().WidthStretch().Height(400.px()).Children(
                Float(Button("TopLeft"),      Float.Position.TopLeft),
                Float(Button("TopMiddle"),    Float.Position.TopMiddle),
                Float(Button("TopRight"),     Float.Position.TopRight),
                Float(Button("LeftCenter"),   Float.Position.LeftCenter),
                Float(Button("Center"),       Float.Position.Center),
                Float(Button("RightCenter"),  Float.Position.RightCenter),
                Float(Button("BottomLeft"),   Float.Position.BottomLeft),
                Float(Button("BottonMiddle"), Float.Position.BottonMiddle),
                Float(Button("BottomRight"),  Float.Position.BottomRight)
            ).Render();
        }
    }
}

Referenced by

modal