Sha256: 519bee773ab45554223ab63fc8a7ef4eca3c27de0478697d6c8f65c63e3b0fe8

Contents?: true

Size: 1.2 KB

Versions: 178

Compression:

Stored size: 1.2 KB

Contents

import React from 'react'
import { Card, SkeletonLoading } from "playbook-ui"


const SkeletonLoadingHeightWidth = (props) => (
  <div>
    <SkeletonLoading
        height="100px"
        width="50%"
        {...props}
    />
    <SkeletonLoading
        gap="md"
        height="20px"
        marginY="md"
        stack="3"
        width="50px"
        {...props}
    />
    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
        marginBottom="md"
        padding="none" 
    >
      <SkeletonLoading
          borderRadius="md"
          gap="xl"
          height="50%"
          width="300px"
          {...props}
      />
    </Card>
    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
        padding="none"
    >
      <SkeletonLoading
          borderRadius="md"
          gap="xl"
          height="30%"
          stack="2"
          width="70%"
          {...props}
      />
    </Card>
    <SkeletonLoading 
        height="150px"
        marginY="md"
        width="150px"
        {...props}
    />
    <SkeletonLoading 
        borderRadius="rounded"
        height="150px"
        width="150px"
        {...props}
    />
  </div>
)

export default SkeletonLoadingHeightWidth

Version data entries

178 entries across 178 versions & 2 rubygems

Version Path
playbook_ui-14.10.0.pre.rc.10 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.rc.9 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.rc.9 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.rc.8 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.rc.8 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.rc.7 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.rc.7 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.rc.6 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.rc.6 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.rc.5 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.rc.5 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.rc.4 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.rc.4 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.9.0.pre.alpha.PLAY16264818 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.9.0.pre.alpha.PLAY16264818 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.9.0.pre.alpha.PBNTR702stickyleftcolrails4806 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.9.0.pre.alpha.PBNTR702stickyleftcolrails4806 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.rc.3 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.rc.3 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.rc.2 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx