[SUI] Barra lateral (Sidebar)

Source: Dev.to

Descripción

En iPadOS y macOS se pueden presentar las pestañas en una barra lateral modificando el TabView con tabViewStyle(_:), usando el valor sidebarAdaptable.

Dentro del sidebar se pueden separar las pestañas en secciones con TabSection. Si quedan pestañas aisladas, estas aparecerán encima de todas las secciones.

Se puede configurar un encabezado al sidebar con tabViewSidebarHeader(content:) y un pie de página con tabViewSidebarFooter(content:). Además, puede haber un único botón en la parte inferior del sidebar, que se agrega con tabViewSidebarBottomBar(content:).

Al usar TabContent.badge(_:), el número aparecerá al lado derecho del nombre de la pestaña.

Cuando se selecciona un Tab, la barra lateral se cierra y el tab queda seleccionado en la barra superior (como si se usara tabBarOnly). Si el Tab estaba dentro de un TabSection, también se seleccionará la sección correspondiente.

Al cambiar entre Tabs de distintas secciones, cada sección conserva el estado del último Tab elegido.

Ejemplo de código

enum TabFeature {
    case home, remove, trips, account, send
}

struct ContentView: View {

    @State private var selectedTab = TabFeature.home
    @State private var newTrips = 2

    var body: some View {
        TabView(selection: $selectedTab) {
            TabSection("Sección con nombre largo 1") {
                Tab("Tab 1", systemImage: "house", value: TabFeature.home) {
                    Text("Contenido Tab 1")
                        .background(Color.blue.opacity(0.7))
                }
                Tab("Tab 2", systemImage: "trash", value: TabFeature.remove) {
                    Text("Contenido Tab 2")
                        .background(Color.red.opacity(0.7))
                }
            }
            TabSection("Sección 2") {
                Tab("Tab 3", systemImage: "airplane", value: TabFeature.trips) {
                    Text("Contenido Tab 3")
                        .background(Color.blue.opacity(0.7))
                        .onAppear {
                            newTrips = 0
                        }
                }
                .badge(newTrips)

                Tab("Tab 4", systemImage: "person", value: TabFeature.account) {
                    Text("Contenido Tab 4")
                        .background(Color.red.opacity(0.7))
                }
            }

            Tab("Tab 6", systemImage: "message", value: TabFeature.send) {
                Text("Contenido Tab 5")
                    .background(Color.red.opacity(0.7))
            }
        }
        .tabViewSidebarHeader {
            Label("Este es el header", systemImage: "gear")
        }
        .tabViewSidebarBottomBar {
            Button("Acción 1") {
                newTrips += 1
            }
            Button("Acción 2 NO VISIBLE") {
                print("Hago algo")
            }
        }
        .tabViewSidebarFooter {
            Label("Este es el footer", systemImage: "cloud")
        }
        .tabViewStyle(.sidebarAdaptable)
    }
}

Imágenes

Bibliografía

• Gauchat, J. D. (2024). SwiftUI for Masterminds: How to take advantage of Swift and SwiftUI to create insanely great apps for iPhones, iPads, and Macs (5ª ed.). John D Gauchat.