@chameleon-ds/skeleton

Chameleon Skeleton

import { html } from "@open-wc/demoing-storybook";
import { withKnobs, text, number } from "@open-wc/demoing-storybook";
import "./chameleon-skeleton.js";

export default {
  title: "Components|Data and Visualizations/Skeleton",
  component: "chameleon-skeleton",
  decorators: [withKnobs],
  options: { selectedPanel: "storybookjs/docs/panel" },
};

Properties

Property Name	Type(s)	Default Value	Description
theme	String	"primary"	The skeleton's theme ("primary", "secondary")
height	String	"100%"	The skeleton's height
width	String	"100%"	The skeleton's width
cHeight	Number	50	The skeleton's circle height

Examples

Default

export const Default = () => {
  const height = text("Height", "100%");
  const width = text("Width", "100%");
  const theme = text("Theme", "primary");
  const cHeight = number("Circle Height", 50);

  return theme === "primary"
    ? html`
        <chameleon-skeleton theme="primary" height="${height}" width="${width}">
        </chameleon-skeleton>
      `
    : theme === "secondary"
    ? html` <chameleon-skeleton theme="secondary" cHeight="${cHeight}">
      </chameleon-skeleton>`
    : "";
};