Ui Package

🛠️ Component Overview

Welcome to the Component Overview page! Here, you'll find detailed descriptions of the various UI components available in this package. These components are designed to enhance your application's user interface by providing consistent and reusable building blocks.

# Available Components

This package includes five main types of components:

• Placeholders: For displaying loading states or empty content.
• Navigation: To assist with user navigation within the application.
• Loading States: To indicate ongoing processes.
• Error States: To handle and display error messages.
• Aggregate Displays: For showing summarized data.

# Placeholder Components

# CardHorizontalPlaceholder

The <CardHorizontalPlaceholder /> component renders a skeleton card, which serves as a visual placeholder while content is loading. It does not accept any properties.

# CardViewPlaceholder

The <CardViewPlaceholder /> component is built using the <CardHorizontalPlaceholder /> to create a grid view layout. It accepts a count property to determine how many placeholders to display.

It has the following properties:

          <script lang="ts">
    import { CardViewPlaceholder } from '@tanglemedia/svelte-starter-ui';
  </script>
  <CardViewPlaceholder count={2} />

      

# DetailsPlaceholder

Using the <TextPlaceholder /> from Flowbite-Svelte, the <DetailsPlaceholder /> creates a vertical list view placeholder. It also accepts a count property.

It has the following properties:

          <script lang="ts">
    import { DetailsPlaceholder } from '@tanglemedia/svelte-starter-ui';
  </script>
  <DetailsPlaceholder count={2} />

      

# ListViewPlaceholder

The <ListViewPlaceholder /> component uses skeleton shapes to represent a vertical list. It accepts a count property similar to the other placeholders.

It has the following properties:

          <script lang="ts">
    import { ListViewPlaceholder } from '@tanglemedia/svelte-starter-ui';
  </script>
  <ListViewPlaceholder count={2} />

      

# GeneralListViewPlaceholder

Combining both the <ListViewPlaceholder /> and <CardViewPlaceholder />, the <GeneralListViewPlaceholder /> provides a flexible list view component. It accepts a viewType property along with count.

It has the following properties:

          <script lang="ts">
    import { GeneralListViewPlaceholder } from '@tanglemedia/svelte-starter-ui';
  </script>
  <ListViewPlaceholder count={2} viewType={0} />

      

          <script lang="ts">
    import { GeneralListViewPlaceholder } from '@tanglemedia/svelte-starter-ui';
  </script>
  <ListViewPlaceholder count={2} viewType={1} />

      

# Navigation Components

# BackArrow

The <BackArrow /> component facilitates navigation by allowing users to return to the previous page in their browsing history. You can also specify a custom route for redirection.

It has the following properties:

          <script lang="ts">
    import { BackArrow } from '@tanglemedia/svelte-starter-ui';
  </script>
  <BackArrow />

      

# Loading Components

# PageLoader

The <PageLoader /> component is used to indicate that a page is currently loading. It can be customized with a title, description, and slots.

It has the following properties:

          <script lang="ts">
    import { PageLoader } from '@tanglemedia/svelte-starter-ui';
  </script>
  <PageLoader />

      

# Lazy

# Error Component

# PageNotFoundCard

The <PageNotFoundCard /> component displays an error message, typically a 404 error. It can be customized to show different types of errors.

It has the following properties:

          <script lang="ts">
    import { PageNotFoundCard } from '@tanglemedia/svelte-starter-ui';
  </script>
  <PageNotFoundCard />

      

# Aggregate Component

# AggregateStub

The <AggregateStub /> component presents an aggregate value alongside an icon. It can also function as a button and accepts properties for the label and metric.

It has the following properties:

          <script lang="ts">
    import { AggregateStub } from '@tanglemedia/svelte-starter-ui';
  </script>
  <AggregateStub label="Number of downloads" metric="20" />