Skeleton

Provide a placeholder while you wait for content to load, or to visualize content that doesn't exist yet.

Importing

To use the skeleton component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

import { register } from "@tapsioss/web-components/skeleton";

register(); // Now the skeleton component is ready to use!

Web (Option 2)

import { registerSkeleton } from "@tapsioss/web-components";

registerSkeleton(); // Now the skeleton component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

import "@tapsioss/web-components/skeleton/element";

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

In the React package, you can easily add the component using the following code:

React

import { Skeleton } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-skeleton></tapsi-skeleton>

React

<Skeleton />

Properties

Name	Attribute Name	Description	Type	Default Value
variant	variant	The type of content that will be rendered.	| "rectangular" | "circular" | "pill" | "text"	"rectangular"
width	width	Width of the skeleton.	string	""
height	height	Height of the skeleton.	string	""
ratio	ratio	The ratio of the width to the height. If the value is invalid, it will default to 1. Only works when variant="rectangular".	number	NaN

Slots

Name	Value	Description
DEFAULT	-	The default slot for the skeleton.

TIP

The value of slots are available for developer as JavaScript Variables:

Web

// Option 1
import { SkeletonSlots } from "@tapsioss/web-components";

// Option 2
import { Slots } from "@tapsioss/web-components/skeleton";

React

// Option 1
import { SkeletonSlots } from "@tapsioss/react-components";

// Option 2
import { Slots } from "@tapsioss/react-components/Skeleton";