# Label

[SwiftUI](..) ⟩ [Controls]() ⟩

{% tabs %}
{% tab title="🔴 主題" %}
* [builtin-styles](label/builtin-styles "mention")
* [custom-styles](label/builtin-styles/custom-styles "mention")
{% endtab %}

{% tab title="💈範例" %}
![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2FBNvYGuddsl8VwytMZObn%2Flabels.png?alt=media\&token=dc5fc0de-775b-43c9-a927-a84c009c0a41)

```swift
struct ContentView: View {
    
    // view body
    var body: some View {
        VStack {
            favLabel
            bondLabel
            weatherLabels
        }
    }
    
    // favorites label
    var favLabel: some View {
        Label {
            Text("Favorites")
                .bold()
                .foregroundColor(.green)    // ⭐️ title color
        } icon: {
            Image(systemName: "heart")
                .symbolVariant(.fill)
                .foregroundColor(.pink)     // ⭐️ icon color
        }
    }
    
    // james bond label
    var bondLabel: some View {
        Label {
            // ⭐️ multiple texts
            Text("James Bond")
                .font(.body)
                .foregroundColor(.primary)
            Text("Mr.")
                .font(.subheadline)
                .foregroundColor(.secondary)
        } icon: {
            // ⭐️ custom icon
            Circle()
                .fill(Color.orange)
                .frame(width: 44, height: 44, alignment: .center)
                .overlay(Text("JB"))
        }
    }
    
    var weatherLabels: some View {
        HStack {
            Label("Rain", systemImage: "cloud.rain")
                .foregroundColor(.cyan)
            Label("Snow", systemImage: "snow")
            Label("Sun", systemImage: "sun.max")
                .foregroundColor(.yellow)
        }
        .labelStyle(.iconOnly)    // ⭐️ icon only
    }
}
```
{% endtab %}

{% tab title="🔸 定義" %}
```swift
struct Label<Title: View, Icon: View>
```
{% endtab %}

{% tab title="📗 參考" %}
* [ ] Paul ⟩ [How to show text and an icon side by side using Label](https://www.hackingwithswift.com/quick-start/swiftui/how-to-show-text-and-an-icon-side-by-side-using-label)
* [ ] Simple Swfit Guide ⟩ [SwiftUI Label Tutorial](https://www.simpleswiftguide.com/swiftui-label-tutorial-how-to-create-and-use-label-in-swiftui/)
* [ ] Sarun ⟩
  * [ ] [How to change the color of SF Symbols](https://sarunw.com/posts/how-to-change-color-of-sf-symbols/)
  * [ ] [SwiftUI Label: A standard way to label user interface items](https://sarunw.com/posts/swiftui-label-a-standard-way-to-label-user-interface-items/) ⭐️
  *
* [ ] FIVE STARS ⟩ [SwiftUI's Label](https://www.fivestars.blog/articles/label/) - with custom LabelStyle ⭐️&#x20;
{% endtab %}

{% tab title="📘 手冊" %}
* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩ [Views and Controls](https://developer.apple.com/documentation/swiftui/views-and-controls) ⟩ [Label](https://developer.apple.com/documentation/swiftui/label) ⟩&#x20;
  * [LabelStyle](https://developer.apple.com/documentation/swiftui/labelstyle) (<mark style="color:red;">**protocol**</mark>)
  * [.labelStyle(\_:)](https://developer.apple.com/documentation/swiftui/view/labelstyle\(_:\))
{% endtab %}

{% tab title="👥 相關" %}
* [button](button "mention")
* [toggle](toggle "mention")
* uses [sf-symbols](image/sf-symbols "mention").
* used by [tabview](../container/presentation/tabview "mention") as tab labels.
{% endtab %}

{% tab title="🗣 討論" %}
* [difference between accent, foreground and tint color?](https://stackoverflow.com/questions/68398048/swiftui-difference-between-accent-foreground-and-tint-color)
{% endtab %}
{% endtabs %}
