X-Git-Url: https://git.r.bdr.sh/rbdr/patterns/blobdiff_plain/68ce43557c7bb7bffc33e3c3f161d3a93f89e200..90eb1b2137e0b80dc3af7e544c973971e45eab5a:/README.md diff --git a/README.md b/README.md index ab61c9f..512e2a0 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ SwiftUI tiling black and white patterns. -This project contains `Patterns`, which are built out of `Tiles` with a given +This project contains `PatternView`, which is built out of `Tiles` with a given `TileDesign`. It also includes a `TilePicker` that can be used to control the selected @@ -13,7 +13,7 @@ design. The `TileDesign` enum contains the following patterns (shown in the image from top left to bottom right) -![Image showing the included patterns] +![Image showing the included patterns](./doc/images/patterns.png) * `.grid` * `.dottedGrid` @@ -31,28 +31,33 @@ top left to bottom right) ## Usage -The `Pattern` view will tile the selected design in its frame. It has the +The `PatternView` view will tile the selected design in its frame. It has the following properties: -* `design: TileDesign`: **required, @Binding**, which design to tile the frame with. +* `design: Binding`: **required**, which design to use to tile the + frame. * `pixelSize: CGFloat`: **defaults to 2.0**, the size of a pixel in the tile. * `foregroundColor: Color`: **defaults to `Color.black`**, the foreground color. * `backgroundColor: Color`: **defaults to `Color.white`**, the background color. ``` -// Pattern using default settings -Pattern(design: .constant(TileDesign.shadowGrid)) +// PatternView using default settings +PatternView(design: .constant(TileDesign.shadowGrid)) -// Pattern using overrides -Pattern(design: $tileDesign, pixelSize: 4.0, foregroundColor: .pink, backgroundColor: .cyan) +// PatternView using overrides +PatternView(design: $tileDesign, pixelSize: 4.0, foregroundColor: .pink, backgroundColor: .cyan) ``` +### Screenshots of the Patterns + +![Screenshots of the patterns showing the different overrides](./doc/images/pattern_example.png) + ## Using the PatternPicker The pattern picker view is intended to be used when you want to allow users to change the design of the pattern. -* `selectedDesign: TileDesign`: **required, @Binding**, the current selected +* `selectedDesign: Binding`: **required**, the current selected tile design. * `selectedColor: Color`: **defaults to `Color.accentColor`**, the color of the border around the selected tile design. @@ -67,7 +72,7 @@ same effect as `Pattern` mentioned above ... -Pattern(design: $pattern) +PatternView(design: $pattern) .frame(width: 32.0).border(.black) .onTapGesture { shouldShowPatternPicker = !shouldShowPatternPicker; @@ -80,6 +85,10 @@ Pattern(design: $pattern) } ``` +### Screenshots of the Pattern Picker + +![Screenshots of the pattern picker showing the different overrides](./doc/images/pattern_picker_example.png) + ## Supported Platforms * macOS 12+ @@ -87,3 +96,13 @@ Pattern(design: $pattern) * tvOS ?+ * watchOS 8+ * catalyst 15+ + +## The Tile view + +If you'd like to do other things with the individual tiles, we also provide the +Tile view, which is just a single tile. + +The tiles support the same properties as `PatternView` with the exception that +`design` is a `TileDesign` and not a `Binding` + +![Screenshots of the tiles showing the different overrides](./doc/images/tile_example.png)