> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/control/label/builtin-styles.md).

# Label Styles

[SwiftUI](/ios/swiftui.md) ⟩ [Controls](/ios/swiftui/control.md) ⟩ [Label](/ios/swiftui/control/label.md) ⟩ 

{% 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="👥 相關" %}

* [Button Styles](/ios/swiftui/control/button/styles.md)
* [Toggle Styles](/ios/swiftui/control/toggle/toggle-styles.md)
  {% endtab %}
  {% endtabs %}