Package Exports

@commercetools-uikit/constraints

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@commercetools-uikit/constraints) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Constraints

Description

Constraints are container elements with a configurable constraint size, like width or height.

Installation

yarn add @commercetools-uikit/constraints

npm --save install @commercetools-uikit/constraints

Additionally install the peer dependencies (if not present)

yarn add react

npm --save install react

Usage

import React from 'react';
import Constraints from '@commercetools-uikit/constraints';

<Constraints.Horizontal max={7}>
  <p>
    Lorem ipsum dolor sit amet, id labitur perpetua vix. An graece iisque
    corpora sit, erant nihil signiferumque et pro, cu ius minim altera
    temporibus.
  </p>
</Constraints.Horizontal>;

Properties

Props	Type	Required	Description
`max`	`enum` Possible values: `1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'`		Determines scale of the constraint.
`constraint`	`enum` Possible values: `'xs', 's', 'm', 'l', 'xl', 'scale'`		DEPRECATING SOON: Please use the `max` prop instead. Determines scale of the constraint.
`children`	`node`	✅

`max` constraint values:

Scale	Pixels
auto	auto
scale	100%
1	`42px`
2	`84px`
3	`142px`
4	`184px`
5	`242px`
6	`284px`
7	`342px`
8	`384px`
9	`442px`
10	`484px`
11	`542px`
12	`584px`
13	`642px`
14	`684px`
15	`742px`
16	`784px`

`constraint` prop values (deprecating soon)

Scale	Pixel	`max` prop equivalent
scale	`100%`	`scale`
xs	`42px`	1
s	`142px`	3
m	`342px`	7
l	`484px`	10
xl	`784px`	16

@commercetools-uikit/constraints