# 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](/files/nKGH7aYlZv4himlVgMdX)

```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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/ios/swiftui/control/label/builtin-styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.