UI.RenderConfig propagates data for accessibility and responsivity in all components.
The recommended approach is storing it in the app's Model, gathering the required init parameters using Elm's flags. For keeping it update, subscribe to Browser.onResize and apply update using RenderConfig.updateWindow.
RenderConfig.fromWindow
{ width = flags.innerWidth
, height = flags.innerHeight
}RenderConfig.fromWindow builds a RenderConfig.RenderConfig with the minimum necessary information for responsivity to work.
RenderConfig.fromWindow
{ width = 1920
, height = 1080
}The subscribed event of resizing the browser should reflect on a RenderConfig update.
For that, use RenderConfig.updateWindow
RenderConfig.updateWindow
{ width = 1920
, height = 1080
}
oldRenderConfigTrue when the browser is a mobile browser.
if RenderConfig.isMobile renderConfig then
-- Mobile view
else
-- Desktop viewTrue when the browser is in portrait orientation and not landscape.
if RenderConfig.isPortrait renderConfig then
-- Portrait view
else
-- Landscape viewRenderConfig.elLayoutAttributes are the recommended attributes for Element.layout.
If the app is using UI.NavigationContainer.navigator then there is nothing to worry about as it already uses these attributes.
Element.layout (RenderConfig.elLayoutAttributes renderConfig) (appView model)
RenderConfig.RenderConfigupholds all the information required for the components to apply the responsivity and accessibility changes.