mirror of
https://github.com/material-components/material-components-ios.git
synced 2026-02-20 08:27:32 +08:00
53 lines
2.2 KiB
Markdown
53 lines
2.2 KiB
Markdown
### 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.
|