ouds-ios-components-navigations

Files (1)

• SKILL.md

SKILL.md (first lines)

# OUDS Navigations components

> Prerequisite: load `ouds-ios-framework-usage` first for imports, themes and image rules
> (`OUDSImage`, `// swiftlint:disable:next accessibility_label_for_image`).

## Link

```swift
OUDSLink(text: "Text", size: .default) {}
OUDSLink(text: "Text", indicator: .previous, size: .default) {}
OUDSLink(text: "Text", image: OUDSImage(asset: Image("ic")), size: .default) {}
OUDSLink(text: "Text", image: OUDSImage(asset: Image("ic"), renderingMode: .original), size: .default) {} // raw image (not tinted)
```

---

## Tab Bar

> Never combine with `OUDSToolBarBottom` on the same screen.

```swift
// iOS 15–25
@State private var selectedTab = 0
OUDSTabBar(selectedTab: $selectedTab, count: 3) {
    SomeView().tabItem { Label("Tab 1", image: "ic_1") }.tag(0)
    OtherView().tabItem { Label("Tab 2", image: "ic_2") }.tag(1)
}

// iOS 26+
OUDSTabBar {
    SomeView().tabItem { Label("Tab 1", image: "ic_1") }
    OtherView().tabItem { Label("Tab 2", image: "ic_2") }
}
```

> Tab bar images: 26×26 pt. `OUDSTabBar(selected:count:content:)` (plain `Int`) is deprecated — use `selectedTab: Binding<Int>`.

---

## Toolbars

> Availability: iOS 15+, visionOS 1+. Not available on watchOS, tvOS, macOS.

**Setup (top toolbar):**
- Must be inside `NavigationStack`.
- Call `.oudsNavigationBarAppearance()` once on the root `NavigationStack`.
- On iOS ≤ 18: add `.accentColor(theme.colors.contentDefault)` on root view for the back chevron.
- `subtitle` rendered on iOS 26+ only; ignored when `hasLargeTitle: true`.
- `principalItem` (at most one item, center position): when set, `subtitle` is **never** displayed (whatever `hasLargeTitle` is —
  `.principal` only replaces the inline bar title, not `.navigationSubtitle()` on iOS 26+); `title` is displayed only if
  `hasLargeTitle: true` (shown below the bar, large mode — never inside the bar next to `principalItem`).

**Setup (bottom toolbar):**
- Never combine with `OUDSTabBar` on the same screen.
- `groupedItems` layout meaningful on iOS 26+ only.

```swift
// Top — minimal
NavigationStack {
    ContentView().toolBarTop("Title")
}

// Top — with items
NavigationStack {
    ContentView()
        .toolBarTop("Title",
            leadingItems: { OUDSToolBarItem(navigation: .back()) },
            principalItem: OUDSToolBarItem(icon: Image("ic_search"), accessibilityLabel: "Search") {},
            trailingItems: {
                OUDSToolBarItem(icon: Image("ic_settings"), accessibilityLabel: "Settings") {}
            })
}

// Top — principalItem + hasLargeTitle: title shown below the bar (large mode), subtitle never shown
ContentView()
    .toolBarTop("Title", hasLargeTitle: true, subtitle: "Never shown",
        principalItem: OUDSToolBarItem(icon: Image("ic_search"), accessibilityLabel: "Search") {})

// Top — principalItem without hasLargeTitle: neither title nor subtitle shown
ContentView()
    .toolBarTop("Title", principalItem: OUDSToolBarItem(icon: Image("ic_search"), accessibilityLabel: "Search") {})

// Top — large title + subtitle (subtitle iOS 26+ only)
ContentView().toolBarTop("Title", hasLargeTitle: true, subtitle: "Sub")

// Bottom — leading/trailing split
ContentView()
    .toolBarBottom(
        leadingItems: { OUDSToolBarItem(label: "Edit") {} },
        trailingItems: { OUDSToolBarItem(icon: Image("ic_share"), accessibilityLabel: "Share") {} })

// Bottom — grouped (iOS 26+ only)
ContentView()
    .toolBarBottom(groupedItems: {
        OUDSToolBarItem(label: "Save") {}
        OUDSToolBarItem(icon: Image("ic_delete"), accessibilityLabel: "Delete") {}
    })
```

**`OUDSToolBarItem` reference:**

```swift
OUDSToolBarItem(label: "Edit") {}                              // text action
OUDSToolBarItem(icon: Image("ic"), accessibilityLabel: "X") {} // icon action
OUDSToolBarItem(navigation: .back())                           // back — auto dismiss
OUDSToolBarItem(navigation: .back(label: "Cancel"))            // back with label (ignored iOS 26+)
OUDSToolBarItem(navigation: .back(label: "Back") { saveDraft() }) // back + custom action
OUDSToolBarItem(navigation: .close)                            // close — NO closure, auto dismiss

// Badge on icon (v2.0.0+) — icon actions only
OUDSToolBarItem(action: .icon(asset: Image("ic_bell"), accessibilityLabel: "Notif",
                              badgeType: .standard))
OUDSToolBarItem(action: .icon(asset: Image("ic_mail"), accessibilityLabel: "Mail",
                              badgeType: .number(count: 9)))

// Action style — iOS 26+ only
if #available(iOS 26, *) {
    OUDSToolBarItem(action: .label("Save", emphasized: false, accessibilityHint: nil) {},
                    style: .prominent)  // .default | .prominent | .tinted

From Orange-OpenSource/ouds-ios, MIT.

More from Orange-OpenSource/ouds-ios