X-Git-Url: https://git.r.bdr.sh/rbdr/patterns/blobdiff_plain/575722f458b382e5fd847087c748439dfc88e802..1418fe49617f5d35b14b19fe0ead15fcc43526c8:/README.md diff --git a/README.md b/README.md index bafd25c..803bd2f 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,81 @@ # Patterns -A description of this package. +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; + } +```