Label ⟩ custom styles

SwiftUI ⟩ Controls ⟩ Label ⟩

💈範例

👉 SwiftUI ⟩ Label

struct ContentView: View {
    @State private var isOn = true
    var body: some View {
        Toggle(isOn: $isOn){
            Label("Hello", systemImage: "person")
                // 🌀 .redBorder
                .labelStyle(.redBorder)    
        }
    }
}

🌀 .redBorder

// ⭐️ custom label style
struct RedBorderedLabelStyle: LabelStyle {
    // ⭐️ protocol's only requirement
    func makeBody(configuration: Configuration) -> some View {
        Label(configuration)
            .padding(4)
            .border(Color.red)
    }
}

// 🌀 .redBorder
//                   ╭───────── ⭐️ important ──────────╮
extension LabelStyle where Self == RedBorderedLabelStyle {
    // extension supports "computed properties" (no "stored properties")
    public static var redBorder: RedBorderedLabelStyle {
        RedBorderedLabelStyle()
    } 
}

📗 參考

• Sarun ⟩ SwiftUI Label: A standard way to label user interface items ⭐️ (💈範例)

📘 手冊

• SwiftUI ⟩ Views and Controls ⟩ Label ⟩

  • LabelStyle (protocol) ⟩ makeBody(configuration:)
  • .labelStyle(_:)

👥 相關

• Button ⟩ custom styles