[Tabs] readme update.
* adding tabs docs components.
* auto generated tabs
* fixing color and typography theming docs.
* typography themeing is added.
* tab bar to tab-bar,
image tags added back.
* reverting tab bar -> tab-bar
* regenerating the readme.
MODIFY
components/Tabs/.vars
components/Tabs/.vars
@@ -5,3 +5,4 @@ root_path=/catalog/tabs
icon_id=tabs
color_themer_api=MDCTabBarColorThemer
typography_themer_api=MDCTabBarTypographyThemer
+short_description=Material Design tabs are bars of buttons used to navigate between groups of content.

MODIFY
components/Tabs/README.md
components/Tabs/README.md
title: "Tabs"
layout: detail
section: components
-excerpt: "Tabs make it easy to explore and switch between different views."
+excerpt: "Material Design tabs are bars of buttons used to navigate between groups of content."
iconId: tabs
path: /catalog/tabs/
+api_doc_root: true
-->
+<!-- This file was auto-generated using ./scripts/generate_readme Tabs -->
+
# Tabs
<div class="article__asset article__asset--screenshot">
@@ -15,59 +18,84 @@ path: /catalog/tabs/
Tabs are bars of buttons used to navigate between groups of content.
-## Design & API Documentation
+## Design & API documentation
<ul class="icon-list">
<li class="icon-list-item icon-list-item--spec"><a href="https://material.io/go/design-tabs">Material Design guidelines: Tabs</a></li>
</ul>
-## Extensions
-
-<ul class="icon-list">
- <li class="icon-list-item icon-list-item--link"><a href="docs/color-theming.md">Color Theming</a></li>
- <li class="icon-list-item icon-list-item--link"><a href="docs/typography-theming.md">Typography Theming</a></li>
-</ul>
+## Table of contents
+
+- [Overview](#overview)
+- [Installation](#installation)
+ - [Installation with CocoaPods](#installation-with-cocoapods)
+ - [Importing](#importing)
+- [Usage](#usage)
+ - [Importing](#importing)
+ - [Delegate](#delegate)
+ - [Selected item](#selected-item)
+ - [Appearance](#appearance)
+ - [Styling](#styling)
+ - [Custom selection indicators](#custom-selection-indicators)
+ - [Bottom navigation](#bottom-navigation)
+- [Examples](#examples)
+ - [Creating a tab bar](#creating-a-tab-bar)
+- [Extensions](#extensions)
+ - [Color Theming](#color-theming)
+ - [Typography Theming](#typography-theming)
- - -
+## Overview
+
+When a user taps a tab, the content changes to match the selected subject in the tabs.
+
+We provide this functionality through MDCTabBar which communicates via a delegate as well as
+MDCTabBarViewController which provides a view containment model similar to UITabViewController.
+
+Tabs can also show a badge (usually a number) like UITabBar.
+
## Installation
+<!-- Extracted from docs/../../../docs/component-installation.md -->
+
### Installation with CocoaPods
-To add this component to your Xcode project using CocoaPods, add the
-following to your `Podfile`:
+Add the following to your `Podfile`:
-```
+```bash
pod 'MaterialComponents/Tabs'
```
<!--{: .code-renderer.code-renderer--install }-->
-To add this component along with its themer and other related extensions, please add the following instead:
-```bash
-pod 'MaterialComponents/Tabs+Extensions'
-```
-
Then, run the following command:
```bash
pod install
```
-- - -
+### Importing
-## Overview
+To import the component:
-When a user taps a tab, the content changes to match the selected subject in the tabs.
+<!--<div class="material-code-render" markdown="1">-->
+#### Swift
+```swift
+import MaterialComponents.MaterialTabs
+```
-We provide this functionality through MDCTabBar which communicates via a delegate as well as
-MDCTabBarViewController which provides a view containment model similar to UITabViewController.
+#### Objective-C
-Tabs can also show a badge (usually a number) like UITabBar.
+```objc
+#import "MaterialTabs.h"
+```
+<!--</div>-->
-- - -
## Usage
+<!-- Extracted from docs/Usage.md -->
+
### Importing
To use the tab bar in your code, import the MaterialTabs umbrella header (Objective-C) or MaterialComponents module (Swift).
@@ -121,9 +149,10 @@ See `MDCTabBarIndicatorTemplate` and `MDCTabBarIndicatorAttributes` for details.
Implement `positionForBar:` and return `UIBarPositionBottom` to configure the tab bar as a bottom
navigation bar. The bar will automatically update with the appropriate styling.
-- - -
-## Example
+## Examples
+
+<!-- Extracted from docs/Examples.md -->
### Creating a tab bar
@@ -158,3 +187,92 @@ tabBar.autoresizingMask =
```
<!--</div>-->
+
+
+## Extensions
+
+<!-- Extracted from docs/color-theming.md -->
+
+### Color Theming
+
+You can theme a tab bar with your app's color scheme using the ColorThemer extension.
+
+You must first add the Color Themer extension to your project:
+
+```bash
+pod 'MaterialComponents/Tabs+Extensions/ColorThemer'
+```
+
+<!--<div class="material-code-render" markdown="1">-->
+#### Swift
+```swift
+// Step 1: Import the ColorThemer extension
+import MaterialComponents.MaterialTabs_ColorThemer
+
+// Step 2: Create or get a color scheme
+let colorScheme = MDCSemanticColorScheme()
+
+// Step 3: Apply the color scheme to your component
+// Primary variant
+MDCTabBarColorThemer.applySemanticColorScheme(colorScheme, toTabs: component)
+// Or surface variant
+MDCTabBarColorThemer.applySurfaceVariant(withColorScheme: colorScheme, toTabs: component)
+```
+
+#### Objective-C
+
+```objc
+// Step 1: Import the ColorThemer extension
+#import "MaterialTabs+ColorThemer.h"
+
+// Step 2: Create or get a color scheme
+id<MDCColorScheming> colorScheme = [[MDCSemanticColorScheme alloc] init];
+
+// Step 3: Apply the color scheme to your component
+// Primary variant
+[MDCTabBarColorThemer applySemanticColorScheme:colorScheme toTabs:component];
+// Or surface variant
+[MDCTabBarColorThemer applySurfaceVariantWithColorScheme:colorScheme toTabs:component];
+```
+<!--</div>-->
+
+
+<!-- Extracted from docs/typography-theming.md -->
+
+### Typography Theming
+
+You can theme a tab bar with your app's typography scheme using the TypographyThemer extension.
+
+You must first add the Typography Themer extension to your project:
+
+```bash
+pod 'MaterialComponents/Tabs+Extensions/TypographyThemer'
+```
+<!--<div class="material-code-render" markdown="1">-->
+#### Swift
+```swift
+// Step 1: Import the TypographyThemer extension
+import MaterialComponents.MaterialTabs_TypographyThemer
+
+// Step 2: Create or get a typography scheme
+let typographyScheme = MDCTypographyScheme()
+
+// Step 3: Apply the typography scheme to your component
+MDCTabBarTypographyThemer.applyTypographyScheme(typographyScheme, to: component)
+```
+
+#### Objective-C
+
+```objc
+// Step 1: Import the TypographyThemer extension
+#import "MaterialTabs+TypographyThemer.h"
+
+// Step 2: Create or get a typography scheme
+id<MDCTypographyScheming> typographyScheme = [[MDCTypographyScheme alloc] init];
+
+// Step 3: Apply the typography scheme to your component
+[MDCTabBarTypographyThemer applyTypographyScheme:colorScheme
+ toTabBar:component];
+```
+<!--</div>-->
+

ADD
components/Tabs/docs/Examples.md
+### Creating a tab bar
+
+<!--<div class="material-code-render" markdown="1">-->
+#### Swift
+
+```swift
+let tabBar = MDCTabBar(frame: view.bounds)
+tabBar.items = [
+UITabBarItem(title: "Recents", image: UIImage(named: "phone"), tag: 0),
+UITabBarItem(title: "Favorites", image: UIImage(named: "heart"), tag: 0),
+]
+tabBar.itemAppearance = .titledImages
+tabBar.autoresizingMask = [.flexibleWidth, .flexibleBottomMargin]
+tabBar.sizeToFit()
+view.addSubview(tabBar)
+```
+
+#### Objective-C
+
+```objc
+MDCTabBar *tabBar = [[MDCTabBar alloc] initWithFrame:self.view.bounds];
+tabBar.items = @[
+ [[UITabBarItem alloc] initWithTitle:@"Recents" image:[UIImage imageNamed:@"phone"] tag:0],
+ [[UITabBarItem alloc] initWithTitle:@"Favorites" image:[UIImage imageNamed:@"heart"] tag:0],
+];
+tabBar.itemAppearance = MDCTabBarItemAppearanceTitledImages;
+tabBar.autoresizingMask =
+ UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin;
+[tabBar sizeToFit];
+[self.view addSubview:tabBar];
+```
+
+<!--</div>-->

ADD
components/Tabs/docs/README.md
+# Tabs
+
+<div class="article__asset article__asset--screenshot">
+ <img src="docs/assets/tabs.png" alt="Tabs" width="375">
+</div>
+
+Tabs are bars of buttons used to navigate between groups of content.
+
+## Design & API documentation
+
+* [Material Design guidelines: Tabs](https://material.io/go/design-tabs)
+
+<!-- toc -->
+
+- - -
+
+## Overview
+
+When a user taps a tab, the content changes to match the selected subject in the tabs.
+
+We provide this functionality through MDCTabBar which communicates via a delegate as well as
+MDCTabBarViewController which provides a view containment model similar to UITabViewController.
+
+Tabs can also show a badge (usually a number) like UITabBar.
+
+## Installation
+
+- [Typical installation](../../../docs/component-installation.md)
+
+## Usage
+
+- [Usage](Usage.md)
+
+## Examples
+
+- [Examples](Examples.md)
+
+## Extensions
+
+- [Color Theming](color-theming.md)
+
+- [Typography Theming](typography-theming.md)

ADD
components/Tabs/docs/Usage.md
+### 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.

MODIFY
components/Tabs/docs/color-theming.md
components/Tabs/docs/color-theming.md
-<!--docs:
-title: "Color Theming"
-layout: detail
-section: components
-excerpt: "How to theme Tabs using the Material Design color system."
-iconId: tabs
-path: /catalog/tabs/color-theming/
--->
-
-# Tabs Color Theming
+### Color Theming
You can theme a tab bar with your app's color scheme using the ColorThemer extension.
@@ -17,8 +8,6 @@ You must first add the Color Themer extension to your project:
pod 'MaterialComponents/Tabs+Extensions/ColorThemer'
```
-## Example code
-
<!--<div class="material-code-render" markdown="1">-->
#### Swift
```swift

MODIFY
components/Tabs/docs/typography-theming.md
components/Tabs/docs/typography-theming.md
-<!--docs:
-title: "Typography Theming"
-layout: detail
-section: components
-excerpt: "How to theme Tabs using the Material Design typography system."
-iconId: tabs
-path: /catalog/tabs/typography-theming/
--->
-
-# Tabs Typography Theming
+### Typography Theming
You can theme a tab bar with your app's typography scheme using the TypographyThemer extension.
@@ -16,9 +7,6 @@ You must first add the Typography Themer extension to your project:
```bash
pod 'MaterialComponents/Tabs+Extensions/TypographyThemer'
```
-
-## Example code
-
<!--<div class="material-code-render" markdown="1">-->
#### Swift
```swift

[Tabs] readme update. (#3613)

* adding tabs docs components.

* auto generated tabs

* fixing color and typography theming docs.

* typography themeing is added.

* tab bar to tab-bar,
image tags added back.

* reverting tab bar -> tab-bar

* regenerating the readme.

https://github.com/material-components/material-components-ios/pull/3613