Responsive

Lays out children in a vertically or horizontally spaced layout based on given breakpoint (default is 720px).

• <= $bp behaves like a Column
• > $bp behaves like an Row

You'll have to resize the browser window to see the following examples in action 👍

As an example, resize your browser window to see the following layout change from horizontal to vertical at 600px:

Live Editor

<Responsive $bp={600}> <Stretch style={{background: "lightskyblue"}}>Hello</Stretch> <Stretch style={{background: "lightpink"}}>World</Stretch> </Responsive>

<Responsive $bp={600}>
  <Stretch style={{background: "lightskyblue"}}>Hello</Stretch>
  <Stretch style={{background: "lightpink"}}>World</Stretch>
</Responsive>

Result

Loading...

info

Here is an example with left and right buttons collapsing into two rows at breakpoint:

Live Editor

<Responsive $bp={1080}> <Row $scale="stretch"> <demos.Button>Back 1</demos.Button> <demos.Button>Back 2</demos.Button> </Row> <Row $scale="stretch" $hAlign="end"> <demos.Button>Next 1</demos.Button> <demos.Button>Next 2</demos.Button> </Row> </Responsive>

<Responsive $bp={1080}>
  <Row $scale="stretch">
    <demos.Button>Back 1</demos.Button>
    <demos.Button>Back 2</demos.Button>
  </Row>
  <Row $scale="stretch" $hAlign="end">
    <demos.Button>Next 1</demos.Button>
    <demos.Button>Next 2</demos.Button>
  </Row>
</Responsive>

Result

Loading...

info

Another similar example is a common layout in designs is tabular data that collapses:

Live Editor

<Column style={{fontSize: '24px'}}> <Responsive> <Row $scale="stretch">Price</Row> <Row $scale="stretch" $hAlign="end">12.34</Row> </Responsive> <Responsive> <Row $scale="stretch">GST</Row> <Row $scale="stretch" $hAlign="end">1.23</Row> </Responsive> </Column>

<Column style={{fontSize: '24px'}}>
  <Responsive>
    <Row $scale="stretch">Price</Row>
    <Row $scale="stretch" $hAlign="end">12.34</Row>
  </Responsive>
  <Responsive>
    <Row $scale="stretch">GST</Row>
    <Row $scale="stretch" $hAlign="end">1.23</Row>
  </Responsive>
</Column>

Result

Loading...

info

Another example is form inputs:

Live Editor

<Responsive $bp={600}> <Column $scale='stretch' $space={5}> <demos.Label>First name</demos.Label> <demos.Input/> </Column> <Column $scale='stretch' $space={5}> <demos.Label>Last name</demos.Label> <demos.Input/> </Column> </Responsive>

<Responsive $bp={600}>
  <Column $scale='stretch' $space={5}>
    <demos.Label>First name</demos.Label>
    <demos.Input/>
  </Column>
  <Column $scale='stretch' $space={5}>
    <demos.Label>Last name</demos.Label>
    <demos.Input/>
  </Column>
</Responsive>

Result

Loading...

tip

Responsive props are categorized into Root, Mode (h/v mode) and Overridable.

RootProps

These are props that impact the root tag generated by the Responsive.

export interface RootProps extends
  DivProps,
  BreakpointProp {
}

export interface BreakpointProp {
  /** 
   * windowWidth <= breakpoint : it is vertical (mobile)
   * else                      : it is horizontal (desktop)
   **/
  $bp?: number;
}

• DivProps is covered in common props.
• $bp is simply the breakpoint you've already seen.

ModeProps

ModeProps consists of v and h mode customizations:

export interface ModeProps {
  /** Vertical mode configuration */
  $v?: VProps;
  /** Horizontal mode configuration */
  $h?: HProps;
}

The only difference between VProps and HProps is alignment

• $v supports the same ($vAlign, $hAlign) options offered the Column component.
• $h supports the same ($vAlign, $hAlign, $reverse) options offered the Row component.

The rest of the props are the same, and considered "Overridable".

OverridableProps

These props can be specified at the root or as v/h options. Some ways you could use these props:

• Only at the root (used for both modes).
• For specfic modes (used only in those mode).
• Combination: root + override-in-specific-mode.

The following props are supported:

• SpaceProp: supports the $space prop as explained in the space principle.
• ScaleProp: supports the $scale prop as explained in the scale principle.
• BaseProps: supports the base props as explained in common types.

info

As an example, below we have an Responsive with a default space of 40px but in v mode it has it changed to 10px

Pseudocode: (<Responsive $space=40 $v={$space:10}/>):

Live Editor

<Responsive $space={40} $v={{$space: 10}} $bp={1080} style={{background: 'gold'}} > <Stretch style={{background: "lightskyblue"}}>Hello</Stretch> <Stretch style={{background: "darkorange"}}>World</Stretch> </Responsive>

<Responsive 
  $space={40}
  $v={{$space: 10}}
  $bp={1080} style={{background: 'gold'}} 
>
  <Stretch style={{background: "lightskyblue"}}>Hello</Stretch>
  <Stretch style={{background: "darkorange"}}>World</Stretch>
</Responsive>

Result

Loading...

Reverse

Sometimes you want to reverse the order of components between the V and the H mode. You can do this with H mode's $reverse property e.g.

Live Editor

<Responsive $h={{$reverse: true}} $bp={1080} style={{background: 'gold'}} > <Stretch style={{background: "lightskyblue"}}>VIDEO</Stretch> <Stretch style={{background: "darkorange"}}>Table of Contents</Stretch> </Responsive>

<Responsive 
  $h={{$reverse: true}}
  $bp={1080} style={{background: 'gold'}} 
>
  <Stretch style={{background: "lightskyblue"}}>VIDEO</Stretch>
  <Stretch style={{background: "darkorange"}}>Table of Contents</Stretch>
</Responsive>

Result

Loading...