# TabView

{% tabs %}
{% tab title="💾 程式" %}
📗 參考：Swift Playgrounds ([About Me](https://developer.apple.com/tutorials/sample-apps/aboutme#introduction))

```swift
struct ContentView: View {
    var body: some View {
        
        // ⭐️ 1. TabView container
        TabView {

            // ⭐️ 2. subview with .tabItem()
            HomeView().tabItem {
                Label("Home", systemImage: "person")
            }

            // other tabs ...
        }
    }
}
```

{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="danger" %}

* The [`tabItem`](https://developer.apple.com/documentation/swiftui/view/tabitem\(_:\)) modifier only accepts [`Label`](https://developer.apple.com/documentation/SwiftUI/Label), [`Text`](https://developer.apple.com/documentation/SwiftUI/Text), and [`Image`](https://developer.apple.com/documentation/SwiftUI/Image) views. 
* Including <mark style="color:orange;">**any other type**</mark> of view, such as [`Button`](https://developer.apple.com/documentation/SwiftUI/Button), results in an <mark style="color:red;">**empty**</mark> tab item.
  {% endhint %}
  {% endtab %}

{% tab title="📗 參考" %}

* [ ] Swift Playgrounds ([About Me](https://developer.apple.com/tutorials/sample-apps/aboutme#introduction))
* [ ] [Building an Accessible Custom Tab Bar](https://www.basbroek.nl/custom-tab-bar-accessibility)
* [ ] ChatGPT ⟩ [Tabs control](https://chatgpt.com/share/6789e467-1500-800e-9841-e3524adfa186)&#x20;
  {% endtab %}

{% tab title="📘 手冊" %}

* Developer ⟩ Tutorials ⟩ [About Me](https://developer.apple.com/tutorials/sample-apps/aboutme) (multiple tab views)
* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩&#x20;
  * [Presentation Containers](https://developer.apple.com/documentation/swiftui/presentation-containers) ⟩ [TabView](https://developer.apple.com/documentation/swiftui/tabview)
  * View ⟩ [Auxiliary View Modifiers](https://developer.apple.com/documentation/swiftui/view-auxiliary-views) ⟩ [tabItem(\_:)](https://developer.apple.com/documentation/swiftui/view/tabitem\(_:\))
    {% endtab %}

{% tab title="👥 相關" %}

* [label](https://lochiwei.gitbook.io/ios/swiftui/control/label "mention") is used as tab label.
  {% endtab %}
  {% endtabs %}