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 placeholder.

class

Skeleton

public sealed class Skeleton : ComponentBase<Skeleton, HTMLElement>

Constructors

Constructor

Skeleton

public Skeleton(SkeletonType type = SkeletonType.Line)

Initializes a new instance of this class.

Properties

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

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.js

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.js

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