toolbar#

The toolbar property allows you to populate a view’s navigation or toolbar area with various items, mirroring the functionality of SwiftUI's toolbar view modifier. By setting toolbar on a component, you can place items in the navigation bar or bottom toolbar, and specify their semantic roles.

Overview#

The toolbar property accepts a ToolBarProps object. Each key within ToolBarProps corresponds to a specific toolbar placement or action type. The values you provide should be either a single VirtualNode or an array of VirtualNode elements, which represent your custom UI items.

In SwiftUI (for reference):

1// SwiftUI code example
2YourView()
3    .toolbar {
4        ToolbarItem(placement: .confirmationAction) {
5            Button("Save") {
6                // Handle save
7            }
8        }
9    }

In Scripting (TypeScript/TSX):

1<NavigationStack>
2  <List
3    toolbar={{
4      confirmationAction: <Button title="Save" action={() => handleSave()} />,
5      cancellationAction: <Button title="Cancel" action={() => handleCancel()} />,
6      topBarLeading: [
7        <Button title="Edit" action={() => handleEdit()} />,
8        <Button title="Refresh" action={() => handleRefresh()} />
9      ]
10    }}
11  >
12    {/* Your main content here */}
13  </List>
14</NavigationStack>

Toolbar Placements#

The following keys can be used within ToolBarProps to specify where and how an item is placed:

• automatic: Automatically determines placement based on context and platform.
• bottomBar: Places the item in a bottom toolbar.
• cancellationAction: Represents a cancellation action in a modal interface.
• confirmationAction: Represents a confirmation action in a modal interface (e.g., "Save").
• destructiveAction: Represents an action that performs a destructive task (e.g., "Delete").
• keyboard: Places the item in a toolbar associated with the keyboard.
• navigation: Represents a navigation-related action (e.g., "Back", "Close").
• primaryAction: Represents the primary action of the interface.
• principal: Places the item in the principal item section of the toolbar (often centered in the navigation bar).
• topBarLeading: Places the item on the leading edge (e.g., left side) of the top bar.
• topBarTrailing: Places the item on the trailing edge (e.g., right side) of the top bar.

Example Usage#

Single Item#

If you want to add a single confirmationAction button to the toolbar:

1<NavigationStack>
2  <VStack
3    toolbar={{
4      confirmationAction: <Button
5        title="Save"
6        action={() => console.log('Saving...')}
7      />
8    }}
9  >
10    {/* Main content */}
11  </Vstack>
12</NavigationStack>

Multiple Items#

You can also pass an array of nodes to a single placement, allowing multiple items in the same area:

1<NavigationStack>
2  <VStack
3    toolbar={{
4      topBarLeading: [
5        <Button title="Edit" action={() => console.log('Edit pressed')} />,
6        <Button title="Settings" action={() => console.log('Settings pressed')} />
7      ],
8      topBarTrailing: <Button title="Done" action={() => console.log('Done pressed')} />
9    }}
10  >
11    {/* Main content */}
12  </Vstack>
13</NavigationStack>

Combining Multiple Toolbar Placements#

You can mix and match different toolbar placements as needed:

1<NavigationStack>
2  <List
3    toolbar={{
4      navigation: <Button title="Back" action={() => console.log('Back pressed')} />,
5      principal: <Text fontWeight={"bold"}>Title</Text>,
6      primaryAction: <Button title="Share" action={() => console.log('Share pressed')} />,
7      bottomBar: <Button title="Help" action={() => console.log('Help pressed')} />
8    }}
9  >
10    {/* Main content */}
11  </List>
12</NavigationStack>

Summary#

By using the toolbar property, you can easily replicate the behavior of SwiftUI’s toolbar modifier in your Scripting app. Assigning VirtualNode elements to the appropriate keys in ToolBarProps allows you to build rich, contextual toolbars and navigation bars for your pages.