Sha256: d41388b51debddb746d71494743d77a806272d1d43085c1c292c4670e6e8807e

Contents?: true

Size: 1.21 KB

Versions: 68

Compression:

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

68 entries across 68 versions & 2 rubygems

Version Path
playbook_ui_docs-14.10.0.pre.alpha.play16825244 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.alpha.play16825244 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.11.0.pre.rc.11 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.11.0.pre.rc.11 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.11.0.pre.rc.10 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.11.0.pre.rc.10 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.alpha.play1662cssbargraph5214 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5214 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.alpha.play1662cssbargraph5213 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5213 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.alpha.play1662cssbargraph5210 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5210 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.alpha.play1662cssbargraph5208 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5208 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.alpha.play1662cssbargraph5207 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5207 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.alpha.play16825206 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.alpha.play16825206 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui_docs-14.10.0.pre.alpha.play1662cssbargraph5204 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx
playbook_ui-14.10.0.pre.alpha.play1662cssbargraph5204 app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx