Adapting to screen size

This document shows two methods of adapting your component to different screen sizes.

Mobile vs Desktop

The easiest way to make sure that your component displays well on desktop and mobile is to have different content for each. To achieve that you can connect to the Ui store and expose / use the mobile variable.

The value of the variable dynamically changes when the screen is resized.

component Main {
connect Ui exposing { mobile }
fun render : Html {
if mobile {
<div>"MOBILE"</div>
} else {
<div>"DESKTOP"</div>
}
}
}
Provider.ElementSize

The other way is to measure the size of the element and use that to decide what to show.

To achieve that you can use the Provider.ElementSize provider which calls the given function when the observed element is resized.

component Main {
state width : Number = 0
use Provider.ElementSize {
changes: updateWidth,
element: base
}
fun updateWidth (dimensions : Dom.Dimensions) {
next { width: dimensions.width }
}
fun render : Html {
<div as base>
if width < 700 {
<div>"MOBILE"</div>
} else if (width < 1100) {
<div>"TABLET"</div>
} else {
<div>"DESKTOP"</div>
}
</div>
}
}
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.