@commercetools-uikit/spacings-inline
TypeScript icon, indicating that this package has built-in type declarations

19.7.0 • Public • Published

Inline

Description

If you want to learn more about the spacing components take a look at this article.

Usage

import SpacingsInline from '@commercetools-uikit/spacings-inline';

<SpacingsInline scale="m">
  <FlatButton />
  <FlatButton />
  <FlatButton />
</SpacingsInline>;

Using Spacings preset

Inline spacing can be imported and used via spacings preset as well.

import Spacings from '@commercetools-uikit/spacings';

<Spacings.Inline scale="m">
  <FlatButton />
  <FlatButton />
  <FlatButton />
</Spacings.Inline>;

Properties

Props Type Required Values Default
scale String - ['xs', 's', 'm', 'l', 'xl'] s
alignItems oneOf - ['stretch', 'flex-start', 'flex-end', 'center', 'baseline'] flex-start
justifyContent oneOf - ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'] flex-start
children PropTypes.node - - -

If you need to use flex-wrap CSS property, consider using instead the component <Grid />.

Scales

Scale Pixel
xs 4
s 8
m 16
l 24
xl 32

Package Sidebar

Install

npm i @commercetools-uikit/spacings-inline

Weekly Downloads

15,581

Version

19.7.0

License

MIT

Unpacked Size

25.4 kB

Total Files

12

Last publish

Collaborators

  • emmenko
  • commercetools-admin
  • tdeekens