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

Move yoga docs into docs folder on master branch

Browse Source 
Summary: Move yoga docs into master branch so that pull requests are able to include doc updates as part of other changes.

Reviewed By: JoelMarcey

Differential Revision: D4365700

fbshipit-source-id: 2f46a88974104c454c00bcdf1257abb5c4075a68
This commit is contained in:
Emil Sjolander
2016-12-28 03:57:57 -08:00
committed by Facebook Github Bot
parent cd78291de5
commit f2080e520f
113 changed files with 5020 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
docs/_docs/api/c.md Normal file
View File

@@ -0,0 +1,74 @@
---
docid: c
title: C
layout: docs
permalink: /docs/api/c/
---
`YGNodeRef` is the main object you will be interfacing with when using Yoga in C. `YGNodeRef` is a pointer to an internal `YGNode` struct.
### Lifecycle
The following functions control the lifecycle of a `YGNodeRef`.
<script src="https://gist.github.com/emilsjolander/99e454d04df4765147f407bde131feca.js"></script>
- `YGNodeReset` will reset a node to its initial state so it can be re-used without needing to re-allocate a new node.
- `YGNodeFreeRecursive` is mostly used for testing and will free not only the node itself but also its children.
### Children
The following functions help manage the children of a node.
<script src="https://gist.github.com/emilsjolander/7e162314294087bb78817c064d345afb.js"></script>
### Style getters & setters
The large part of Yoga's API consists of setters and getters for styles. These all follow the same general structure. Bellow are the function and enums used to control the various styles. For an in depth guide to how each style works see the getting started guide.
<script src="https://gist.github.com/emilsjolander/74913a3326d952ff5a65dabe5ce4baf8.js"></script>
### Layout results
Once you have set up a tree of nodes with styles you will want to get the result of a layout calculation. Call `YGNodeCalculateLayout` with the desired width and height or `YGUndefined` to perform the layout calculation. Once this function returns the results of the layout calculation is stored on each node. Traverse the tree and retrieve the values from each node.
<script src="https://gist.github.com/emilsjolander/7c7c9c61b69daff5b925719065fb0dc9.js"></script>
### Custom measurements
Certain nodes need to ability to measure themselves, the most common example is nodes which represent text. Text has an intrinsic size and requires measuring itself to determine that size. This is not something Yoga can do as it requires relying on the host system's text rendering engine.
- Call `YGNodeMarkDirty` if a node with a custom text measurement function needs to be re-measured during the next layout pass.
> A measure function can only be attached to a leaf node in the hierarchy.
<script src="https://gist.github.com/emilsjolander/73f9118d8bd27f9cb3744c08f1e53a32.js"></script>
### Context
Context is important when integrating Yoga into another layout system. Context allows you to associate another object with a `YGNodeRef`. This context can then be retrieved from a `YGNodeRef` when for example its measure function is called. This is what enables Yoga to rely on the Android and iOS system implementations of text measurement in React Native.
<script src="https://gist.github.com/emilsjolander/c3d23a1b880d59627e959f3447a9511b.js"></script>
### Logging
Yoga will by default log to stdout and stderr. You may however customize this to instead log to your own logger.
<script src="https://gist.github.com/emilsjolander/b538718ffd7a55efc80845468e0f063e.js"></script>
### Experiments
Yoga has the concept of experiments. An experiment is a feature which is not yet stable. To enable a feature use the following functions. Once a feature has been tested and is ready to be released as a stable API we will remove its feature flag.
<script src="https://gist.github.com/emilsjolander/002516a55e10947e4bdcf5484eee8745.js"></script>
### Custom allocators
You may want to swap out the allocator used in Yoga. These functions allow that.
<script src="https://gist.github.com/emilsjolander/f45053d4f09a9faaf94a8fc071f0224f.js"></script>
### Printing
Yoga has some hooks to print debug information while calculating layout. With the printing APIs you can add additional information to a node when it is printed.
<script src="https://gist.github.com/emilsjolander/c9fbaba914d699ecc91841f4f5515f20.js"></script>

53
docs/_docs/api/csharp.md Normal file
View File

@@ -0,0 +1,53 @@
---
docid: csharp
title: C#
layout: docs
permalink: /docs/api/csharp/
---
`YogaNode` is the main object you will be interfacing with when using Yoga in .NET. `YogaNode` is a thin [P/Invoke](https://msdn.microsoft.com/en-us/library/aa446536.aspx) wrapper around the core Yoga library.
### Lifecycle
Create a `YogaNode` via its default constructor or the static `Create()` builder method and use `Reset` if you want to pool and re-use nodes. The native memory of a `YogaNode` will automatically be freed when the node is garbage collected.
<script src="https://gist.github.com/emilsjolander/ce73212ee5fdb543d463822c3dd172b4.js"></script>
### Children
The following methods help manage the children of a node.
<script src="https://gist.github.com/emilsjolander/2b0ea738d3c24644fa98910b276620e4.js"></script>
### Style getters & setters
The large part of Yoga's API consists of properties, setters, and getters for styles. These all follow the same general structure. Bellow are the function and enums used to control the various styles. For an in depth guide to how each style works see the getting started guide.
<script src="https://gist.github.com/emilsjolander/a84208768e0006b8421a322c40f98539.js"></script>
### Layout results
Once you have set up a tree of nodes with styles you will want to get the result of a layout calculation. Call `CalculateLayout()` perform layout calculation. Once this function returns the results of the layout calculation is stored on each node. Traverse the tree and retrieve the values from each node.
<script src="https://gist.github.com/emilsjolander/b50acf9fc0877affeb0fc3e55b5c6b4c.js"></script>
### Custom measurements
Certain nodes need to ability to measure themselves, the most common example is nodes which represent text. Text has an intrinsic size and requires measuring itself to determine that size. This is not something Yoga can do as it requires relying on the host system's text rendering engine.
- Call `MarkDirty()` if a node with a custom text measurement function needs to be re-measured during the next layout pass.
> A measure function can only be attached to a leaf node in the hierarchy.
<script src="https://gist.github.com/emilsjolander/57178307f515e5ea1ccfbedc05df429b.js"></script>
### Data
Data is important when integrating Yoga into another layout system. Data allows you to associate another object with a `YogaNode`. This data can then be retrieved from a `YogaNode` when for example its measure function is called. This is what enables Yoga to rely on the Android system implementations of text measurement in React Native.
<script src="https://gist.github.com/emilsjolander/c099f826623d70fd6bf7dece14e76700.js"></script>
### Experiments
Yoga has the concept of experiments. An experiment is a feature which is not yet stable. To enable a feature use the following functions. Once a feature has been tested and is ready to be released as a stable API we will remove its feature flag.
<script src="https://gist.github.com/emilsjolander/97b2500918687826cdfe9429638f2d57.js"></script>

59
docs/_docs/api/java.md Normal file
View File

@@ -0,0 +1,59 @@
---
docid: java
title: Java
layout: docs
permalink: /docs/api/java/
---
`YogaNode` is the main object you will be interfacing with when using Yoga in Java. `YogaNode` is a thin [JNI](https://en.wikipedia.org/wiki/Java_Native_Interface) wrapper around the core Yoga library.
### Lifecycle
Create a `YogaNode` via its default constructor and use `reset` if you want to pool and re-use nodes. The native memory of a `YogaNode` will automatically be freed when the node is garbage collected.
<script src="https://gist.github.com/emilsjolander/8775de8c778eb99a05a38e8257f0b4a7.js"></script>
### Children
The following methods help manage the children of a node.
<script src="https://gist.github.com/emilsjolander/5d1c64d8d3be7f7942435c4f5bec45a5.js"></script>
### Style getters & setters
The large part of Yoga's API consists of setters and getters for styles. These all follow the same general structure. Bellow are the function and enums used to control the various styles. For an in depth guide to how each style works see the getting started guide.
<script src="https://gist.github.com/emilsjolander/f94ca2aa69441a3060a7c9f5126f202f.js"></script>
### Layout results
Once you have set up a tree of nodes with styles you will want to get the result of a layout calculation. Call `calculateLayout()` perform layout calculation. Once this function returns the results of the layout calculation is stored on each node. Traverse the tree and retrieve the values from each node.
<script src="https://gist.github.com/emilsjolander/613a80ae11abce423a4806521e1e315b.js"></script>
### Custom measurements
Certain nodes need to ability to measure themselves, the most common example is nodes which represent text. Text has an intrinsic size and requires measuring itself to determine that size. This is not something Yoga can do as it requires relying on the host system's text rendering engine.
- Call `dirty()` if a node with a custom text measurement function needs to be re-measured during the next layout pass.
> A measure function can only be attached to a leaf node in the hierarchy.
<script src="https://gist.github.com/emilsjolander/70fd958b87647abbba604956709a9026.js"></script>
### Data
Data is important when integrating Yoga into another layout system. Data allows you to associate another object with a `YogaNode`. This data can then be retrieved from a `YogaNode` when for example its measure function is called. This is what enables Yoga to rely on the Android system implementations of text measurement in React Native.
<script src="https://gist.github.com/emilsjolander/3f10f3fa91120960b71783780f528973.js"></script>
### Logging
Yoga will by default log to stdout and stderr (or logcat on Android). You may however customize this to instead log to your own logger.
<script src="https://gist.github.com/emilsjolander/6d012f5d48be0e98b7f9c2225c358f6e.js"></script>
### Experiments
Yoga has the concept of experiments. An experiment is a feature which is not yet stable. To enable a feature use the following functions. Once a feature has been tested and is ready to be released as a stable API we will remove its feature flag.
<script src="https://gist.github.com/emilsjolander/97b2500918687826cdfe9429638f2d57.js"></script>

38
docs/_docs/api/objc.md Normal file
View File

@@ -0,0 +1,38 @@
---
docid: objc
title: Objective-C
layout: docs
permalink: /docs/api/objc/
---
> The Objective-C API is very new and still in rapid development. Please use it and [report issues, bugs or feedback](https://github.com/facebook/yoga/issues). We hope to stabilize the API over the next couple weeks / months.
Yoga for Objective-C is implemented as a [category](https://developer.apple.com/library/content/documentation/General/Conceptual/DevPedia-CocoaCore/Category.html) on [UIView](https://developer.apple.com/reference/uikit/uiview). We try to rely on the existing `UIView` properties and initializers where possible, making the Yoga API smaller for Objective-C than for other languages.
### Lifecycle
As with any `UIView` instantiate it using `-(instancetype)initWithFrame:(CGRect)frame`. With Yoga for Objective-C the frame is actually how you set the width and the height of the Yoga node, just like any other `UIView`.
Because Yoga is implemented as a category we need some way to mark the view as using Yoga as you might not want Yoga to control layout of your whole app, this is especially important if you are migrating an existing app to use Yoga. The property decides during layout/sizing whether or not `yg_*` properties should be applied. Defaults to `NO`.
<script src="https://gist.github.com/emilsjolander/b95467f51b945e906d39b66e44999806.js"></script>
### Children
Yoga relies on `UIView` subviews to build up its internal layout tree. However using properties such as `yg_includeInLayout` a View can exclude itself from layout. Therefor we provide the following method to query the number of children which are laid out using Yoga.
<script src="https://gist.github.com/emilsjolander/253d69b12bef2ee1ec899ace81b768a6.js"></script>
### Style setters
The large part of Yoga's API consists of setters for styles. These all follow the same general structure. Bellow are the function and enums used to control the various styles. For an in depth guide to how each style works see the getting started guide.
<script src="https://gist.github.com/emilsjolander/e7c7732b9465173335d2e019a6bc5941.js"></script>
### Layout
- `yg_includeInLayout` decides if we should include this view when calculating layout. Defaults to `YES`.
- `yg_intrinsicSize` returns the size of the view if no constraints were given. This is equivalent to calling `[view sizeThatFits:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX)]`.
- `yg_applyLayout` performs layout calculation and update the frames of the views in the hierarchy with the results.
- `yg_resolvedDirection` returns the resolved layout direction of this view. Either `YGDirectionRTL` or `YGDirectionLTR`.
<script src="https://gist.github.com/emilsjolander/437661e872c1f9106b728419d5ea49e9.js"></script>