You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+29-6Lines changed: 29 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -123,8 +123,12 @@ In the example above, replace YourPillType with your custom pill type and yourIt
123
123
124
124
PillPickerView offers a range of customization options to tailor the appearance of the pills to your app's design. You can customize the font, colors, animation, size, and other visual aspects of the pills by using the available modifier functions.
125
125
126
+
The PillPickerView includes a wrapping mechanism that automatically adjusts the layout of pills to fit within the available space. If the pills exceed the horizontal width of the container, the view wraps the excess pills to a new line. This makes it easy to present a large number of pills without worrying about truncation.
127
+
126
128
You can customize the appearance of the pills by chaining the available modifier functions on the PillPickerView. For example:
127
129
130
+
<br>
131
+
128
132
```swift
129
133
PillPickerView(
130
134
items: yourItemList,
@@ -137,6 +141,22 @@ PillPickerView(
137
141
138
142
<br>
139
143
144
+
To switch between the underlying stack style for the content. Choosing `.noWrap` will invariably cause any text inside the pills to be truncated depending on length, as it will automatically be fitted inside the view and not wrap to a new line. Choosing `.wrap` will let the pills be dynamically placed an move in the PillPickerView.
145
+
146
+
```swift
147
+
.pillStackStyle(.noWrap) // Prevents pills from wrapping to a new line and being dynamic
148
+
.pillStackStyle(.wrap) // Default value. Allows pills to move in container
149
+
```
150
+
151
+
<br>
152
+
153
+
To modify the vertical or horizontal spacing in the PillPickerView
154
+
155
+
```swift
156
+
.pillViewVerticalSpacing(10)
157
+
.pillViewHorizontalSpacing(5)
158
+
```
159
+
140
160
To change the font of the pills
141
161
142
162
```swift
@@ -145,6 +165,15 @@ To change the font of the pills
145
165
146
166
<br>
147
167
168
+
To change the icon used by each pill when it is 'selected'.
169
+
I advise you to choose something that indicates that the pill will no longer be selected if this icon is pressed, as this is the intended behavior.
170
+
171
+
```swift
172
+
.pillSelectedIcon(Image(systemName: "xmark"))
173
+
```
174
+
175
+
<br>
176
+
148
177
To change the background color of a not selected and selected pill, respectively
149
178
150
179
```swift
@@ -194,9 +223,3 @@ Padding can also be applied
194
223
```swift
195
224
.pillPadding(10)
196
225
```
197
-
198
-
<br>
199
-
200
-
## Note:
201
-
202
-
The PillPickerView includes a wrapping mechanism that automatically adjusts the layout of pills to fit within the available space. If the pills exceed the horizontal width of the container, the view wraps the excess pills to a new line. This makes it easy to present a large number of pills without worrying about truncation.
0 commit comments