Skip to content

Commit

Permalink
Updated docs
Browse files Browse the repository at this point in the history
  • Loading branch information
tevelee committed Jun 27, 2024
1 parent cfb7d9b commit 7b9d20d
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 7 deletions.
68 changes: 61 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,6 @@
Introduces `HFlow` and `VFlow` similar to `HStack` and `VStack`.
Arranges views in lines and cuts new lines accordingly (if elements don't fit the bounding space).

- [x] Spacing (separate item spacing and line spacing)
- [x] Alignment
- [x] Conforms to `Layout` protocol
- [x] Supports Right-to-Left layout direction
- [x] Sample SwiftUI View to tweak parameters

## HFlow

```swift
Expand Down Expand Up @@ -58,6 +52,8 @@ VFlow {

## Alignment

Supports the same alignments as HStack and VStack do.

```swift
HFlow(alignment: .top) {
ForEach(colors, id: \.description) { color in
Expand All @@ -73,6 +69,8 @@ HFlow(alignment: .top) {

## Spacing

Customize spacing between rows and items separately.

```swift
HFlow(itemSpacing: 4, rowSpacing: 20) {
ForEach(colors, id: \.description) { color in
Expand All @@ -86,8 +84,64 @@ HFlow(itemSpacing: 4, rowSpacing: 20) {

![VFlow](Resources/hflow-spacing.png)

## Justified

Justify by stretching items, the spaces between them, or both.

```swift
HFlow(justification: .stretchItems) {
ForEach(colors + colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(height: 50)
.frame(minWidth: 35)
}
}
.frame(width: 300)
```

![HFlow](Resources/hflow-justified.png)

---

Distribute items evenly by minimizing the empty spaces left in each row.
Implements the Knuth-Plass line breaking algorithm.

```swift
HFlow(distributeItemsEvenly: true) {
ForEach(colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(width: 65, height: 50)
}
}
.frame(width: 300, alignment: .leading)
```

![HFlow](Resources/hflow-distributed.png)

---

Distribute and justify for visually pleasing UI.

```swift
HFlow(justification: .stretchItems, distributeItemsEvenly: true) {
ForEach(colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(height: 50)
.frame(minWidth: 60)
}
}
.frame(width: 300)
```

![HFlow](Resources/hflow-justified-and-distributed.png)

## RTL

Adapts to left-to-right and right-to-left environments too.

```swift
HFlow {
ForEach(colors, id: \.description) { color in
Expand All @@ -100,4 +154,4 @@ HFlow {
.environment(\.layoutDirection, .rightToLeft)
```

![VFlow](Resources/hflow-rtl.png)
![VFlow](Resources/hflow-rtl.png)
Binary file added Resources/hflow-distributed.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Resources/hflow-justified-and-distributed.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Resources/hflow-justified.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 7b9d20d

Please sign in to comment.