Label Styles

內建樣式由 labelStyle(_:)設定：

automatic(預設) : 根據所在的位置，自動決定要用哪一種。
titleOnly: 只有文字。
iconOnly: 只有圖示。
titleAndIcon: 文字、圖示都有。

📗 參考：Sarun ⟩ SwiftUI Label: A standard way to label user interface items

struct ContentView: View {
    
    // label
    let favLabel = Label("Favorites", systemImage: "heart")
    
    var body: some View {
        TabView {
            NavigationView {
                VStack {
                    
                    // ⭐ standalone label: title & icon
                    favLabel
                    
                    // ⭐ button: title & icon (with accent color)
                    Button {} label: { 
                        favLabel
                            .padding(.horizontal, 12)
                            .padding(.vertical, 6)
                            .background(Color.pink)
                            .cornerRadius(12)
                    }
                    
                    // ⭐ toggle: title & icon
                    Toggle(isOn: .constant(true)) { favLabel }
                    
                    // ⭐ slider: no label
                    Slider(value: .constant(5), in: 0...10) { favLabel }
                    
                }
                .padding()
                .toolbar {
                    // ⭐ toolbar item: icon only
                    ToolbarItem(placement: .primaryAction) {
                        Button { } label: { favLabel }
                    }
                }
            }.tabItem { 
                // ⭐ tab item: title & icon (filled with accent color)
                //    rendered vertically when in portrait orientation
                favLabel
            }
            
            VStack {
                Text("Hello World")
            }.tabItem { Label("Hello", systemImage: "folder") }
        }
    }
}

PreviousLabel NextLabel ⟩ custom styles

Last updated 2 years ago

struct ContentView: View { // label let favLabel = Label("Favorites", systemImage: "heart") var body: some View { TabView { NavigationView { VStack { // ⭐ standalone label: title & icon favLabel // ⭐ button: title & icon (with accent color) Button {} label: { favLabel .padding(.horizontal, 12) .padding(.vertical, 6) .background(Color.pink) .cornerRadius(12) } // ⭐ toggle: title & icon Toggle(isOn: .constant(true)) { favLabel } // ⭐ slider: no label Slider(value: .constant(5), in: 0...10) { favLabel } } .padding() .toolbar { // ⭐ toolbar item: icon only ToolbarItem(placement: .primaryAction) { Button { } label: { favLabel } } } }.tabItem { // ⭐ tab item: title & icon (filled with accent color) // rendered vertically when in portrait orientation favLabel } VStack { Text("Hello World") }.tabItem { Label("Hello", systemImage: "folder") } } } }