]> git.r.bdr.sh - rbdr/patterns/blob - README.md
d6cd0b8e52ba3d1b04d0361637ca52811d2ad68b
[rbdr/patterns] / README.md
1 # Patterns
2
3 SwiftUI tiling black and white patterns.
4
5 This project contains `Patterns`, which are built out of `Tiles` with a given
6 `TileDesign`.
7
8 It also includes a `TilePicker` that can be used to control the selected
9 design.
10
11 ## Available Tile Designs
12
13 The `TileDesign` enum contains the following patterns (shown in the image from
14 top left to bottom right)
15
16 ![Image showing the included patterns](./doc/images/patterns.png)
17
18 * `.grid`
19 * `.dottedGrid`
20 * `.stitch`
21 * `.curvedTile`
22 * `.brick`
23 * `.tile`
24 * `.shadowGrid`
25 * `.circles`
26 * `.trees`
27 * `.shingles`
28 * `.wicker`
29 * `.rhombus`
30 * `.balls`
31
32 ## Usage
33
34 The `Pattern` view will tile the selected design in its frame. It has the
35 following properties:
36
37 * `design: Binding<TileDesign>`: **required**, which design to use to tile the
38 frame.
39 * `pixelSize: CGFloat`: **defaults to 2.0**, the size of a pixel in the tile.
40 * `foregroundColor: Color`: **defaults to `Color.black`**, the foreground color.
41 * `backgroundColor: Color`: **defaults to `Color.white`**, the background color.
42
43 ```
44 // Pattern using default settings
45 Pattern(design: .constant(TileDesign.shadowGrid))
46
47 // Pattern using overrides
48 Pattern(design: $tileDesign, pixelSize: 4.0, foregroundColor: .pink, backgroundColor: .cyan)
49 ```
50
51 ### Screenshots of the Patterns
52
53 ![Screenshots of the patterns showing the different overrides](./doc/images/pattern_example.png)
54
55 ## Using the PatternPicker
56
57 The pattern picker view is intended to be used when you want to allow users to
58 change the design of the pattern.
59
60 * `selectedDesign: Binding<TileDesign>`: **required**, the current selected
61 tile design.
62 * `selectedColor: Color`: **defaults to `Color.accentColor`**, the color of the
63 border around the selected tile design.
64
65 It also has `pixelSize`, `foregroundColor`, and `backgroundColor` with the
66 same effect as `Pattern` mentioned above
67
68
69 ```
70 @State var design: TileDesign = .brick
71 @State var shouldShowPatternPicker = false
72
73 ...
74
75 Pattern(design: $pattern)
76 .frame(width: 32.0).border(.black)
77 .onTapGesture {
78 shouldShowPatternPicker = !shouldShowPatternPicker;
79 }
80 .popover(isPresented: $shouldShowPatternPicker) {
81 PatternPicker(selectedDesign: $design)
82 }
83 .onChange(of: pattern) { _ in
84 shouldShowPatternPicker = false;
85 }
86 ```
87
88 ### Screenshots of the Pattern Picker
89
90 ![Screenshots of the pattern picker showing the different overrides](./doc/images/pattern_picker_example.png)
91
92 ## Supported Platforms
93
94 * macOS 12+
95 * iOS 15+
96 * tvOS ?+
97 * watchOS 8+
98 * catalyst 15+
99
100 ## The Tile view
101
102 If you'd like to do other things with the individual tiles, we also provide the
103 Tile view, which is just a single tile.
104
105 The tiles support the same properties as `Pattern` with the exception that
106 `design` is a `TileDesign` and not a `Binding<TileDesign>`
107
108 ![Screenshots of the tiles showing the different overrides](./doc/images/tile_example.png)