Sha256: d666e429a9c03a0f115bc57ea69b3789214be0507921156aa1780c56b05598dc

Contents?: true

Size: 1.37 KB

Versions: 771

Compression:

Stored size: 1.37 KB

Contents

import React from 'react'
import { Flex, FlexItem } from  '../../'

const FlexGap = (props) => {
  const count = () => {
    const array = []
    for (let i = 0; i < 40; i++) {
      array.push(i)
    }
    return array
  }

  return (
    <>
      <div className="flex-doc-example">
        <Flex
            gap="xxs"
            wrap
            {...props}
        >
          {count().map((v, key) => (
            <FlexItem key={key}>
              {v}
            </FlexItem>
            ))}
        </Flex>
      </div>

      <br />

      <div className="flex-doc-example">
        <Flex
            columnGap="lg"
            {...props}
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>
      <br />
      <div className="flex-doc-example">
        <Flex
            orientation="column"
            rowGap="xl"
            {...props}
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>
    </>
  )
}

export default FlexGap

Version data entries

771 entries across 771 versions & 2 rubygems

Version Path
playbook_ui_docs-13.34.1.pre.alpha.play1407statvaluekitinconsistencies3388 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui-13.34.1.pre.alpha.play1407statvaluekitinconsistencies3388 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui_docs-13.34.1.pre.alpha.PLAY14703378 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui-13.34.1.pre.alpha.PLAY14703378 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui_docs-13.34.1 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui-13.34.1 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui_docs-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3370 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3370 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui_docs-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3369 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3369 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3368 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui_docs-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3366 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui-13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3366 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui-13.34.0 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui_docs-13.33.1.pre.alpha.play1407statvaluekitinconsistencies3352 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui-13.33.1.pre.alpha.play1407statvaluekitinconsistencies3352 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui_docs-13.33.1.pre.alpha.PLAY14063320 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui-13.33.1.pre.alpha.PLAY14063320 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui-13.33.1 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
playbook_ui_docs-13.33.0.pre.alpha.PBNTR405dropdownformfixesrails3311 app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx