DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Copy review

Browse Source 
Reviewed By: danielbuechele

Differential Revision: D7009457

fbshipit-source-id: d5053751a2bde369a65a740c03ace5bbd2eec02f
This commit is contained in:
Emil Sjölander
2018-02-16 06:41:54 -08:00
committed by Facebook Github Bot
parent 0c74a72fac
commit bba81781af
9 changed files with 74 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
website/contents/properties/absolute-layout.md
View File

@@ -5,19 +5,26 @@ hasPlayground: true
--- ---
## Absolute/Relative Layout ## Absolute/Relative Layout
### Relative Layout The `position type` of an element defines how it is
positioned within its parent.
The element is positioned according to the normal flow of the view, and then offset relative to itself based on the values of `top`, `right`, `bottom`, and `left`. The offset does not affect the position of any other elements. Try out relative layout by changing the `positionType` of any child view and try to add offset to it. **RELATIVE (DEFAULT)** By default an element is positioned
relatively. This means an element is positioned according to the
normal flow of the layout, and then offset relative to that position
based on the values of `top`, `right`, `bottom`, and `left`.
The offset does not affect the position of any sibling or parent elements.
### Absolute Layout **ABSOLUTE** When positioned absolutely an element doesn't take
part in the normal layout flow. It is instead laid out independent
The element doesn't take part in the normal flow. It is laid out independent of its siblings. The position is determined based on the `top`, `right`, `bottom` and `left` values. Try this out in playground. of its siblings. The position is determined based on the
`top`, `right`, `bottom`, and `left` values.
#### Position Type
<controls prop="positionType"></controls> <controls prop="positionType"></controls>
#### Position The position values `top`, `right`, `bottom`, and `left` behave
differently depending on the `position type` of the element. For
a `relative` element they offset the position of the element in the
direction specified. For `absolute` element though these properties
specify the offset of the element's side from the same side on the parent.
<controls prop="position"></controls> <controls prop="position"></controls>

20
website/contents/properties/align-content.md
View File

@@ -7,7 +7,23 @@ initialPlayground: eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiYWxpZ25Db250ZW50IjoxLCJmb
## Align Content ## Align Content
The property defines the distribution of lines along the cross-axis. This only Align content defines the distribution of lines along the cross-axis. This only
has effect when items are wrapped to multiple lines (see [flexWrap](flex-wrap)). has effect when items are wrapped to multiple lines using [`flex wrap`](flex-wrap).
**FLEX START (DEFAULT)** Align wrapped lines to the start of the container's cross axis.
**FLEX END** Align wrapped lines to the end of the container's cross axis.
**STRETCH** Stretch wrapped lines to match the `height` of the container's cross axis.
**CENTER** Align wrapped lines in the center of the container's cross axis.
**SPACE BETWEEN** Evenly space wrapped lines across the container's main axis, distributing
remaining space between the lines.
**SPACE AROUND** Evenly space wrapped lines across the container's main axis, distributing
remaining space around the lines. Compared to `space between` using
`space around` will result in space being distributed to the begining of
the first lines and end of the last line.
<controls prop="alignContent"></controls> <controls prop="alignContent"></controls>

12
website/contents/properties/align-items.md
View File

@@ -7,10 +7,10 @@ hasPlayground: true
## Align Items ## Align Items
Align items describes how to align children along the cross axis of their container. Align items describes how to align children along the cross axis of their container.
Align items is very similar to [Justify Content](justify-content) but instead of Align items is very similar to [`justify content`](justify-content) but instead of
applying to the main axis, Align Items applies to the cross axis. applying to the main axis, `align items` applies to the cross axis.
**STRETCH (DEFAULT)** Stretch children of a container to match the height of the container's cross axis. **STRETCH (DEFAULT)** Stretch children of a container to match the `height` of the container's cross axis.
**FLEX START** Align children of a container to the start of the container's cross axis. **FLEX START** Align children of a container to the start of the container's cross axis.
@@ -22,9 +22,9 @@ applying to the main axis, Align Items applies to the cross axis.
## Align Self ## Align Self
Align self has the same options and effect as Align Items but instead of Align self has the same options and effect as `align items` but instead of
affecting the children within a container, you can apply this property to affecting the children within a container, you can apply this property to
a single child to change its alignment within its parent. `Align Self` a single child to change its alignment within its parent. `align self`
overrides any option set by the parent with `Align Items`. overrides any option set by the parent with `align items`.
<controls prop="alignSelf"></controls> <controls prop="alignSelf"></controls>

10
website/contents/properties/aspect-ratio.md
View File

@@ -10,12 +10,12 @@ AspectRatio is a property introduced by Yoga and is not present as a settable
property in the css flexbox specification. Flexbox does has the notion of property in the css flexbox specification. Flexbox does has the notion of
aspect ratio though for things with intrinsic aspect ratio such as images. aspect ratio though for things with intrinsic aspect ratio such as images.
The aspect ratio property in Yoga has the following properties: The `aspect ratio` property in Yoga has the following properties:
- Accepts any floating point value > 0, the default is undefined. - Accepts any floating point value > 0, the default is undefined.
- Defined as the ratio between the width and the height of a node e.g. if a node has an aspect ratio of 2 then its width is twice the size of its height. - Defined as the ratio between the `width` and the `height` of a node e.g. if a node has an aspect ratio of 2 then its `width` is twice the size of its `height`.
- Respects the Min and Max dimensions of an item. - Respects the `min` and `max` dimensions of an item.
- Has higher priority than FlexGrow - Has higher priority than `flex grow`
- If AspectRatio, Width, and Height are set then the cross dimension is overridden. - If `aspect ratio`, `width`, and `height` are set then the cross axis dimension is overridden.
<controls prop="aspectRatio"></controls> <controls prop="aspectRatio"></controls>

6
website/contents/properties/flex-wrap.md
View File

@@ -7,15 +7,15 @@ initialPlayground: eyJ3aWR0aCI6NTAwLCJoZWlnaHQiOjUwMCwiYWxpZ25Db250ZW50IjoxLCJmb
## Flex Wrap ## Flex Wrap
The `flexWrap` property is set on containers and controls what happens when The `flex wrap` property is set on containers and controls what happens when
children overflow the size of the container along the main axis. By default children overflow the size of the container along the main axis. By default
children are forced into a single line (which can shrink elements). children are forced into a single line (which can shrink elements).
If wrapping is allowed items are wrapped into multiple lines along the main If wrapping is allowed items are wrapped into multiple lines along the main
axis if needed. `WRAP_REVERSE` behaves the same, but the order of the lines is axis if needed. `wrap reverse` behaves the same, but the order of the lines is
reversed. reversed.
<controls prop="flexWrap"></controls> <controls prop="flexWrap"></controls>
When wrapping lines [alignContent](align-content) can be used to specify how the When wrapping lines [`align content`](align-content) can be used to specify how the
lines are placed in the container. lines are placed in the container.

8
website/contents/properties/flex.md
View File

@@ -27,10 +27,10 @@ A container will shrink its children weighted by the child’s flex shrink value
<controls prop="flexShrink"></controls> <controls prop="flexShrink"></controls>
**FLEX BASIS** is an axis-independent way of providing the default size of an item **FLEX BASIS** is an axis-independent way of providing the default size of an item
along the main axis. Setting the flex basis of a child is similar to setting the Width of that along the main axis. Setting the flex basis of a child is similar to setting the `width` of that
child if its parent is a container with FlexDirection = row or setting the Height of a child child if its parent is a container with `flex direction: row` or setting the `height` of a child
if its parent is a container with FlexDirection = column. The flex basis of an item is the if its parent is a container with `flex direction: column`. The flex basis of an item is the
efault size of that item, the size of the item before any flex grow and flex shrink default size of that item, the size of the item before any flex grow and flex shrink
calculations are performed. calculations are performed.
<controls prop="flexBasis"></controls> <controls prop="flexBasis"></controls>

12
website/contents/properties/justify-content.md
View File

@@ -8,8 +8,8 @@ hasPlayground: true
Justify content describes how to align children within the main axis of their container. Justify content describes how to align children within the main axis of their container.
For example, you can use this property to center a child horizontally within a container For example, you can use this property to center a child horizontally within a container
with `flex direction` set to `Row` or vertically within a container with `flex direction` with `flex direction` set to `row` or vertically within a container with `flex direction`
set to `Column`. set to `column`.
**FLEX START (DEFAULT)** Align children of a container to the start of the container's main axis. **FLEX START (DEFAULT)** Align children of a container to the start of the container's main axis.
@@ -17,12 +17,12 @@ set to `Column`.
**CENTER** Align children of a container in the center of the container's main axis. **CENTER** Align children of a container in the center of the container's main axis.
**SPACE BETWEEN** Evenly space of children across the container's main axis, distrubuting **SPACE BETWEEN** Evenly space of children across the container's main axis, distributing
remaining space between the children. remaining space between the children.
**SPACE AROUND** Evenly space of children across the container's main axis, distrubuting **SPACE AROUND** Evenly space of children across the container's main axis, distributing
remaining space around the children. Compared to `Space Between` using remaining space around the children. Compared to `space between` using
`Space Around` will result in space being distributed to the begining of `Sspace around` will result in space being distributed to the beginning of
the first child and end of the last child. the first child and end of the last child.
<controls prop="justifyContent"></controls> <controls prop="justifyContent"></controls>

36
website/contents/properties/min-max.md
View File

@@ -6,43 +6,23 @@ hasPlayground: true
## Max / Min Width and Height ## Max / Min Width and Height
All the following properties set the maximum and minimum size constraints of an element.
These properties have higher priority than all other properties and will always be respected.
Constraints can be specified as either absolute pixel values or as percentages of their
parent's size. By default all these constraints are undefined.
### Max Width ### Max Width
The `maxWidth` property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by `maxWidth ` <controls prop="maxWidth"></controls>
### Min Width ### Min Width
The `minWidth` property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified by `width `. <controls prop="minWidth"></controls>
`minWidth` overrides both `maxWidth` and `width`. Try out this in playground.
### Max Height ### Max Height
The `maxHeight` property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified by `maxHeight`. <controls prop="maxHeight"></controls>
### Min Width ### Min Width
The `minHeight` property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified by `height`.
`minHeight ` overrides both `maxHeight` and `height`. Try out this in playground.
Each of the above properties can take the following values
### Pixel
One can specify the pixel values for each of the above properties
### Percentages
One can specifiy min/max values in terms of the percentage of its parent.
Try out the above properties in playground.
#### Max Width
<controls prop="maxWidth"></controls>
#### Min Width
<controls prop="minWidth"></controls>
#### Max Height
<controls prop="maxHeight"></controls>
#### Min Height
<controls prop="minHeight"></controls> <controls prop="minHeight"></controls>

24
website/contents/properties/width-height.md
View File

@@ -6,26 +6,18 @@ hasPlayground: true
## Width and Height ## Width and Height
The `width` property in flexbox specifies the width of the element's content area. Similarly `height` property specifies the height of the element's content area. The `width` property in Yoga specifies the width of the element's content area.
Similarly `height` property specifies the height of the element's content area.
Both `width` and `height` can take following values Both `width` and `height` can take following values:
### Auto **AUTO** Is the default Value, Yoga calculates the width/height for the element based
It is the default Value, Yoga calculates the width/height for the element on its content, whether that is other children, text, or an image.
### Pixels **PIXELS** Defines the width/height in absolute pixels. Depending on other properties set on
Defines the width/height in px the Yoga node this may or may not be the final dimension of the node.
### Percentage **PERCENTAGE** Defines the width or height in percentage of its parent's width or height respectively.
Defines the width or height in percentage of its parents width or height respectively
Lets start to play with playground. For starter, lets try fiddling with `width`:
1. Click on the root view and set `width = auto`, you would see that it would shrink to fit its children.
2. Lets try giving pixel value. Click on any child view, and change its width(say 300), you would now see child view's width is updated
3. Say you want to make your child view half of root view's width. Type 50% in your view's width field, and voila, your view is 50% of its parent.
You can do similar things with `height` too. Keep fiddling 😉
### Width ### Width
<controls prop="width"></controls> <controls prop="width"></controls>