Remove gists and fix iOS instructions
Summary: Remove gists in code blocks. This also made it easier to fix the iOS sample app instructions in the getting started. >Note: I also needed to update my gems as I was having problems running `bundle install`. The errors were around installing json v1.8.3. It was resolved by creating a new Gemfile.lock. 1. Build website and check changed pages (see attached Getting Started for an example) 2. Also check how it would look for mobile site (see attached index page) Verified that the code snippets matched previous snippets and styling acceptable.   Closes https://github.com/facebook/yoga/pull/500 Differential Revision: D4834356 Pulled By: emilsjolander fbshipit-source-id: f47dca4b7518822b195f0bd5076fbf852904372b
This commit is contained in:
Christine Abernathy
committed by
Facebook Github Bot
Facebook Github Bot
parent
586b57009a
commit
49e18738c3
@@ -11,14 +11,14 @@ GEM
|
||||
coffee-script (2.4.1)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.10.0)
|
||||
coffee-script-source (1.12.2)
|
||||
colorator (1.1.0)
|
||||
ethon (0.9.1)
|
||||
ethon (0.10.1)
|
||||
ffi (>= 1.3.0)
|
||||
execjs (2.7.0)
|
||||
faraday (0.9.2)
|
||||
faraday (0.12.0.1)
|
||||
multipart-post (>= 1.2, < 3)
|
||||
ffi (1.9.14)
|
||||
ffi (1.9.18)
|
||||
forwardable-extended (2.6.0)
|
||||
gemoji (2.1.0)
|
||||
github-pages (104)
|
||||
@@ -51,10 +51,10 @@ GEM
|
||||
octokit (~> 4.0)
|
||||
public_suffix (~> 1.4)
|
||||
typhoeus (~> 0.7)
|
||||
html-pipeline (2.4.2)
|
||||
html-pipeline (2.5.0)
|
||||
activesupport (>= 2)
|
||||
nokogiri (>= 1.4)
|
||||
i18n (0.7.0)
|
||||
i18n (0.8.1)
|
||||
jekyll (3.3.0)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
@@ -98,7 +98,7 @@ GEM
|
||||
gemoji (~> 2.0)
|
||||
html-pipeline (~> 2.2)
|
||||
jekyll (>= 3.0)
|
||||
json (1.8.3)
|
||||
json (1.8.6)
|
||||
kramdown (1.11.1)
|
||||
liquid (3.0.6)
|
||||
listen (3.0.6)
|
||||
@@ -107,33 +107,33 @@ GEM
|
||||
mercenary (0.3.6)
|
||||
mini_portile2 (2.1.0)
|
||||
minima (2.0.0)
|
||||
minitest (5.9.1)
|
||||
minitest (5.10.1)
|
||||
multipart-post (2.0.0)
|
||||
net-dns (0.8.0)
|
||||
nokogiri (1.6.8.1)
|
||||
nokogiri (1.7.1)
|
||||
mini_portile2 (~> 2.1.0)
|
||||
octokit (4.4.1)
|
||||
sawyer (~> 0.7.0, >= 0.5.3)
|
||||
octokit (4.6.2)
|
||||
sawyer (~> 0.8.0, >= 0.5.3)
|
||||
pathutil (0.14.0)
|
||||
forwardable-extended (~> 2.6)
|
||||
public_suffix (1.5.3)
|
||||
rb-fsevent (0.9.8)
|
||||
rb-inotify (0.9.7)
|
||||
rb-inotify (0.9.8)
|
||||
ffi (>= 0.5.0)
|
||||
rouge (1.11.1)
|
||||
safe_yaml (1.0.4)
|
||||
sass (3.4.22)
|
||||
sawyer (0.7.0)
|
||||
addressable (>= 2.3.5, < 2.5)
|
||||
faraday (~> 0.8, < 0.10)
|
||||
sass (3.4.23)
|
||||
sawyer (0.8.1)
|
||||
addressable (>= 2.3.5, < 2.6)
|
||||
faraday (~> 0.8, < 1.0)
|
||||
terminal-table (1.7.3)
|
||||
unicode-display_width (~> 1.1.1)
|
||||
thread_safe (0.3.5)
|
||||
thread_safe (0.3.6)
|
||||
typhoeus (0.8.0)
|
||||
ethon (>= 0.8.0)
|
||||
tzinfo (1.2.2)
|
||||
tzinfo (1.2.3)
|
||||
thread_safe (~> 0.1)
|
||||
unicode-display_width (1.1.1)
|
||||
unicode-display_width (1.1.3)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
@@ -142,4 +142,4 @@ DEPENDENCIES
|
||||
github-pages (~> 104)
|
||||
|
||||
BUNDLED WITH
|
||||
1.13.1
|
||||
1.14.6
|
||||
|
||||
@@ -6,15 +6,56 @@ permalink: /docs/api/android/
|
||||
---
|
||||
|
||||
To include the java bindings and `.so` libraries, add to your build:
|
||||
<script src="https://gist.github.com/rspencer01/e3cb51e789147b359d842aac6fa30f9f.js"></script>
|
||||
|
||||
There is an easy interface to Yoga called `YogaLayout`. This is a view group that lays out its children using Yoga. We recommend looking at the sample app for details on its usage. However, as an overview you can simply define XML layouts such as
|
||||
<script src="https://gist.github.com/rspencer01/c1964b98f0c60de7c49683a049ed0640.js"></script>
|
||||
```java
|
||||
compile 'com.facebook.yoga:yoga:1.2.0'
|
||||
```
|
||||
|
||||
There is an easy interface to Yoga called `YogaLayout`. This is a view group that lays out its children using Yoga. We recommend looking at the sample app for details on its usage. However, as an overview you can simply define XML layouts such as:
|
||||
|
||||
```xml
|
||||
<?xml version="1.0" encoding="utf-8" ?>
|
||||
<YogaLayout
|
||||
xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:yoga="http://schemas.android.com/apk/res-auto"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
yoga:align_items="stretch"
|
||||
>
|
||||
<YogaLayout
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="@drawable/sample_children_background"
|
||||
yoga:margin_horizontal="10dp"
|
||||
yoga:margin_top="5dp"
|
||||
yoga:flex_direction="row"
|
||||
yoga:align_items="center"
|
||||
>
|
||||
<ImageView
|
||||
android:layout_width="50dp"
|
||||
android:layout_height="50dp"
|
||||
android:src="@drawable/ic_launcher"
|
||||
yoga:flex="0"
|
||||
/>
|
||||
<TextView
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="wrap_content"
|
||||
android:text="@string/child_1_text"
|
||||
android:textColor="@color/children_text"
|
||||
yoga:flex="1"
|
||||
yoga:margin_start="8dp"
|
||||
/>
|
||||
</YogaLayout>
|
||||
</YogaLayout>
|
||||
```
|
||||
|
||||
Note that there are some caveats, such as requiring the custom `YogaLayoutViewFactory` in order to have tags `YogaLayout` instead of `com.facebook.samples.yoga.YogaLayout`.
|
||||
|
||||
To include this in your project, add to your build:
|
||||
<script src="https://gist.github.com/rspencer01/499a9e02185985bf3167f818d9c3398f.js"></script>
|
||||
|
||||
```java
|
||||
compile 'com.facebook.yoga.android:yoga-layout:1.2.0'
|
||||
```
|
||||
|
||||
## layout\_width and layout\_height
|
||||
|
||||
|
||||
@@ -10,7 +10,12 @@ permalink: /docs/api/c/
|
||||
|
||||
The following functions control the lifecycle of a `YGNodeRef`.
|
||||
|
||||
<script src="https://gist.github.com/emilsjolander/99e454d04df4765147f407bde131feca.js"></script>
|
||||
```c
|
||||
YGNodeRef YGNodeNew();
|
||||
void YGNodeReset(YGNodeRef node);
|
||||
void YGNodeFree(YGNodeRef node);
|
||||
void YGNodeFreeRecursive(YGNodeRef node);
|
||||
```
|
||||
|
||||
- `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.
|
||||
@@ -19,19 +24,167 @@ The following functions control the lifecycle of a `YGNodeRef`.
|
||||
|
||||
The following functions help manage the children of a node.
|
||||
|
||||
<script src="https://gist.github.com/emilsjolander/7e162314294087bb78817c064d345afb.js"></script>
|
||||
```c
|
||||
void YGNodeInsertChild(YGNodeRef node, YGNodeRef child, uint32_t index);
|
||||
void YGNodeRemoveChild(YGNodeRef node, YGNodeRef child);
|
||||
YGNodeRef YGNodeGetChild(YGNodeRef node, uint32_t index);
|
||||
uint32_t YGNodeChildCount(YGNodeRef node);
|
||||
```
|
||||
|
||||
### 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>
|
||||
```c
|
||||
typedef enum YGDirection {
|
||||
YGDirectionInherit,
|
||||
YGDirectionLTR,
|
||||
YGDirectionRTL,
|
||||
} YGDirection;
|
||||
|
||||
void YGNodeStyleSetDirection(YGNodeRef node, YGDirection direction);
|
||||
YGDirection YGNodeStyleGetDirection(YGNodeRef node);
|
||||
|
||||
typedef enum YGFlexDirection {
|
||||
YGFlexDirectionColumn,
|
||||
YGFlexDirectionColumnReverse,
|
||||
YGFlexDirectionRow,
|
||||
YGFlexDirectionRowReverse,
|
||||
} YGFlexDirection;
|
||||
|
||||
void YGNodeStyleSetFlexDirection(YGNodeRef node,
|
||||
YGFlexDirection flexDirection);
|
||||
YGFlexDirection YGNodeStyleGetFlexDirection(YGNodeRef node);
|
||||
|
||||
typedef enum YGJustify {
|
||||
YGJustifyFlexStart,
|
||||
YGJustifyCenter,
|
||||
YGJustifyFlexEnd,
|
||||
YGJustifySpaceBetween,
|
||||
YGJustifySpaceAround,
|
||||
} YGJustify;
|
||||
|
||||
void YGNodeStyleSetJustifyContent(YGNodeRef node,
|
||||
YGJustify justifyContent);
|
||||
YGJustify YGNodeStyleGetJustifyContent(YGNodeRef node);
|
||||
|
||||
typedef enum YGAlign {
|
||||
YGAlignAuto,
|
||||
YGAlignFlexStart,
|
||||
YGAlignCenter,
|
||||
YGAlignFlexEnd,
|
||||
YGAlignStretch,
|
||||
} YGAlign;
|
||||
|
||||
void YGNodeStyleSetAlignContent(YGNodeRef node, YGAlign alignContent);
|
||||
YGAlign YGNodeStyleGetAlignContent(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetAlignItems(YGNodeRef node, YGAlign alignItems);
|
||||
YGAlign YGNodeStyleGetAlignItems(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetAlignSelf(YGNodeRef node, YGAlign alignSelf);
|
||||
YGAlign YGNodeStyleGetAlignSelf(YGNodeRef node);
|
||||
|
||||
typedef enum YGPositionType {
|
||||
YGPositionTypeRelative,
|
||||
YGPositionTypeAbsolute,
|
||||
} YGPositionType;
|
||||
|
||||
void YGNodeStyleSetPositionType(YGNodeRef node,
|
||||
YGPositionType positionType);
|
||||
YGPositionType YGNodeStyleGetPositionType(YGNodeRef node);
|
||||
|
||||
typedef enum YGWrap {
|
||||
YGWrapNoWrap,
|
||||
YGWrapWrap,
|
||||
} YGWrap;
|
||||
|
||||
void YGNodeStyleSetFlexWrap(YGNodeRef node, YGWrap flexWrap);
|
||||
YGWrap YGNodeStyleGetFlexWrap(YGNodeRef node);
|
||||
|
||||
typedef enum YGOverflow {
|
||||
YGOverflowVisible,
|
||||
YGOverflowHidden,
|
||||
YGOverflowScroll,
|
||||
} YGOverflow;
|
||||
|
||||
void YGNodeStyleSetOverflow(YGNodeRef node, YGOverflow overflow);
|
||||
YGOverflow YGNodeStyleGetOverflow(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetFlex(YGNodeRef node, float flex);
|
||||
|
||||
void YGNodeStyleSetFlexGrow(YGNodeRef node, float flexGrow);
|
||||
float YGNodeStyleGetFlexGrow(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetFlexShrink(YGNodeRef node, float flexShrink);
|
||||
float YGNodeStyleGetFlexShrink(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetFlexBasis(YGNodeRef node, float flexBasis);
|
||||
float YGNodeStyleGetFlexBasis(YGNodeRef node);
|
||||
|
||||
typedef enum YGEdge {
|
||||
YGEdgeLeft,
|
||||
YGEdgeTop,
|
||||
YGEdgeRight,
|
||||
YGEdgeBottom,
|
||||
YGEdgeStart,
|
||||
YGEdgeEnd,
|
||||
YGEdgeHorizontal,
|
||||
YGEdgeVertical,
|
||||
YGEdgeAll,
|
||||
} YGEdge;
|
||||
|
||||
void YGNodeStyleSetPosition(YGNodeRef node, YGEdge edge, float position);
|
||||
float YGNodeStyleGetPosition(YGNodeRef node, YGEdge edge);
|
||||
|
||||
void YGNodeStyleSetMargin(YGNodeRef node, YGEdge edge, float margin);
|
||||
float YGNodeStyleGetMargin(YGNodeRef node, YGEdge edge);
|
||||
|
||||
void YGNodeStyleSetPadding(YGNodeRef node, YGEdge edge, float padding);
|
||||
float YGNodeStyleGetPadding(YGNodeRef node, YGEdge edge);
|
||||
|
||||
void YGNodeStyleSetBorder(YGNodeRef node, YGEdge edge, float border);
|
||||
float YGNodeStyleGetBorder(YGNodeRef node, YGEdge edge);
|
||||
|
||||
void YGNodeStyleSetWidth(YGNodeRef node, float width);
|
||||
float YGNodeStyleGetWidth(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetHeight(YGNodeRef node, float height);
|
||||
float YGNodeStyleGetHeight(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetMinWidth(YGNodeRef node, float minWidth);
|
||||
float YGNodeStyleGetMinWidth(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetMinHeight(YGNodeRef node, float minHeight);
|
||||
float YGNodeStyleGetMinHeight(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetMaxWidth(YGNodeRef node, float maxWidth);
|
||||
float YGNodeStyleGetMaxWidth(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetMaxHeight(YGNodeRef node, float maxHeight);
|
||||
float YGNodeStyleGetMaxHeight(YGNodeRef node);
|
||||
|
||||
void YGNodeStyleSetAspectRatio(YGNodeRef node, float aspectRatio);
|
||||
float YGNodeStyleGetAspectRatio(YGNodeRef node);
|
||||
```
|
||||
|
||||
### 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>
|
||||
```c
|
||||
void YGNodeCalculateLayout(YGNodeRef node,
|
||||
float availableWidth,
|
||||
float availableHeight,
|
||||
YGDirection parentDirection);
|
||||
float YGNodeLayoutGetLeft(YGNodeRef node);
|
||||
float YGNodeLayoutGetTop(YGNodeRef node);
|
||||
float YGNodeLayoutGetRight(YGNodeRef node);
|
||||
float YGNodeLayoutGetBottom(YGNodeRef node);
|
||||
float YGNodeLayoutGetWidth(YGNodeRef node);
|
||||
float YGNodeLayoutGetHeight(YGNodeRef node);
|
||||
YGDirection YGNodeLayoutGetDirection(YGNodeRef node);
|
||||
```
|
||||
|
||||
### Custom measurements
|
||||
|
||||
@@ -41,34 +194,103 @@ Certain nodes need the ability to measure themselves, the most common example is
|
||||
|
||||
> A measure function can only be attached to a leaf node in the hierarchy.
|
||||
|
||||
<script src="https://gist.github.com/emilsjolander/73f9118d8bd27f9cb3744c08f1e53a32.js"></script>
|
||||
```c
|
||||
typedef enum YGMeasureMode {
|
||||
YGMeasureModeUndefined,
|
||||
YGMeasureModeExactly,
|
||||
YGMeasureModeAtMost,
|
||||
} YGMeasureMode;
|
||||
|
||||
typedef struct YGSize {
|
||||
float width;
|
||||
float height;
|
||||
} YGSize;
|
||||
|
||||
typedef YGSize (*YGMeasureFunc)(YGNodeRef node,
|
||||
float width,
|
||||
YGMeasureMode widthMode,
|
||||
float height,
|
||||
YGMeasureMode heightMode);
|
||||
|
||||
void YGNodeSetMeasureFunc(YGNodeRef node, YGMeasureFunc measureFunc);
|
||||
YGMeasureFunc YGNodeGetMeasureFunc(YGNodeRef node);
|
||||
|
||||
void YGNodeMarkDirty(YGNodeRef node);
|
||||
bool YGNodeIsDirty(YGNodeRef node);
|
||||
```
|
||||
|
||||
### 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>
|
||||
```c
|
||||
void YGNodeSetContext(YGNodeRef node, void *context);
|
||||
void *YGNodeGetContext(YGNodeRef node);
|
||||
```
|
||||
|
||||
### 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>
|
||||
```c
|
||||
typedef enum YGLogLevel {
|
||||
YGLogLevelError,
|
||||
YGLogLevelWarn,
|
||||
YGLogLevelInfo,
|
||||
YGLogLevelDebug,
|
||||
YGLogLevelVerbose,
|
||||
} YGLogLevel;
|
||||
|
||||
typedef int (*YGLogger)(YGLogLevel level, char *format, va_list args);
|
||||
void YGSetLogger(YGLogger logger);
|
||||
void YGLog(YGLogLevel level, char *message, ...);
|
||||
```
|
||||
|
||||
### 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>
|
||||
```c
|
||||
typedef enum YGExperimentalFeature {
|
||||
// Current experiments
|
||||
} YGExperimentalFeature;
|
||||
|
||||
void YGSetExperimentalFeatureEnabled(YGExperimentalFeature feature,
|
||||
bool enabled);
|
||||
bool YGIsExperimentalFeatureEnabled(YGExperimentalFeature feature);
|
||||
```
|
||||
|
||||
### 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>
|
||||
```c
|
||||
typedef void *(*YGMalloc)(size_t size);
|
||||
typedef void *(*YGCalloc)(size_t count, size_t size);
|
||||
typedef void *(*YGRealloc)(void *ptr, size_t size);
|
||||
typedef void (*YGFree)(void *ptr);
|
||||
|
||||
void YGSetMemoryFuncs(YGMalloc cssMalloc,
|
||||
YGCalloc cssCalloc,
|
||||
YGRealloc cssRealloc,
|
||||
YGFree cssFree);
|
||||
```
|
||||
|
||||
### 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>
|
||||
```c
|
||||
typedef enum YGPrintOptions {
|
||||
YGPrintOptionsLayout = 1,
|
||||
YGPrintOptionsStyle = 2,
|
||||
YGPrintOptionsChildren = 4,
|
||||
} YGPrintOptions;
|
||||
|
||||
typedef void (*YGPrintFunc)(YGNodeRef node);
|
||||
|
||||
void YGNodeSetPrintFunc(YGNodeRef node, YGPrintFunc printFunc);
|
||||
YGPrintFunc YGNodeGetPrintFunc(YGNodeRef node);
|
||||
|
||||
void YGNodePrint(YGNodeRef node, YGPrintOptions options);
|
||||
```
|
||||
|
||||
@@ -10,25 +10,176 @@ permalink: /docs/api/csharp/
|
||||
|
||||
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>
|
||||
```csharp
|
||||
YogaNode();
|
||||
void Reset();
|
||||
|
||||
static YogaNode Create(
|
||||
YogaDirection? styleDirection = null,
|
||||
YogaFlexDirection? flexDirection = null,
|
||||
YogaJustify? justifyContent = null,
|
||||
YogaAlign? alignContent = null,
|
||||
YogaAlign? alignItems = null,
|
||||
YogaAlign? alignSelf = null,
|
||||
YogaPositionType? positionType = null,
|
||||
YogaWrap? wrap = null,
|
||||
YogaOverflow? overflow = null,
|
||||
float? flex = null,
|
||||
float? flexGrow = null,
|
||||
float? flexShrink = null,
|
||||
float? flexBasis = null,
|
||||
Spacing position = null,
|
||||
Spacing margin = null,
|
||||
Spacing padding = null,
|
||||
Spacing border = null,
|
||||
float? Width = null,
|
||||
float? Height = null,
|
||||
float? MaxWidth = null,
|
||||
float? MaxHeight = null,
|
||||
float? MinWidth = null,
|
||||
float? MinHeight = null);
|
||||
```
|
||||
|
||||
### Children
|
||||
|
||||
The following methods help manage the children of a node.
|
||||
|
||||
<script src="https://gist.github.com/emilsjolander/2b0ea738d3c24644fa98910b276620e4.js"></script>
|
||||
```csharp
|
||||
int Count { get };
|
||||
YogaNode this[int index] { get };
|
||||
void Insert(int index, YogaNode node);
|
||||
void RemoveAt(int index);
|
||||
void Clear();
|
||||
int IndexOf(YogaNode node);
|
||||
```
|
||||
|
||||
### 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>
|
||||
```csharp
|
||||
enum YogaDirection
|
||||
{
|
||||
Inherit,
|
||||
LTR,
|
||||
RTL,
|
||||
}
|
||||
|
||||
YogaDirection StyleDirection {get, set};
|
||||
|
||||
enum YogaFlexDirection
|
||||
{
|
||||
Column,
|
||||
ColumnReverse,
|
||||
Row,
|
||||
RowReverse,
|
||||
}
|
||||
|
||||
YogaFlexDirection FlexDirection {get, set};
|
||||
|
||||
enum YogaJustify
|
||||
{
|
||||
FlexStart,
|
||||
Center,
|
||||
FlexEnd,
|
||||
SpaceBetween,
|
||||
SpaceAround,
|
||||
}
|
||||
|
||||
YogaJustify JustifyContent {get, set};
|
||||
|
||||
enum YogaAlign
|
||||
{
|
||||
Auto,
|
||||
FlexStart,
|
||||
Center,
|
||||
FlexEnd,
|
||||
Stretch,
|
||||
}
|
||||
|
||||
YogaAlign AlignItems {get, set};
|
||||
YogaAlign AlignSelf {get, set};
|
||||
YogaAlign AlignContent {get, set};
|
||||
|
||||
enum YogaPositionType
|
||||
{
|
||||
Relative,
|
||||
Absolute,
|
||||
}
|
||||
|
||||
YogaPositionType PositionType {get, set};
|
||||
|
||||
enum YogaWrap
|
||||
{
|
||||
NoWrap,
|
||||
Wrap,
|
||||
}
|
||||
|
||||
YogaWrap Wrap {get, set};
|
||||
|
||||
enum YogaOverflow
|
||||
{
|
||||
Visible,
|
||||
Hidden,
|
||||
Scroll,
|
||||
}
|
||||
|
||||
YogaOverflow Overflow {get, set};
|
||||
|
||||
float Flex {set};
|
||||
float FlexGrow {get, set};
|
||||
float FlexShrink {get, set};
|
||||
float FlexBasis {get, set};
|
||||
|
||||
enum YogaEdge
|
||||
{
|
||||
Left,
|
||||
Top,
|
||||
Right,
|
||||
Bottom,
|
||||
Start,
|
||||
End,
|
||||
Horizontal,
|
||||
Vertical,
|
||||
All,
|
||||
}
|
||||
|
||||
float GetMargin(YogaEdge edge);
|
||||
void SetMargin(YogaEdge edge, float margin);
|
||||
|
||||
float GetPadding(YogaEdge edge);
|
||||
void SetPadding(YogaEdge edge, float padding);
|
||||
|
||||
float GetBorder(YogaEdge edge);
|
||||
void SetBorder(YogaEdge edge, float border);
|
||||
|
||||
float GetPosition(YogaEdge edge);
|
||||
void SetPosition(YogaEdge edge, float position);
|
||||
|
||||
float Width {get, set};
|
||||
float Height {get, set};
|
||||
|
||||
float MaxWidth {get, set};
|
||||
float MinWidth {get, set};
|
||||
|
||||
float MaxHeight {get, set};
|
||||
float MinHeight {get, set};
|
||||
|
||||
float AspectRatio {get, set};
|
||||
```
|
||||
|
||||
### 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>
|
||||
```csharp
|
||||
void CalculateLayout();
|
||||
float LayoutX {get};
|
||||
float LayoutY {get};
|
||||
float LayoutWidth {get};
|
||||
float LayoutHeight {get};
|
||||
YogaDirection LayoutDirection {get};
|
||||
```
|
||||
|
||||
### Custom measurements
|
||||
|
||||
@@ -38,16 +189,53 @@ Certain nodes need to ability to measure themselves, the most common example is
|
||||
|
||||
> A measure function can only be attached to a leaf node in the hierarchy.
|
||||
|
||||
<script src="https://gist.github.com/emilsjolander/57178307f515e5ea1ccfbedc05df429b.js"></script>
|
||||
```csharp
|
||||
enum YogaMeasureMode
|
||||
{
|
||||
Undefined,
|
||||
Exactly,
|
||||
AtMost,
|
||||
}
|
||||
|
||||
public delegate long MeasureFunction(
|
||||
YogaNode node,
|
||||
float width,
|
||||
YogaMeasureMode widthMode,
|
||||
float height,
|
||||
YogaMeasureMode heightMode);
|
||||
|
||||
class MeasureOutput
|
||||
{
|
||||
public static long Make(int width, int height);
|
||||
}
|
||||
|
||||
void SetMeasureFunction(MeasureFunction measureFunction);
|
||||
bool IsMeasureDefined();
|
||||
|
||||
bool IsDirty {get};
|
||||
void MarkDirty();
|
||||
```
|
||||
|
||||
### 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>
|
||||
```csharp
|
||||
object Data {get, set}
|
||||
```
|
||||
|
||||
### 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>
|
||||
```csharp
|
||||
enum YogaExperimentalFeature {
|
||||
// Current experiments
|
||||
}
|
||||
|
||||
static void setExperimentalFeatureEnabled(
|
||||
YogaExperimentalFeature feature,
|
||||
boolean enabled);
|
||||
static boolean isExperimentalFeatureEnabled(
|
||||
YogaExperimentalFeature feature);
|
||||
```
|
||||
|
||||
@@ -10,25 +10,166 @@ permalink: /docs/api/java/
|
||||
|
||||
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>
|
||||
```java
|
||||
YogaNode();
|
||||
void reset();
|
||||
```
|
||||
|
||||
### Children
|
||||
|
||||
The following methods help manage the children of a node.
|
||||
|
||||
<script src="https://gist.github.com/emilsjolander/5d1c64d8d3be7f7942435c4f5bec45a5.js"></script>
|
||||
```java
|
||||
int getChildCount();
|
||||
YogaNodeType getChildAt(int i);
|
||||
void addChildAt(YogaNodeType child, int i);
|
||||
YogaNodeType removeChildAt(int i);
|
||||
YogaNodeType getParent();
|
||||
int indexOf(YogaNodeType child);
|
||||
```
|
||||
|
||||
### 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>
|
||||
```java
|
||||
enum YogaDirection {
|
||||
INHERIT,
|
||||
LTR,
|
||||
RTL
|
||||
}
|
||||
|
||||
YogaDirection getStyleDirection();
|
||||
void setDirection(YogaDirection direction);
|
||||
|
||||
enum YogaFlexDirection {
|
||||
COLUMN,
|
||||
COLUMN_REVERSE,
|
||||
ROW,
|
||||
ROW_REVERSE
|
||||
}
|
||||
|
||||
YogaFlexDirection getFlexDirection();
|
||||
void setFlexDirection(YogaFlexDirection flexDirection);
|
||||
|
||||
enum YogaJustify {
|
||||
FLEX_START,
|
||||
CENTER,
|
||||
FLEX_END,
|
||||
SPACE_BETWEEN,
|
||||
SPACE_AROUND
|
||||
}
|
||||
|
||||
YogaJustify getJustifyContent();
|
||||
void setJustifyContent(YogaJustify justifyContent);
|
||||
|
||||
enum YogaAlign {
|
||||
AUTO,
|
||||
FLEX_START,
|
||||
CENTER,
|
||||
FLEX_END,
|
||||
STRETCH
|
||||
}
|
||||
|
||||
YogaAlign getAlignItems();
|
||||
void setAlignItems(YogaAlign alignItems);
|
||||
|
||||
YogaAlign getAlignSelf();
|
||||
void setAlignSelf(YogaAlign alignSelf);
|
||||
|
||||
YogaAlign getAlignContent();
|
||||
void setAlignContent(YogaAlign alignContent);
|
||||
|
||||
enum YogaPositionType {
|
||||
RELATIVE,
|
||||
ABSOLUTE
|
||||
}
|
||||
|
||||
YogaPositionType getPositionType();
|
||||
void setPositionType(YogaPositionType positionType);
|
||||
|
||||
enum YogaWrap {
|
||||
NO_WRAP,
|
||||
WRAP
|
||||
}
|
||||
|
||||
void setWrap(YogaWrap flexWrap);
|
||||
|
||||
enum YogaOverflow {
|
||||
VISIBLE,
|
||||
HIDDEN,
|
||||
SCROLL
|
||||
}
|
||||
|
||||
YogaOverflow getOverflow();
|
||||
void setOverflow(YogaOverflow overflow);
|
||||
|
||||
void setFlex(float flex);
|
||||
float getFlexGrow();
|
||||
void setFlexGrow(float flexGrow);
|
||||
float getFlexShrink();
|
||||
void setFlexShrink(float flexShrink);
|
||||
float getFlexBasis();
|
||||
void setFlexBasis(float flexBasis);
|
||||
|
||||
enum YogaEdge {
|
||||
LEFT,
|
||||
TOP,
|
||||
RIGHT,
|
||||
BOTTOM,
|
||||
START,
|
||||
END,
|
||||
HORIZONTAL,
|
||||
VERTICAL,
|
||||
ALL
|
||||
}
|
||||
|
||||
float getMargin(YogaEdge edge);
|
||||
void setMargin(YogaEdge edge, float margin);
|
||||
|
||||
float getPadding(YogaEdge edge);
|
||||
void setPadding(YogaEdge edge, float padding);
|
||||
|
||||
float getBorder(YogaEdge edge);
|
||||
void setBorder(YogaEdge edge, float border);
|
||||
|
||||
float getPosition(YogaEdge edge);
|
||||
void setPosition(YogaEdge edge, float position);
|
||||
|
||||
float getWidth();
|
||||
void setWidth(float width);
|
||||
|
||||
float getHeight();
|
||||
void setHeight(float height);
|
||||
|
||||
float getMaxWidth();
|
||||
void setMaxWidth(float maxWidth);
|
||||
|
||||
float getMinWidth();
|
||||
void setMinWidth(float minWidth);
|
||||
|
||||
float getMaxHeight();
|
||||
void setMaxHeight(float maxHeight);
|
||||
|
||||
float getMinHeight();
|
||||
void setMinHeight(float minHeight);
|
||||
|
||||
float getAspectRatio();
|
||||
void setAspectRatio(float aspectRatio);
|
||||
```
|
||||
|
||||
### 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>
|
||||
```java
|
||||
void calculateLayout();
|
||||
float getLayoutX();
|
||||
float getLayoutY();
|
||||
float getLayoutWidth();
|
||||
float getLayoutHeight();
|
||||
YogaDirection getLayoutDirection();
|
||||
```
|
||||
|
||||
### Custom measurements
|
||||
|
||||
@@ -38,22 +179,74 @@ Certain nodes need to ability to measure themselves, the most common example is
|
||||
|
||||
> A measure function can only be attached to a leaf node in the hierarchy.
|
||||
|
||||
<script src="https://gist.github.com/emilsjolander/70fd958b87647abbba604956709a9026.js"></script>
|
||||
```java
|
||||
enum YogaMeasureMode {
|
||||
UNDEFINED,
|
||||
EXACTLY,
|
||||
AT_MOST
|
||||
}
|
||||
|
||||
interface YogaMeasureFunction {
|
||||
long measure(
|
||||
YogaNodeAPI node,
|
||||
float width,
|
||||
YogaMeasureMode widthMode,
|
||||
float height,
|
||||
YogaMeasureMode heightMode);
|
||||
}
|
||||
|
||||
class YogaMeasureOutput {
|
||||
static long make(int width, int height);
|
||||
}
|
||||
|
||||
void setMeasureFunction(YogaMeasureFunction measureFunction);
|
||||
boolean isMeasureDefined();
|
||||
|
||||
boolean isDirty();
|
||||
void dirty();
|
||||
```
|
||||
|
||||
### 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>
|
||||
```java
|
||||
void setData(Object data);
|
||||
Object getData();
|
||||
```
|
||||
|
||||
### 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>
|
||||
```java
|
||||
enum YogaLogLevel {
|
||||
ERROR,
|
||||
WARN,
|
||||
INFO,
|
||||
DEBUG,
|
||||
VERBOSE
|
||||
}
|
||||
|
||||
interface YogaLogger {
|
||||
void log(YogaLogLevel level, String message);
|
||||
}
|
||||
|
||||
void setLogger(YogaLogger logger);
|
||||
```
|
||||
|
||||
### 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>
|
||||
```java
|
||||
enum YogaExperimentalFeature {
|
||||
// Current experiments
|
||||
}
|
||||
|
||||
static void setExperimentalFeatureEnabled(
|
||||
YogaExperimentalFeature feature,
|
||||
boolean enabled);
|
||||
static boolean isExperimentalFeatureEnabled(
|
||||
YogaExperimentalFeature feature);
|
||||
```
|
||||
|
||||
@@ -19,13 +19,22 @@ For now we recommend including Yoga as a [git submodule](https://git-scm.com/doc
|
||||
|
||||
Yoga ships with an [iOS example](https://github.com/facebook/yoga/tree/master/YogaKit/YogaKitSample). To get it running:
|
||||
|
||||
<script src="https://gist.github.com/emilsjolander/903b16185b24c957acc4cd250c6e73d9.js"></script>
|
||||
```sh
|
||||
$ git clone https://github.com/facebook/yoga.git
|
||||
$ cd open yoga/YogaKit/YogaKitSample/
|
||||
$ pod install
|
||||
$ open YogaKitSample.xcworkspace
|
||||
```
|
||||
|
||||
#### Android
|
||||
|
||||
Yoga ships with an [Android example too](https://github.com/facebook/yoga/tree/master/android/sample). To get it running on an attached device (or emulator):
|
||||
|
||||
<script src="https://gist.github.com/rspencer01/a512f7cd24055c948675be15d48eba78.js"></script>
|
||||
```sh
|
||||
$ git clone https://github.com/facebook/yoga.git
|
||||
$ cd yoga
|
||||
$ buck install -r android/sample
|
||||
```
|
||||
|
||||
Actually, this is more than just an example, and more a layout system for Android using Yoga in general (see `YogaLayout`). For more information see the [Android API section](/yoga/docs/api/android).
|
||||
|
||||
@@ -35,4 +44,15 @@ Yoga uses [Buck](https://buckbuild.com/) as its build system. Buck is not requir
|
||||
|
||||
If you are using Buck all you need to do is reference the language bindings you want to use in your `BUCK` file.
|
||||
|
||||
<script src="https://gist.github.com/emilsjolander/895b4ec79425882b8d4676b6545d6943.js"></script>
|
||||
```sh
|
||||
deps = [
|
||||
# C
|
||||
'//path/to/submodule/yoga:yoga',
|
||||
|
||||
# Java
|
||||
'//path/to/submodule/yoga/java:jni',
|
||||
|
||||
# Objective-C
|
||||
'//path/to/submodule/yoga/YogaKit:YogaKit',
|
||||
]
|
||||
```
|
||||
|
||||
@@ -15,7 +15,23 @@ Yoga aims to be compatible with Flexbox according to the [w3 specification](http
|
||||
|
||||
Yoga has chosen to change the default values of some properties to better fit mobile layout use cases. The following CSS block describes the differences in default values from the [Flexbox w3 specification](https://www.w3.org/TR/css3-flexbox).
|
||||
|
||||
<script src="https://gist.github.com/emilsjolander/f9b3981cab44c51afa9ac446b8fdb60c.js"></script>
|
||||
```css
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
flex-shrink: 0;
|
||||
align-content: flex-start;
|
||||
|
||||
border-width: 0px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
min-width: 0px;
|
||||
}
|
||||
```
|
||||
|
||||
We have set up a [JSFiddle](https://jsfiddle.net/emilsjolander/jckmwztt/) so you can see these default values in action.
|
||||
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
|
||||
|
||||
.rougeHighlight { background-color: $code-bg; color: #93a1a1 }
|
||||
.rougeHighlight { background-color: $code-bg; color: #000 }
|
||||
.rougeHighlight .c { color: #586e75 } /* Comment */
|
||||
.rougeHighlight .err { color: #93a1a1 } /* Error */
|
||||
.rougeHighlight .g { color: #93a1a1 } /* Generic */
|
||||
.rougeHighlight .k { color: #859900 } /* Keyword */
|
||||
.rougeHighlight .l { color: #93a1a1 } /* Literal */
|
||||
.rougeHighlight .n { color: #93a1a1 } /* Name */
|
||||
.rougeHighlight .n { color: #795da3 } /* Name */
|
||||
.rougeHighlight .o { color: #859900 } /* Operator */
|
||||
.rougeHighlight .x { color: #cb4b16 } /* Other */
|
||||
.rougeHighlight .p { color: #93a1a1 } /* Punctuation */
|
||||
.rougeHighlight .p { color: #000000 } /* Punctuation */
|
||||
.rougeHighlight .cm { color: #586e75 } /* Comment.Multiline */
|
||||
.rougeHighlight .cp { color: #859900 } /* Comment.Preproc */
|
||||
.rougeHighlight .c1 { color: #72c02c; } /* Comment.Single */
|
||||
@@ -20,7 +20,7 @@
|
||||
.rougeHighlight .gh { color: #cb4b16 } /* Generic.Heading */
|
||||
.rougeHighlight .gi { color: #859900 } /* Generic.Inserted */
|
||||
.rougeHighlight .go { color: #93a1a1 } /* Generic.Output */
|
||||
.rougeHighlight .gp { color: #93a1a1 } /* Generic.Prompt */
|
||||
.rougeHighlight .gp { color: #000000 } /* Generic.Prompt */
|
||||
.rougeHighlight .gs { color: #93a1a1; font-weight: bold } /* Generic.Strong */
|
||||
.rougeHighlight .gu { color: #cb4b16 } /* Generic.Subheading */
|
||||
.rougeHighlight .gt { color: #93a1a1 } /* Generic.Traceback */
|
||||
@@ -41,11 +41,11 @@
|
||||
.rougeHighlight .ni { color: #cb4b16 } /* Name.Entity */
|
||||
.rougeHighlight .ne { color: #cb4b16 } /* Name.Exception */
|
||||
.rougeHighlight .nf { color: #268bd2 } /* Name.Function */
|
||||
.rougeHighlight .nl { color: #93a1a1 } /* Name.Label */
|
||||
.rougeHighlight .nl { color: #0086b3 } /* Name.Label */
|
||||
.rougeHighlight .nn { color: #93a1a1 } /* Name.Namespace */
|
||||
.rougeHighlight .nx { color: #93a1a1 } /* Name.Other */
|
||||
.rougeHighlight .py { color: #93a1a1 } /* Name.Property */
|
||||
.rougeHighlight .nt { color: #268bd2 } /* Name.Tag */
|
||||
.rougeHighlight .nt { color: #63a35c } /* Name.Tag */
|
||||
.rougeHighlight .nv { color: #268bd2 } /* Name.Variable */
|
||||
.rougeHighlight .ow { color: #859900 } /* Operator.Word */
|
||||
.rougeHighlight .w { color: #93a1a1 } /* Text.Whitespace */
|
||||
@@ -72,11 +72,12 @@
|
||||
|
||||
.highlighter-rouge {
|
||||
color: darken(#72c02c, 8%);
|
||||
font: 800 12px/1.5em Hack, monospace;
|
||||
font: 500 12px/1.8em "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
max-width: 100%;
|
||||
|
||||
.rougeHighlight {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ccc;
|
||||
margin: 20px 0;
|
||||
padding: 0px;
|
||||
overflow-x: scroll;
|
||||
@@ -97,8 +98,9 @@
|
||||
flex: 1 1;
|
||||
|
||||
&.gutter {
|
||||
border-right: 1px solid lighten($code-bg, 10%);
|
||||
color: lighten($code-bg, 15%);
|
||||
border-right: 1px solid darken($code-bg, 10%);
|
||||
color: darken($code-bg, 25%);
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
max-width: 40px;
|
||||
padding-right: 10px;
|
||||
|
||||
@@ -86,7 +86,7 @@ $sidenav-overlay: lighten($sidenav, 10%);
|
||||
$sidenav-active: darken($sidenav, 10%);
|
||||
{% endif %}
|
||||
|
||||
$code-bg: #002b36;
|
||||
$code-bg: #ffffff;
|
||||
|
||||
|
||||
$header-height: 34px;
|
||||
|
||||
128
docs/index.md
128
docs/index.md
@@ -13,8 +13,28 @@ id: home
|
||||
<div class="yoga" style="background-color: #303846; flex-grow: 1; height: 25px; align-self: center;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blockContent gistsample">
|
||||
<script src="https://gist.github.com/emilsjolander/40685eadad702e0227374f3e33daaa12.js"></script>
|
||||
<div class="blockContent">
|
||||
<div markdown="1" style="width: 700px; max-width: 100%;">
|
||||
```c
|
||||
YGNodeRef root = YGNodeNew();
|
||||
YGNodeStyleSetWidth(root, 500);
|
||||
YGNodeStyleSetHeight(root, 120);
|
||||
YGNodeStyleSetFlexDirection(root, YGFlexDirectionRow);
|
||||
YGNodeStyleSetPadding(root, YGEdgeAll, 20);
|
||||
|
||||
YGNodeRef image = YGNodeNew();
|
||||
YGNodeStyleSetWidth(image, 80);
|
||||
YGNodeStyleSetMargin(image, YGEdgeEnd, 20);
|
||||
|
||||
YGNodeRef text = YGNodeNew();
|
||||
YGNodeStyleSetHeight(text, 25);
|
||||
YGNodeStyleSetAlignSelf(text, YGAlignCenter);
|
||||
YGNodeStyleSetFlexGrow(text, 1);
|
||||
|
||||
YGNodeInsertChild(root, image, 0);
|
||||
YGNodeInsertChild(root, text, 1);
|
||||
```
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -28,8 +48,28 @@ id: home
|
||||
<div class="yoga" style="background-color: #303846; height: 25px; width: 100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blockContent gistsample">
|
||||
<script src="https://gist.github.com/dshahidehpour/a426c443a1e02c5432b22b09c457ede0.js"></script>
|
||||
<div class="blockContent">
|
||||
<div markdown="1" style="width: 700px; max-width: 100%;">
|
||||
```objc
|
||||
UIView *root = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 500, 300)];
|
||||
[root configureLayoutWithBlock:^void(YGLayout *layout) {
|
||||
layout.isEnabled = YES;
|
||||
layout.alignItems = YGAlignCenter;
|
||||
layout.justifyContent = YGJustifyContentCenter;
|
||||
layout.padding = 20.0f;
|
||||
}];
|
||||
|
||||
UIImageView *image = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 150, 150)];
|
||||
[image configureLayoutWithBlock:^void(YGLayout *layout) {
|
||||
layout.isEnabled = YES;
|
||||
layout.marginBottom = 20.0f;
|
||||
}];
|
||||
[root addSubview:image];
|
||||
|
||||
UILabel *text = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 25, 100)];
|
||||
[root addSubview:text];
|
||||
```
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,8 +83,31 @@ id: home
|
||||
<div class="yoga" style="background-color: #97dccf; width: 50px; height: 50px; position: absolute; right: 20px; top: 20px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blockContent gistsample">
|
||||
<script src="https://gist.github.com/emilsjolander/f7b9b5dc2b97577bab2f1e6e1bf80b62.js"></script>
|
||||
<div class="blockContent">
|
||||
<div markdown="1" style="width: 700px; max-width: 100%;">
|
||||
```java
|
||||
YogaNode root = new YogaNode();
|
||||
root.setWidth(500);
|
||||
root.setHeight(300);
|
||||
root.setAlignItems(CENTER);
|
||||
root.setJustifyContent(CENTER);
|
||||
root.setPadding(ALL, 20);
|
||||
|
||||
YogaNode text = new YogaNode();
|
||||
text.setWidth(200);
|
||||
text.setHeight(25);
|
||||
|
||||
YogaNode image = new YogaNode();
|
||||
image.setWidth(50);
|
||||
image.setHeight(50);
|
||||
image.setPositionType(ABSOLUTE);
|
||||
image.setPosition(END, 20);
|
||||
image.setPosition(TOP, 20);
|
||||
|
||||
root.addChildAt(text, 0);
|
||||
root.addChildAt(image, 1);
|
||||
```
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -58,8 +121,26 @@ id: home
|
||||
<div class="yoga" style="background-color: #303846; margin: 20px; height: 25px; width: 300px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blockContent gistsample">
|
||||
<script src="https://gist.github.com/emilsjolander/29b91608b66d56d3df81f53101ad9d8b.js"></script>
|
||||
<div class="blockContent">
|
||||
<div markdown="1" style="width: 700px; max-width: 100%;">
|
||||
```csharp
|
||||
YogaNode root = YogaNode.Create(
|
||||
width: 500,
|
||||
height: 300,
|
||||
);
|
||||
|
||||
YogaNode image = YogaNode.Create(flexGrow: 1);
|
||||
|
||||
YogaNode text = YogaNode.Create(
|
||||
width: 300,
|
||||
height: 25,
|
||||
margin: new Spacing(left: 20, top: 20, right: 20, bottom: 20),
|
||||
);
|
||||
|
||||
root.Insert(image, 0);
|
||||
root.Insert(text, 1);
|
||||
```
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -76,8 +157,35 @@ id: home
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blockContent gistsample">
|
||||
<script src="https://gist.github.com/rspencer01/0b3e467a58ab56a23f60579ea193189f.js"></script>
|
||||
<div class="blockContent">
|
||||
<div markdown="1" style="width: 700px; max-width: 100%;">
|
||||
```xml
|
||||
<YogaLayout
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
yoga:justify_content="stretch">
|
||||
<ImageView
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
yoga:flex="1"/>
|
||||
<VirtualYogaLayout
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
yoga:padding_all="20px"
|
||||
yoga:flex_direction="row"
|
||||
yoga:align_items="center">
|
||||
<ImageView
|
||||
android:layout_width="50dp"
|
||||
android:layout_height="50dp"/>
|
||||
<TextView
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
yoga:flex="1"
|
||||
yoga:margin_start="20px"/>
|
||||
</VirtualYogaLayout>
|
||||
</YogaLayout>
|
||||
```
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user