# Label Styles

[SwiftUI](../..) ⟩ [Controls](..) ⟩ [Label]() ⟩&#x20;

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
內建樣式由 [`labelStyle(_:)`](https://developer.apple.com/documentation/swiftui/view/labelstyle\(_:\))`設定：`

1. [`automatic`](https://developer.apple.com/documentation/swiftui/labelstyle/automatic)(預設) : 根據所在的位置，自動決定要用哪一種。
2. [`titleOnly`](https://developer.apple.com/documentation/swiftui/labelstyle/titleonly): 只有文字。
3. [`iconOnly`](https://developer.apple.com/documentation/swiftui/labelstyle/icononly): 只有圖示。
4. [`titleAndIcon`](https://developer.apple.com/documentation/swiftui/labelstyle/titleandicon): 文字、圖示都有。
{% endhint %}
{% endtab %}

{% tab title="💾 程式" %}
📗 參考：Sarun ⟩ [SwiftUI Label: A standard way to label user interface items](https://sarunw.com/posts/swiftui-label-a-standard-way-to-label-user-interface-items/)

![automatic label](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2FMFNIYyLHBfqs7KHjBCX7%2Fautomatic%20label.png?alt=media\&token=d700e620-7aca-4bcc-9708-66ddf1940b6f)

```swift
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") }
        }
    }
}
```
{% endtab %}

{% tab title="📗 參考" %}
* [ ] Sarun ⟩ [SwiftUI Label: A standard way to label user interface items](https://sarunw.com/posts/swiftui-label-a-standard-way-to-label-user-interface-items/) ⭐️
{% endtab %}

{% tab title="👥 相關" %}
* [styles](../button/styles "mention")
* [toggle-styles](../toggle/toggle-styles "mention")
{% endtab %}
{% endtabs %}
