Skip to content

Commit

Permalink
Updated README
Browse files Browse the repository at this point in the history
  • Loading branch information
tevelee committed Aug 16, 2024
1 parent a5d5d4d commit cec0768
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 7 deletions.
29 changes: 22 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ struct Colors: View {
ForEach(colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(width: Double.random(in: 40...60), height: 50)
.frame(width: .random(in: 40...60), height: 50)
}
}
.frame(maxWidth: 300)
Expand All @@ -42,7 +42,7 @@ VFlow {
ForEach(colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(width: 50, height: Double.random(in: 40...60))
.frame(width: 50, height: .random(in: 40...60))
}
}
.frame(maxHeight: 300)
Expand All @@ -59,13 +59,28 @@ HFlow(alignment: .top) {
ForEach(colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(width: 50, height: Double.random(in: 40...60))
.frame(width: 50, height: .random(in: 40...60))
}
}
.frame(maxWidth: 300)
```

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

Additionally, alignment can be specified on both axes. Ideal for tags.

```swift
HFlow(horizontalAlignment: .center, verticalAlignment: .top) {
ForEach(colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(width: .random(in: 30...60), height: 30)
}
}
.frame(maxWidth: 300)
```

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

## Spacing

Expand All @@ -82,7 +97,7 @@ HFlow(itemSpacing: 4, rowSpacing: 20) {
.frame(maxWidth: 300)
```

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

## Justified

Expand Down Expand Up @@ -147,11 +162,11 @@ HFlow {
ForEach(colors, id: \.description) { color in
RoundedRectangle(cornerRadius: 10)
.fill(color.gradient)
.frame(width: Double.random(in: 40...60), height: 50)
.frame(width: .random(in: 40...60), height: 50)
}
}
.frame(maxWidth: 300)
.environment(\.layoutDirection, .rightToLeft)
```

![VFlow](Resources/hflow-rtl.png)
![HFlow](Resources/hflow-rtl.png)
Binary file added Resources/hflow-center.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 cec0768

Please sign in to comment.