blob: 3be139c3d07cc53628f05f737979309f9d27810f [file] [log] [blame] [view] [edit]
### Importing
To use the tab bar in your code, import the MaterialTabs umbrella header (Objective-C) or MaterialComponents module (Swift).
<!--<div class="material-code-render" markdown="1">-->
#### Swift
```swift
import MaterialComponents
```
#### Objective-C
```objc
#import "MaterialTabs.h"
```
<!--</div>-->
### Delegate
Conform your class to the MDCTabBarDelegate protocol and set it as the tab bar's delegate to handle updating the UI when the user selects a tab.
### Selected item
Update the selected tab programmatically by setting `selectedItem`, optionally with an animation. Delegate methods are not called for programmatic changes, so callers are responsible for updating UI as needed after updating the selected item.
### Appearance
Set the `itemAppearance` property on the tab bar to switch between item display modes. Items can be displayed as titles (the default), icons, or combined.
### Styling
By default, the tab bar is configured to display items with white text and icons. To customize the color of the tab bar, set the `tintColor`, `selectedItemTintColor`, `unselectedItemTintColor`, `inkColor`, and `barTintColor` properties. If `selectedItemTintColor` is nil, the tab bar's `tintColor` will be used automatically for selected items.
Configure where items are placed in the tab bar by setting the `alignment` property.
### Custom selection indicators
The currently-selected tab is indicated visually by a *selection indicator*. By default this is an
underline, but you can customize its appearance by defining a selection indicator template and
setting the `selectionIndicatorTemplate` property on the tab bar. Template objects are provided
contextual information about a tab's content and return *attributes* that describe how that tab's
indicator should appear. The indicator will then automatically display the provided shape and
animate changes as the user selects different tabs.
See `MDCTabBarIndicatorTemplate` and `MDCTabBarIndicatorAttributes` for details.
### Bottom navigation
Implement `positionForBar:` and return `UIBarPositionBottom` to configure the tab bar as a bottom
navigation bar. The bar will automatically update with the appropriate styling.