Tesserae - Float

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();
        }
    }
}

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)

API reference

class

Float

public sealed class Float : IComponent

A floating positioning container used to overlay a small piece of content anchored to one corner of its parent.

Constructors

Constructor

Float

public Float(IComponent child, Position position)

Initializes a new instance of this class.

Methods

Method

Float.Render

public dom.HTMLElement Render()

Renders the component's root HTML element.

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();
        }
    }
}

Float

Description

Usage

Public Properties

Public Enum: Position

API reference

Float

Constructors

Float

Methods

Float.Render

Samples

Float Component Overview Sample

See also

Referenced by