StartEnd
Responsive
Many of the properties for StartEnd can be responsive:
- Provide an array of
breakpoints
, which will be used in the (min-width) media queries used for responsive properties. - Those breakpoint values can either be a number (converted to px) or a key from the theme (e.g. the default mineralTheme has 'narrow', 'medium', and 'wide').
- For each responsive property, instead of passing a single value, pass an
array of values that is one longer than the
breakpoints
array. The first value applies when no breakpoint matches, the second value applies when the first breakpoint matches, and so on. - If you don't need to change a value at a breakpoint, you can pass
null
to skip that breakpoint for that property.
The code in the example below exhibits the following behavior:
- When the viewport is less than 800px wide, it will display as a column.
- When the viewport is at least 800px wide, it will display as a row.
Start
End
<StartEnd breakpoints={[800]} direction={['column', 'row']}> <Box>Start</Box> <Box>End</Box> </StartEnd>