Sha256: ea7c75a6b6b12ec09dbeba9d88ab9c58dbd9b85a311388db5647b59099c7494f

Contents?: true

Size: 1.23 KB

Versions: 51

Compression:

Stored size: 1.23 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" 
        {...props}
    >
      <SkeletonLoading
          borderRadius="md"
          gap="xl"
          height="50%"
          width="300px"
          {...props}
      />
    </Card>
    <Card htmlOptions={{ style: { height: '200px', width: '100%' }}} 
        padding="none"
        {...props}
    >
      <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

51 entries across 51 versions & 2 rubygems

Version Path
playbook_ui-14.10.0.pre.rc.20 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.rc.19 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.rc.19 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.rc.18 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.rc.18 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.9.0.pre.alpha.PLAY1660reactdropzone5020 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.9.0.pre.alpha.PLAY1660reactdropzone5020 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.rc.17 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.rc.17 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.rc.16 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.rc.16 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx