@uxland/uxl-ui-skeleton

UXLand - UI Skeleton

Usage no npm install needed!

<script type="module">
  import uxlandUxlUiSkeleton from 'https://cdn.skypack.dev/@uxland/uxl-ui-skeleton';
</script>

README

<uxl-ui-skeleton>

An ui skeleton component

Build Status npm version

Install the Polymer-CLI

First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install your element's dependencies, then run serve to serve your element locally.

Viewing Your Element

$ npm run serve

Description

<uxl-ui-skeleton> is a component that provides different types of ui skeletons to display when a petitions is fetching, for example:

Properties

Property Attribute Type Default
animation animation skeletonAnimation "intermitent"
classifier classifier string required
number number string required
type type skeletonType required

number: the number of elements that will display the skeleton

animation: the animation type, available: intermitent | disabled

type: choose between different skeleton types, available: list | single

classifier: provide a classifier to display different layouts, for example: vertical | horizontal

CSS Shadow Parts

Part Description
item item container
item__body item body
item__header item header
wrapper List wrapper

CSS Custom properties

The following custom properties and mixins are available for styling:

Custom property Description Default
--uxl-ui-skeleton-primary-color The background color of the items header #e4e3e3
--uxl-ui-skeleton-secondary-color The background color of the items body #f1f1f1
--uxl-ui-skeleton-opacity The opacity of skeleton items 1