diff options
| author | Ruben Beltran del Rio <ruben@unlimited.pizza> | 2023-04-26 17:10:19 +0200 |
|---|---|---|
| committer | Ruben Beltran del Rio <ruben@unlimited.pizza> | 2023-04-26 17:10:19 +0200 |
| commit | 1418fe49617f5d35b14b19fe0ead15fcc43526c8 (patch) | |
| tree | fde73648adb4999d58af0e86de5af266872c4257 /README.md | |
| parent | 8b0b5b394e5eca8538956fecbaa70ca66fdde24b (diff) | |
Add readme, update API
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 80 |
1 files changed, 79 insertions, 1 deletions
@@ -1,3 +1,81 @@ # Patterns -SwiftUI tiling black and white patterns +SwiftUI tiling black and white patterns. + +This project contains `Patterns`, which are built out of `Tiles` with a given +`TileDesign`. + +It also includes a `TilePicker` that can be used to control the selected +design. + +## Available Tile Designs + +The `TileDesign` enum contains the following patterns (shown in the image from +top left to bottom right) + +![Image showing the included patterns] + +* `.grid` +* `.dottedGrid` +* `.stitch` +* `.curvedTile` +* `.brick` +* `.tile` +* `.shadowGrid` +* `.circles` +* `.trees` +* `.shingles` +* `.wicker` +* `.rhombus` +* `.balls` + +## Usage + +The `Pattern` 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. +* `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)) + +// Pattern using overrides +Pattern(design: $tileDesign, pixelSize: 4.0, foregroundColor: .pink, backgroundColor: .cyan) +``` + +## 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 + tile design. +* `selectedColor: Color`: **defaults to `Color.accentColor`**, the color of the + border around the selected tile design. + +It also has `pixelSize`, `foregroundColor`, and `backgroundColor` with the +same effect as `Pattern` mentioned above + + +``` +@State var design: TileDesign = .brick +@State var shouldShowPatternPicker = false + +... + +Pattern(design: $pattern) + .frame(width: 32.0).border(.black) + .onTapGesture { + shouldShowPatternPicker = !shouldShowPatternPicker; + } + .popover(isPresented: $shouldShowPatternPicker) { + PatternPicker(selectedDesign: $design) + } + .onChange(of: pattern) { _ in + shouldShowPatternPicker = false; + } +``` |