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.init
{ width = flags.innerWidth
, height = flags.innerHeight
}
RenderConfig.localeEnglish
UI.Internal.RenderConfig.RenderConfig
RenderConfig.RenderConfig
upholds all the information required for the components to apply the responsivity and accessibility changes.
init : { window | height : Basics.Int, width : Basics.Int } -> Locale -> RenderConfig
RenderConfig.init
builds a RenderConfig.RenderConfig
with the minimum necessary information for responsivity to work.
RenderConfig.init
{ width = 1920
, height = 1080
}
RenderConfig.localeEnglish
UI.Internal.RenderConfig.Locale
Define how to alterate text and dates to fit a localization profile.
localeEnglish : Locale
Equivalent to en-US according to ISO 639.1 and ISO 3166.
localeFrench : Locale
Equivalent to fr-FR according to ISO 639.1 and ISO 3166.
localePortuguese : Locale
Equivalent to pt-PT according to ISO 639.1 and ISO 3166.
localeSpanish : Locale
Equivalent to es-ES according to ISO 639.1 and ISO 3166.
updateWindow : { window | height : Basics.Int, width : Basics.Int } -> RenderConfig -> RenderConfig
The subscribed event of resizing the browser should reflect on a RenderConfig
update.
For that, use RenderConfig.updateWindow
RenderConfig.updateWindow
{ width = 1920
, height = 1080
}
oldRenderConfig
updateLocale : Locale -> RenderConfig -> RenderConfig
The subscribed event of resizing the browser should reflect on a RenderConfig
update.
For that, use RenderConfig.updateWindow
RenderConfig.updateWindow
{ width = 1920
, height = 1080
}
oldRenderConfig
isMobile : RenderConfig -> Basics.Bool
True
when the browser is a mobile browser.
if RenderConfig.isMobile renderConfig then
-- Mobile view
else
-- Desktop view
isPortrait : RenderConfig -> Basics.Bool
True
when the browser is in portrait orientation and not landscape.
if RenderConfig.isPortrait renderConfig then
-- Portrait view
else
-- Landscape view
elLayoutAttributes : RenderConfig -> List (Element.Attribute msg)
RenderConfig.elLayoutAttributes
are the recommended attributes for Element.layout
.
If the app is using UI.Document.toBrowserDocument
then there is nothing to worry about as it already uses these attributes.
Element.layout (RenderConfig.elLayoutAttributes renderConfig) (appView model)