2.1.3 • Published 6 years ago
@comparaonline/ui-grid v2.1.3
@comparaonline/ui-grid
- Row and Column components based on react-foundation project
- Breakpoints json file included has screen breakpoints sizes
Installation
$ npm install --save @comparaonline/ui-gridUsage
This package relies on the existence of the stylesheet located at dist/index.css, please import it accordly to your project needs.
Row
import { Row } from '@comparaonline/ui-grid';The known props for Row are:
| name | description | default value |
|---|---|---|
| collapse | Removes the columns gutter | false |
| expanded | Sets width to 100% | false |
| collapseOnbreakpoint | Removes the gutters on the given breakpoint | undefined |
| uncollapseOnbreakpoint | Overrides collapseOn rules inherited from smaller sizes | undefined |
| equalHeightColumns | Sets all the columns height to the max column height (requires flex support) | false |
| addVerticalGutters | Adds vertical gutters to all the children columns | false |
Column
import { Column } from '@comparaonline/ui-grid';The known props for Column are:
| name | description | default value |
|---|---|---|
small, medium, large, xlarge, xxlarge | Sets the column size per breakpoint | small=12 |
| offsetOnbreakpoint | Moves block to right according to offset, | undefined |
| pushOnbreakpoint | Right shift column | undefined |
| pullOnbreakpoint | Left shift column | undefined |
| centeredOnbreakpoint | Centers the column on the given breakpoint | undefined |
| uncenteredOnbreakpoint | Overrides centeredOn rules inherited from smaller sizes | undefined |
Example:
<Row>
<Column small={2} large={4} pushOnSmall={2} pullOnLarge={2}>
Content
</Column>
<Column small={2} offsetOnLarge={4} centeredOnSmall uncenteredOnLarge>
Content
</Column>
</Row>Visibility props
| name | description | default value |
|---|---|---|
| showOnbreakpoint | Shows itself from the given breakpoint an higher | undefined |
| hideOnbreakpoint | Hides itself from the given breakpoint an higher | undefined |
Breakpoints
The breakpoints values are exported as a literal object with the following properties:
| name | size |
|---|---|
| xsmall | 0px |
| small | 480px |
| medium | 600px |
| large | 840px |
| xlarge | 960px |
| xxlarge | 1280px |
To access to this values, simply import them:
import { breakpoints } from '@comparaonline/ui-grid';Other settings
Other relevant values are exposed using the settings object.
import { settings } from '@comparaonline/ui-grid';The current output is:
{
gutters: {
default: "16px"
}
}