palette
A picker style that presents the options as a row of compact elements.
Declaration
static var palette: PalettePickerStyle { get }Mentioned in
Discussion
For each option’s label, use one symbol per item, if you add more than 6 options, the picker scrolls horizontally on iOS.
The following example creates a palette picker:
enum Reaction: Identifiable, CaseIterable {
case thumbsup, thumbsdown, heart, questionMark
var id: Self { self }
}
@State private var selection: Reaction? = .none
var body: some View {
Menu("Reactions") {
Picker("Palette", selection: $selection) {
Label("Thumbs up", systemImage: "hand.thumbsup")
.tag(Reaction.thumbsup)
Label("Thumbs down", systemImage: "hand.thumbsdown")
.tag(Reaction.thumbsdown)
Label("Like", systemImage: "heart")
.tag(Reaction.heart)
Label("Question mark", systemImage: "questionmark")
.tag(Reaction.questionMark)
}
.pickerStyle(.palette)
Button("Reply...") { ... }
}
}Palette pickers will display the selection of untinted SF Symbols or template images by applying the system tint. For tinted SF Symbols, a stroke is outlined around the symbol upon selection. If you would like to supply a particular image (or SF Symbol) to signify selection, we suggest using custom. This deactivates any system selection behavior, allowing the provided image to solely indicate selection instead.
The following example creates a palette picker that disables the system selection behaviour:
Menu {
Picker("Palettes", selection: $selection) {
ForEach(palettes) { palette in
Label(palette.title, systemImage: selection == palette ?
"circle.dashed.inset.filled" : "circle.fill")
.tint(palette.tint)
.tag(palette)
}
}
.pickerStyle(.palette)
.paletteSelectionEffect(.custom)
} label: {
...
}If a specific SF Symbol variant is preferable instead, use symbolVariant(_:):
Menu {
Picker("Flags", selection: $selectedFlag) {
ForEach(flags) { flag in
Label(flag.title, systemImage: "flag")
.tint(flag.color)
.tag(flag)
}
}
.pickerStyle(.palette)
.paletteSelectionEffect(.symbolVariant(.slash))
} label: {
...
}To apply this style to a picker, or to a view that contains pickers, use the pickerStyle(_:) modifier.