@UiReact

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

UiSpacing

Package: @uireact/foundation

^v4.1.5

This component is used to add spacing around components

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/foundation

This component is exported as part of @uireact/foundation so if you have already set up the library you can just import it from the foundation package.

Usage 🛠️


  <UiSpacing margin={{ all: 'five' }}>Nice margin dude!</UiSpacing>

UiSpacing renders a div to which it assigns its styling and wraps the children, as is a div that makes that element to render as a block element, if you want to make it inline you can use the inline prop to it.

Details 🤓

More information about the <UiSpacing /> implementation.

SpacingDistribution

The SpacingDistribution let you set up spacing in multiple ways:

type SpacingDistribution = {

  all?: Spacing;
  /** Apply spacing to all sides */

  block?: Spacing;
  /** Apply spacing to top and bottom */

  inline?: Spacing;
  /** Apply spacing to left and right */

  left?: Spacing;
  /** Apply spacing to left */

  right?: Spacing;
  /** Apply spacing to right */

  top?: Spacing;
  /** Apply spacing to top */

  bottom?: Spacing;
  /** Apply spacing to bottom */
};

Spacing size on theme

The Spacing type is used to reference a value from the Spacing property provided from the themes

For instance if you set up this in your theme:

{
  ...,
  spacing: {
    one: '1px',
    two: '2px',
    three: '4px',
    four: '8px',
    five: '16px',
    six: '32px',
    seven: '64px',
  },
  ...
}

If you use this:


<UiSpacing padding={{all: 'three'}}>
  Some content
</UiSpacing>

The content will get wrapped under a div element with the computed CSS value of 4px.