Tesserae - Skeleton

Skeleton

Description

A placeholder component for loading state

Skeleton loaders are used to provide a placeholder for content that is still loading. They help reduce the perceived load time and prevent layout shifts by reserving the space that the final content will occupy.

They come in various shapes like circles for avatars and rectangles for text or images.

API reference

enum

SkeletonType

public enum SkeletonType

Predefined shape presets used by the Skeleton placeholder.

Namespace: Tesserae

class

Skeleton

public sealed class Skeleton : ComponentBase<Skeleton, HTMLElement>

Namespace: Tesserae
Inheritance: ComponentBase<Skeleton, HTMLElement> → Skeleton

Constructors

Name	Description
Skeleton	Initializes a new instance of this class.

Constructor

Skeleton

public Skeleton(SkeletonType type = SkeletonType.Line)

Initializes a new instance of this class.

Properties

Name	Description
TypeValue	Gets or sets the type value.
IsAnimated	Returns a value indicating whether the component is animated.

Property

Skeleton.TypeValue

public SkeletonType TypeValue { get ; set ; }

Gets or sets the type value.

Property

Skeleton.IsAnimated

public bool IsAnimated { get ; set ; }

Returns a value indicating whether the component is animated.

Methods

Name	Description
Type	Configures the component to type.
Animated	Configures the component to animated.
Background	Gets or sets the CSS background of the component.
Render	Renders the component's root HTML element.

Method

Skeleton.Type

public Skeleton Type(SkeletonType type)

Configures the component to type.

Method

Skeleton.Animated

public Skeleton Animated(bool value = true)

Configures the component to animated.

Method

Skeleton.Background

public Skeleton Background(string color)

Gets or sets the CSS background of the component.

Method

Skeleton.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Samples

Avatar and Text Placeholder

skeleton-avatar-sample.cs

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 component = HStack().Children(
                Skeleton(SkeletonType.Circle).W(48).H(48),
                VStack().Children(
                    Skeleton().W(200).H(16).ML(16).MB(8),
                    Skeleton().W(140).H(12).ML(16)));

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

Article/Image Placeholder

skeleton-article-sample.cs

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 component = VStack().Children(
                Skeleton(SkeletonType.Rect).WS().H(200),
                Skeleton().WS().H(16).MT(16),
                Skeleton().W(80.percent()).H(16).MT(8),
                Skeleton().W(60.percent()).H(16).MT(8)
            );

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

Skeleton

Description

API reference

Constructors

Skeleton

Properties

Skeleton.TypeValue

Skeleton.IsAnimated

Methods

Skeleton.Type

Skeleton.Animated

Skeleton.Background

Skeleton.Render

Samples

Avatar and Text Placeholder

Article/Image Placeholder

See also