Label
System Styles
Use the snippet below to see all of the built-in styles
1Label {
2 Text("Pizza Party")
3} icon: {
4 Image(systemName: "party.popper")
5}
6.labelStyle(.automatic)
7
8Label {
9 Text("Pizza Party")
10} icon: {
11 Image(systemName: "party.popper")
12}
13.labelStyle(.titleOnly)
14
15Label {
16 Text("Pizza Party")
17} icon: {
18 Image(systemName: "party.popper")
19}
20.labelStyle(.iconOnly)
21
22Label {
23 Text("Pizza Party")
24} icon: {
25 Image(systemName: "party.popper")
26}
27.labelStyle(.titleAndIcon)
Custom Style
Create your style struct and have it conform to LabelStyle
. It is customary for all label styles to be named ...LabelStyle
. The Configuration
type contains .icon
and .title
for you to use as you wish to style the label.
1struct PartyNametagLabelStyle: LabelStyle {
2 func makeBody(configuration: Configuration) -> some View {
3 HStack {
4 configuration.icon
5
6 configuration.title
7
8 configuration.icon
9 .rotation3DEffect(.radians(.pi), axis: (x: 0, y: 1, z: 0))
10 }
11 .padding(10)
12 .overlay {
13 Capsule()
14 .stroke(lineWidth: 5)
15 }
16 }
17}
In order to use the nice .labelStyle(.partyNameTag)
syntax, we must extend the LabelStyle
protocol. Without this, we would have to use .labelStyle(PartyNameTagLabelStyle())
, which is now considered an old way of using styles.
1extension LabelStyle where Self == PartyNameTagLabelStyle {
2 static var partyNameTag: Self { .init() }
3}
See the label style in action by using the following code in your view.
1Label {
2 Text("Pizza Party")
3} icon: {
4 Image(systemName: "party.popper")
5}
6.labelStyle(.partyNameTag)
Explore
- Under what contexts does the automatic style change?
Xcode Version: 16.1 beta 3
Official Apple Documentation