blob: 1f4241150f3f8eab2eff2f5d97f877423579459b [file] [log] [blame] [view] [edit]
### Theming Extensions
You can theme an MDCDialog to match the Material Design Dialog using your app's scheme and the Dialogs theming
extension. To add the theming extension to your project add the following line to your Podfile:
```bash
pod 'MaterialComponents/Dialogs+Theming'
```
Then import the theming extension and the `MDCContainerScheme` and create an `MDCContainerScheme` instance. A container scheme
defines the design parameters that you can use to theme your dialogs. Finally, call the appropriate method on the theming extension.
<!--<div class="material-code-render" markdown="1">-->
#### Swift
```swift
// Step 1: Import the Dialog theming extension and container scheme
import MaterialComponents.MaterialDialogs_Theming
import MaterialComponents.MaterialContainerScheme
// Step 2: Create or get a container scheme
let containerScheme = MDCContainerScheme()
// Step 3: Apply the container scheme to your component using the desired alert style
alertController.applyTheme(withScheme: containerScheme)
```
#### Objective-C
```objc
// Step 1: Import the Dialog theming extension and container scheme
#import "MaterialDialogs+Theming.h"
#import "MaterialContainerScheme.h"
// Step 2: Create or get a container scheme
MDCContainerScheme *containerScheme = [[MDCContainerScheme alloc] init];
// Step 3: Apply the container scheme to your component using the desired alert style
[alertController applyThemeWithScheme:containerScheme];
```
<!--</div>-->
### Theming Actions
Actions in MDCAlertController have emphasis which affects how the Dialog's buttons will be themed.
High, Medium and low emphasis are supported.
<div class="article__asset article__asset--screenshot">
<img src="docs/assets/dialogButtons.png" alt="An alert presented with a title, body, high-emphasis 'OK' button and low-emphasis 'Cancel' button." width="320">
</div>
<!--<div class="material-code-render" markdown="1">-->
#### Swift
```swift
// Create or reuse a Container scheme
let scheme = MDCContainerScheme()
// Create an Alert dialog
let alert = MDCAlertController(title: "Button Theming", message: "Add item to cart?")
// Add actions with emphases that will generate buttons with the desired appearance.
// An example of a high and a medium emphasis actions:
alert.addAction(MDCAlertAction(title:"Add Item", emphasis: .high, handler: handler))
alert.addAction(MDCAlertAction(title:"Cancel", emphasis: .medium, handler: handler))
// Make sure to apply theming after all actions are added, so they are themed too!
alert.applyTheme(withScheme: scheme)
// present the alert
present(alertController, animated:true, completion:nil)
```
#### Objective-C
```objc
// Create or reuse a Container scheme
MDCContainerScheme *scheme = [[MDCContainerScheme alloc] init];
// Create an Alert dialog
MDCAlertController *alert =
[MDCAlertController alertControllerWithTitle:@"Button Theming" message:@"Add item to cart?"];
// Add actions with different emphasis, creating buttons with different themes.
MDCAlertAction *primaryAction = [MDCAlertAction actionWithTitle:@"Add Item"
emphasis:MDCActionEmphasisHigh
handler:handler];
[alert addAction:primaryAction];
MDCAlertAction *cancelAction = [MDCAlertAction actionWithTitle:@"Cancel"
emphasis:MDCActionEmphasisMedium
handler:handler];
[alert addAction:cancelAction];
// Make sure to apply theming after all actions are added, so they are themed too!
[alert applyThemeWithScheme:scheme];
// present the alert
[self presentViewController:alert animated:YES completion:...];
```
<!--</div>-->
### Using a Themer
You can theme an MDCDialog to match the Material Design Dialog using your app's schemes in the DialogThemer
extension.
You must first add the DialogThemer extension to your project:
```bash
pod 'MaterialComponents/Dialogs+DialogThemer'
```
You can then import the extension and create an `MDCAlertControllerThemer` instance. A dialog scheme defines
the design parameters that you can use to theme your dialogs.
<!--<div class="material-code-render" markdown="1">-->
#### Swift
```swift
// Step 1: Import the DialogThemer extension
import MaterialComponents.MaterialDialogs_DialogThemer
// Step 2: Create or get a alert scheme
let alertScheme = MDCAlertScheme()
// Step 3: Apply the alert scheme to your component using the desired alert style
MDCAlertControllerThemer.applyScheme(scheme, to: alertController)
```
#### Objective-C
```objc
// Step 1: Import the DialogThemer extension
#import "MaterialDialogs+DialogThemer.h"
// Step 2: Create or get a alert scheme
MDCAlertScheme *alertScheme = [[MDCAlertScheme alloc] init];
// Step 3: Apply the alert scheme to your component using the desired alert style
[MDCAlertControllerThemer applyScheme:alertScheme toAlertController:alertController];
```
<!--</div>-->