@vortech-digital-pioneers/vtc-skeleton
v1.0.3
Published
A component for usage in skeleton screens with the option to enable or disable skeleton animation.
Downloads
7
Readme
vtc-skeleton
Properties
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ----------------------------------------------------- | --------- | -------- |
| animated | animated | Enables or disables animation of the skeleton element | boolean | false |
| height | height | The height of the skeleton element | string | '15px' |
| width | width | The width of the skeleton element | string | '100%' |
CSS Custom Properties
| Name | Description |
| ----------------- | ---------------------------------------------------- |
| --background | Background of the skeleton element |
| --border-radius | Border radius can be adjusted for e.g. round avatars |
| --ghost-color | Color of the accent used for the shimmer |
Using this component
Script tag
- Publish to NPM
- Put a script tag similar to this
<script src='https://unpkg.com/[email protected]/dist/vtc-skeleton.js'></script>in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
Node Modules
- Run
npm install vtc-skeleton --save - Put a script tag similar to this
<script src='node_modules/vtc-skeleton/dist/vtc-skeleton.js'></script>in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
In a stencil-starter app
- Run
npm install vtc-skeleton --save - Add an import to the npm packages
import vtc-skeleton; - Then you can use the element anywhere in your template, JSX, html etc
Built with StencilJS