import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';

# Skeleton

<Meta title='Skeleton' component='fw-skeleton' />

## Props

<Props of='fw-skeleton' />

## Usage

### Default

<Preview>
  <Story name='Default'>
    {() => `<div><label>Default Pulse Effect</label>
 <fw-skeleton></fw-skeleton> <br/>
 <label>Sheen Effect</label>
 <fw-skeleton effect="sheen"></fw-skeleton> <br/>
 <label>No Effect</label>
 <fw-skeleton effect="none"></fw-skeleton> <br/></div>`}
  </Story>
</Preview>

### Card Layout

<Preview>
  <Story name='Card Layout'>
    {() => `<div class="card">
          <div class="card-header" style="display: flex;align-items:center;">
            <fw-skeleton
              variant="circle"
              height="64px"
              width="64px"
            ></fw-skeleton>
            <fw-skeleton style="  flex: 0 0 auto;width: 40%;margin-left:1em"> </fw-skeleton>
          </div>
        <fw-skeleton
        variant="rect"
        height="180px"
        custom-styles='"margin-top": "10px",
        "box-shadow": "0px 1px 2px rgba(0,0,0,0.1)"'
        > </fw-skeleton>
          <fw-skeleton count=2> </fw-skeleton>
        </div>`}
  </Story>
</Preview>
