Direction Provider
Sets the layout direction (LTR / RTL) for everything inside it.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <DirectionProvider />
When to Use
- Render a right-to-left (Arabic, Hebrew, Persian, …) section or a whole app.
- Scope a direction to one subtree — e.g. an RTL preview inside an LTR admin.
- Lumeo components use logical CSS utilities (
ms-/me-/ps-/pe-/start-/end-/text-start/…), so wrapping them in an RTL provider mirrors their layout automatically.
Direction = Ltr (default)
The icon sits on the left and text aligns to the start.
Direction = Rtl
Same markup — now the icon is on the right and text aligns to the right.
This outer panel is RTL — the icon sits on the right.
…but this nested block forces LTR again (e.g. for a code sample).
A DirectionProvider only affects its own subtree, so you can nest one direction inside another — e.g. force an LTR code sample inside an otherwise-RTL panel.
Wrap your app's root (or any subtree) in a single DirectionProvider; everything inside
inherits the direction. The native dir attribute it sets also flips native text
alignment, form controls and bidi text — not just Lumeo's logical utilities.