@dnb/eufemia/components/flex/ContainerDocs.js

DNB Eufemia Design System UI Library

export const FlexContainerProperties = {
  direction: {
    doc: 'Direction of sub components. Can be: `horizontal` or `vertical`.',
    type: [`'horizontal'`, `'vertical'`],
    defaultValue: `'horizontal'`,
    status: 'optional'
  },
  wrap: {
    doc: 'Define if we should wrap contents if there is not enough space.',
    type: 'boolean',
    defaultValue: 'true',
    status: 'optional'
  },
  justify: {
    doc: 'How to place sub components if there is space available in the container.',
    type: [`'flex-start'`, `'flex-end'`, `'center'`, `'space-between'`, `'space-around'`, `'space-evenly'`],
    defaultValue: `'flex-start'`,
    status: 'optional'
  },
  align: {
    doc: 'How to align sub components.',
    type: [`'flex-start'`, `'flex-end'`, `'center'`, `'stretch'`, `'baseline'`],
    defaultValue: `'flex-start'`,
    status: 'optional'
  },
  divider: {
    doc: 'How to separate sub components.',
    type: [`'space'`, `'line'`, `'line-framed'`],
    defaultValue: `'space'`,
    status: 'optional'
  },
  sizeCount: {
    doc: 'Define how many parts your layout should be divided in. Should be used in combination with a [Flex.Item](/uilib/layout/flex/item).',
    type: 'number',
    defaultValue: '12',
    status: 'optional'
  },
  gap: {
    doc: 'How much space between child items. Use `false` for no spacing. (If in vertical layout: if both `rowGap` and `gap` is set, `rowGap` will be used.)',
    type: [`'xx-small'`, `'x-small'`, `'small'`, `'medium'`, `'large'`, `'x-large'`, `'xx-large'`, 'false'],
    defaultValue: `'small'`,
    status: 'optional'
  },
  rowGap: {
    doc: 'How much space between rows. Use `false` for no row gap. (If in vertical layout: if both `rowGap` and `gap` is set, `rowGap` will be used.)',
    type: [`'xx-small'`, `'x-small'`, `'small'`, `'medium'`, `'large'`, `'x-large'`, `'xx-large'`, 'false'],
    defaultValue: `'small'`,
    status: 'optional'
  },
  element: {
    doc: 'Define the type of element.',
    type: ['string', 'React.Element'],
    defaultValue: `'div'`,
    status: 'optional'
  },
  innerRef: {
    doc: 'Provide a React.Ref to accessing the inner HTML element.',
    type: 'React.RefObject',
    defaultValue: 'undefined',
    status: 'optional'
  },
  wrapChildrenInSpace: {
    doc: 'Define if intrinsic DOM child elements such as `li` should be wrapped in `Space` to receive spacing. Set to `false` to keep them as direct descendants.',
    type: 'boolean',
    defaultValue: 'true',
    status: 'optional'
  },
  '[Space](/uilib/layout/space/properties)': {
    doc: 'Spacing properties like `top` or `bottom` are supported.',
    type: 'Various',
    status: 'optional'
  },
  spacing: {
    doc: 'Deprecated, use `gap` instead. ~~How much space between sub components. Can be `false` for no spacing.~~',
    type: [`'xx-small'`, `'x-small'`, `'small'`, `'medium'`, `'large'`, `'x-large'`, `'xx-large'`, 'false'],
    defaultValue: `'small'`,
    status: 'deprecated'
  }
};
//# sourceMappingURL=ContainerDocs.js.map