[SUI] Barra lateral (Sidebar)

#swift #ios #swiftui

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 "side bar" se puede separar las pestañas en secciones con TabSection, teniendo en cuenta que si quedan pestañas aisladas quedarán encima de todas las secciones.

Se puede configurar un encabezado al sidebar con tabViewSidebarHeader(content:) y un footer con tabViewSidebarFooter(content:). Además, puede haber un botón (y solo uno) en la parte inferior del side bar, que se puede agregar con tabViewSidebarBottomBar(content:).

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

A la hora de seleccionar un Tab se cerrará la barra lateral y aparecerá seleccionado en la barra superior (como si fuera tabBarOnly). Si este Tab estaba dentro de un TabSection, entonces aparecerá seleccionada la sección.

Al moverse entre Tabs de distintas secciones, cada sección conservará el estado del último Tab elegido.

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(content: {
      Label("Este es el header", systemImage: "gear")
    })
    .tabViewSidebarBottomBar(content: {
      Button("Acción 1") {
        newTrips += 1
      }
      Button("Acción 2 NO VISIBLE") {
        print("Hago algo")
      }
    })
    .tabViewSidebarFooter(content: {
      Label("Este es el footer", systemImage: "cloud")
    })
    .tabViewStyle(.sidebarAdaptable)
  }
}