Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix formatting.
Browse files Browse the repository at this point in the history
colinrtwhite committed Dec 13, 2023
1 parent 0a3c59e commit 9d46d2d
Showing 1 changed file with 28 additions and 24 deletions.
52 changes: 28 additions & 24 deletions redwood-layout-schema/README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
# Redwood Layout

Redwood's layout system provides common layout primitives to support arranging and laying out widgets. It provides widgets for:
Redwood's layout system provides common layout primitives to support arranging and laying out
widgets. It provides widgets for:

- `Row`: Lays wigets out along the X axis (horizontally).
- `Column`: Lays widgets out along the Y axis (vertically).
- `Box`: Lays widgets out along the Z axis (on top of eachother).
- `Spacer`: Adds space between widgets.

Internally the layout system uses a common layout engine written in Kotlin Multiplatform to support consistent rendering across platforms. The system provides widget bindings for for Android Views (`redwood-layout-view`), iOS UiKit (`redwood-layout-uiview`), and Compose UI (`redwood-layout-composeui`).
Internally the layout system uses a common layout engine written in Kotlin Multiplatform to support
consistent rendering across platforms. The system provides widget bindings for for Android
Views (`redwood-layout-view`), iOS UiKit (`redwood-layout-uiview`), and Compose
UI (`redwood-layout-composeui`).

## Widgets

@@ -17,9 +21,9 @@ Lays widgets out along the X axis (horizontally).

```kotlin
Row {
Text("One")
Text("Two")
Text("Three")
Text("One")
Text("Two")
Text("Three")
}
```

@@ -33,9 +37,9 @@ Lays widgets out along the Y axis (vertically).

```kotlin
Column {
Text("One")
Text("Two")
Text("Three")
Text("One")
Text("Two")
Text("Three")
}
```

@@ -49,18 +53,18 @@ Lays widgets out along the Z axis (on top of eachother).

```kotlin
Box {
Color(
color = Red,
modifier = Modifier.size(24.dp),
)
Color(
color = Green,
modifier = Modifier.size(16.dp),
)
Color(
color = Blue,
modifier = Modifier.size(8.dp),
)
Color(
color = Red,
modifier = Modifier.size(24.dp),
)
Color(
color = Green,
modifier = Modifier.size(16.dp),
)
Color(
color = Blue,
modifier = Modifier.size(8.dp),
)
}
```

@@ -74,12 +78,12 @@ Adds space between widgets.

```kotlin
Column {
Text("Top")
Spacer(height = 24.dp)
Text("Bottom")
Text("Top")
Spacer(height = 24.dp)
Text("Bottom")
}
```

<p style="text-align: center;">
<img src="docs_images/spacer1.png">
<img src="docs_images/spacer1.png">
</p>

0 comments on commit 9d46d2d

Please sign in to comment.