Bars - tool

Tool bars with Orange branding

Page Summary

Specifications references

Accessibility

Please follow accessibility criteria for development

Variants

A tool bar allows users to do specific actions regarding the entire page. It is placed at the bottom of the screen. It can display 2 to 5 icon controls or 2 to 3 label entries.

With label items

tool bar labels light tool bar labels dark

A tool bar can display 2 to 3 label entries.

Example with 3 label entries in toolBar :


let description1 = ODSToolbarLabelDesription(text: "Action 1") { }
let description2 = ODSToolbarLabelDesription(text: "Action 2") { }
let description3 = ODSToolbarLabelDesription(text: "Action 3") { }

let labelItems = ODSToolbarLabeledItems(description1: description1,
                                        description2: description2,
                                        description3: description3)
NavigationView {
    ContentView()
    .navigationBarTitle("", displayMode: .inline)
    .navigationBarHidden(true)
    .odsToolBar(items: labelItems)
}

//  To remove navigation bar, use following modifiers
//  .navigationBarHidden(true)

With icon items

tool bar icons light tool bar icons dark

A tool bar can display 2 to 5 icon controls


let description1 = ODSToolbarIconDesription(systemName: "plus") { }
let description2 = ODSToolbarIconDesription(systemName: "square.and.arrow.up") { }
let description3 = ODSToolbarIconDesription(systemName: "square.and.pencil") { }
let description4 = ODSToolbarIconDesription(systemName: "folder") { }
let description5 = ODSToolbarIconDesription(systemName: "trash") { }

let iconItems = ODSToolbarIconsItems(description1: description1,
                                     description2: description2,
                                     description3: description3,
                                     description4: description4,
                                     description5: description5)
NavigationView {
    ContentView()
    .navigationBarTitle("", displayMode: .inline)
    .navigationBarHidden(true)
    .odsToolBar(items: iconItems)
}

//  To remove navigation bar, use following modifiers
//  .navigationBarHidden(true)

Remarks

As toolbar colors depends on theme, don’t forget to add it to enviroment and call the view modifier .toolBarColors(for:) to apply colors provided by the theme.

Two solutions:

  • Directy on the root view
let theme = YourTheme()

ContentViewWithToolBar()
.environment(\.theme, theme)
.toolBarColors(for: theme)
  • Or using ODSThemeableView view as a root view:
let theme = YourTheme()

ODSThemeableView(theme: yourTheme) {
    ContentViewWithToolBar()
}