add documentation about JS library usage. fixes #733
Summary: Adds an example of how to use yoga from JavaScript to the documentation pages. Reviewed By: priteshrnandgaonkar Differential Revision: D7354390 fbshipit-source-id: 0dbc08e5341c06b621acd99bfb9ce7e789b67a45
This commit is contained in:
committed by
Facebook Github Bot
parent
79281049f2
commit
9785975f77
@@ -18,10 +18,45 @@ dependencies {
|
||||
|
||||
### Javascript
|
||||
|
||||
The JavaScript bindings for Yoga can be used from node.js and within the browser.
|
||||
When using Yoga from node.js the native library is used, in browesers a pure JS
|
||||
version is used (corss-compiled using [emscripten](http://kripken.github.io/emscripten-site/)).
|
||||
|
||||
```
|
||||
$> yarn add yoga-layout
|
||||
```
|
||||
|
||||
This is an example on how to use Yoga in JavaScript, for a full API reference,
|
||||
have a look at the [flow-type definitions](https://github.com/facebook/yoga/blob/master/javascript/sources/entry-common.js#L123).
|
||||
|
||||
```js
|
||||
import yoga, {Node} from 'yoga-layout';
|
||||
|
||||
const root = Node.create();
|
||||
root.setWidth(500);
|
||||
root.setHeight(300);
|
||||
root.setJustifyContent(yoga.JUSTIFY_CENTER);
|
||||
|
||||
const node1 = Node.create();
|
||||
node1.setWidth(100);
|
||||
node1.setHeight(100);
|
||||
|
||||
const node2 = Node.create();
|
||||
node2.setWidth(100);
|
||||
node2.setHeight(100);
|
||||
|
||||
root.insertChild(node1, 0);
|
||||
root.insertChild(node2, 1);
|
||||
|
||||
root.calculateLayout(500, 300, yoga.DIRECTION_LTR);
|
||||
console.log(root.getComputedLayout());
|
||||
// {left: 0, top: 0, width: 500, height: 300}
|
||||
console.log(node1.getComputedLayout());
|
||||
// {left: 150, top: 0, width: 100, height: 100}
|
||||
console.log(node2.getComputedLayout());
|
||||
// {left: 250, top: 0, width: 100, height: 100}
|
||||
```
|
||||
|
||||
### iOS
|
||||
|
||||
```
|
||||
|
Reference in New Issue
Block a user