size.md

Size Module

Methods for setting dimensions of React components.

import { View } from "tile-css"

const ResponsiveSquare = View()
  .size(600, 300) // width: 600px, height: 300px
  .bg('lightblue')
  .element();

export const SquareDemo = () => <ResponsiveSquare />;

• Shortcut Methods
  • width
  • height
• The size method

Shortcut Methods

width(width, options?)

Sets the width of an element.

To create an element 200 pixels wide:

const WidthBox = View()
  .width(200)
  .element();

With max width:

const MaxWidthBox = View()
  .width('100%', { max: 800 }) //  100% wide & no wider than 800 pixels.
  .element();

With min width:

const MaxWidthBox = View()
  .width('100%', { min: 800 }) //  minWidth: 800px
  .element();

height(height, options?)

Sets the height of an element.

To create an element 150 pixels tall.

const HeightBox = View()
  .height(150)
  .element();

With max height:

const MaxHeightBox = View()
  .height('100vh', { max: 600 }) // height: 100%, maxHeight: 600px
  .element();

With min height:

const MaxWidthBox = View()
  .height('100%', { min: 600 }) //  height: 100%, minHeight: 600px
  .element();

Core Layout Methods

size(widthOrOptions, heightOrOptions?)

Sets both width and height of an element.

To create a 100x100 pixel square element;

const SquareBox = View()
  .size(100)
  .element();

To create a rectangle element 200 px wide and 100 px tall.

const RectangleBox = View()
  .size(200, 100)
  .element();

Pass more detailed options:

const ComplexSizedElement = View()
  .size({
    width: '100%',
    maxWidth: 1200,
    height: 'auto',
    minHeight: 300,
    aspect: 16/9
  })
  .element();

This creates an element with full width (max 1200px), auto height (min 300px), and a 16:9 aspect ratio.