2018-02-13 03:50:31 -08:00
|
|
|
---
|
|
|
|
|
path: "docs/layout-direction"
|
|
|
|
|
title: "Layout Direction"
|
2018-02-16 06:41:56 -08:00
|
|
|
hasPlayground: false
|
2018-02-13 03:50:31 -08:00
|
|
|
---
|
|
|
|
|
|
2018-02-14 07:53:07 -08:00
|
|
|
## Layout Direction
|
|
|
|
|
|
2018-02-16 03:47:09 -08:00
|
|
|
Layout direction specifies the direction in which children and text
|
|
|
|
|
in a hierarchy should be laid out. Layout direction also effects what
|
|
|
|
|
edge `start` and `end` refer to. By default Yoga lays out with `LTR`
|
|
|
|
|
layout direction. In this mode `start` refers to `left` and `end`
|
|
|
|
|
refers to `right`. When localizing your apps for markets with RTL languages
|
|
|
|
|
you should customize this by either by passing a direction
|
|
|
|
|
to the `CalculateLayout` call or by setting the direction on the root node.
|
|
|
|
|
|
|
|
|
|
**LTR (DEFAULT)** Text and children and laid our from left to right. Margin and
|
|
|
|
|
padding applied the start of an element are applied on the left side.
|
|
|
|
|
|
2018-02-16 06:41:56 -08:00
|
|
|
**RTL** Text and children and laid our from right to left. Margin and
|
2018-02-16 03:47:09 -08:00
|
|
|
padding applied the start of an element are applied on the right side.
|
|
|
|
|
|
2018-02-14 07:53:07 -08:00
|
|
|
<controls prop="layoutDirection"></controls>
|
