Sha256: 312a29d3e64dcaa1a6fdeee2425047e2204a6f2a64131585eaa849f18d6955c3

Contents?: true

Size: 1.18 KB

Versions: 675

Compression:

Stored size: 1.18 KB

Contents

import React from 'react'
import { Flex, FlexItem, Title } from 'playbook-ui'

const FlexInline = (props) => {
  return (
    <>
      <div className="flex-doc-example">
        <Title
            size={4}
            text="Row"
            {...props}
        />
        <br />
        <Flex
            className="bg_light"
            inline
            {...props}
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>

        <br />
        <Title
            size={4}
            text="Column"
            {...props}
        />
        <br />
        <Flex
            className="bg_light"
            inline
            orientation="column"
            {...props}
        >
          <FlexItem>
            {'1'}
          </FlexItem>
          <FlexItem>
            {'2'}
          </FlexItem>
          <FlexItem>
            {'3'}
          </FlexItem>
          <FlexItem>
            {'4'}
          </FlexItem>
        </Flex>
      </div>
    </>
  )
}

export default FlexInline

Version data entries

675 entries across 675 versions & 2 rubygems

Version Path
playbook_ui_docs-14.8.0.pre.alpha.PLAY1658tanstackbump4657 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui-14.8.0.pre.alpha.PLAY1658tanstackbump4657 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui_docs-14.8.0.pre.alpha.PLAY1649rolloutheightglobalprops4635 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui-14.8.0.pre.alpha.PLAY1649rolloutheightglobalprops4635 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui_docs-14.9.0.pre.rc.8 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui-14.9.0.pre.rc.8 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui_docs-14.8.0.pre.alpha.PLAY1598floatinguiupgrade4617 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui-14.8.0.pre.alpha.PLAY1598floatinguiupgrade4617 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui_docs-14.9.0.pre.rc.7 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui-14.9.0.pre.rc.7 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui_docs-14.9.0.pre.rc.6 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui-14.9.0.pre.rc.6 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui_docs-14.9.0.pre.rc.5 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui-14.9.0.pre.rc.5 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui_docs-14.8.0.pre.alpha.pbntr661createstickyleftprop4612 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui-14.8.0.pre.alpha.pbntr661createstickyleftprop4612 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui_docs-14.8.0.pre.alpha.play1648heightglobalprops4606 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui-14.8.0.pre.alpha.play1648heightglobalprops4606 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui_docs-14.9.0.pre.rc.4 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
playbook_ui-14.9.0.pre.rc.4 app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx