diff --git a/components/ActionSheet/README.md b/components/ActionSheet/README.md index a36b7c0711f..f0596b6fb2f 100644 --- a/components/ActionSheet/README.md +++ b/components/ActionSheet/README.md @@ -37,6 +37,8 @@ the screen and displays actions a user can take. - [Typical use](#typical-use) - [MDCActionSheetController vs. UIAlertControllerStyleActionSheet](#mdcactionsheetcontroller-vs.-uialertcontrollerstyleactionsheet) - [Extensions](#extensions) + - [Color Theming](#color-theming) + - [Typography Theming](#typography-theming) - [Accessibility](#accessibility) - [Set `-isScrimAccessibilityElement`](#set-`-isscrimaccessibilityelement`) - [Set `-scrimAccessibilityLabel`](#set-`-scrimaccessibilitylabel`) @@ -163,6 +165,91 @@ Material UIAlertController please see the `MDCAlertController` class. ## Extensions + + +### Color Theming + +You can theme an Action Sheet with your app's color scheme using the ColorThemer extension. + +You must first add the Color Themer extension to your project: + +```bash +pod `MaterialComponentsAlpha/ActionSheet+ColorThemer` +``` + + +#### Swift +```swift +// Step 1: Import the ColorThemer extension +import MaterialComponentsAlpha.MaterialActionSheet_ColorThemer + +// Step 2: Create or get a color scheme +let colorScheme = MDCSemanticColorScheme() + +// Step 3: Apply the color scheme to your component +let actionSheet = MDCActionSheetController() +MDCActionSheetColorThemer.applySemanticColorScheme(colorScheme, to: actionSheet) +``` + +#### Objective-C + +```objc +// Step 1: Import the ColorThemer extension +#import "MaterialActionSheet+ColorThemer.h" + +// Step 2: Create or get a color scheme +id colorScheme = [[MDCSematnicColorScheme alloc] init]; + +// Step 3: Apply the color scheme to your component +MDCActionSheetController *actionSheet = [[MDCActionSheetController alloc] init]; +[MDCActionSheetColorThemer applySemanticColorScheme:self.colorScheme + toActionSheetController:actionSheet]; +``` + + + + +### Typography Theming + +You can theme an Action Sheet with your app's typography scheme using the TypographyThemer extension. + +You must first add the Typography Themer extension to your project: + +```bash +pod `MaterialComponentsAlpha/ActionSheet+TypographyThemer` +``` + + +#### Swift +```swift +// Step 1: Import the ColorThemer extension +import MaterialComponentsAlpha.MaterialActionSheet_TypographyThemer + +// Step 2: Create or get a color scheme +let typographyScheme = MDCTypographyScheme() + +// Step 3: Apply the color scheme to your component +let actionSheet = MDCActionSheetController() +MDCActionSheetTypographyThemer.applyTypographyScheme(typographyScheme, to: actionSheet) +``` + +#### Objective-C + +```objc +// Step 1: Import the ColorThemer extension +#import "MaterialActionSheet+TypographyThemer.h" + +// Step 2: Create or get a color scheme +id typographyScheme = [[MDCTypographyScheme alloc] init]; + +// Step 3: Apply the color scheme to your component +MDCActionSheetController *actionSheet = [[MDCActionSheetController alloc] init]; +[MDCActionSheetTypographyThemer applyTypographyScheme:self.typographyScheme + toActionSheetController:actionSheet]; +``` + + + ## Accessibility diff --git a/components/ActionSheet/docs/README.md b/components/ActionSheet/docs/README.md index 2ab0e8f1b5e..acecd7fa5e2 100644 --- a/components/ActionSheet/docs/README.md +++ b/components/ActionSheet/docs/README.md @@ -55,4 +55,7 @@ Material UIAlertController please see the `MDCAlertController` class. ## Extensions +- [Color Theming](color-theming.md) +- [Typography Theming](typography-theming.md) + - [Accessibility](accessibility.md) diff --git a/components/ActionSheet/docs/color-theming.md b/components/ActionSheet/docs/color-theming.md new file mode 100644 index 00000000000..f5c44be8cb9 --- /dev/null +++ b/components/ActionSheet/docs/color-theming.md @@ -0,0 +1,39 @@ +### Color Theming + +You can theme an Action Sheet with your app's color scheme using the ColorThemer extension. + +You must first add the Color Themer extension to your project: + +```bash +pod `MaterialComponentsAlpha/ActionSheet+ColorThemer` +``` + + +#### Swift +```swift +// Step 1: Import the ColorThemer extension +import MaterialComponentsAlpha.MaterialActionSheet_ColorThemer + +// Step 2: Create or get a color scheme +let colorScheme = MDCSemanticColorScheme() + +// Step 3: Apply the color scheme to your component +let actionSheet = MDCActionSheetController() +MDCActionSheetColorThemer.applySemanticColorScheme(colorScheme, to: actionSheet) +``` + +#### Objective-C + +```objc +// Step 1: Import the ColorThemer extension +#import "MaterialActionSheet+ColorThemer.h" + +// Step 2: Create or get a color scheme +id colorScheme = [[MDCSematnicColorScheme alloc] init]; + +// Step 3: Apply the color scheme to your component +MDCActionSheetController *actionSheet = [[MDCActionSheetController alloc] init]; +[MDCActionSheetColorThemer applySemanticColorScheme:self.colorScheme + toActionSheetController:actionSheet]; +``` + diff --git a/components/ActionSheet/docs/typography-theming.md b/components/ActionSheet/docs/typography-theming.md new file mode 100644 index 00000000000..91f4049bcc5 --- /dev/null +++ b/components/ActionSheet/docs/typography-theming.md @@ -0,0 +1,39 @@ +### Typography Theming + +You can theme an Action Sheet with your app's typography scheme using the TypographyThemer extension. + +You must first add the Typography Themer extension to your project: + +```bash +pod `MaterialComponentsAlpha/ActionSheet+TypographyThemer` +``` + + +#### Swift +```swift +// Step 1: Import the ColorThemer extension +import MaterialComponentsAlpha.MaterialActionSheet_TypographyThemer + +// Step 2: Create or get a color scheme +let typographyScheme = MDCTypographyScheme() + +// Step 3: Apply the color scheme to your component +let actionSheet = MDCActionSheetController() +MDCActionSheetTypographyThemer.applyTypographyScheme(typographyScheme, to: actionSheet) +``` + +#### Objective-C + +```objc +// Step 1: Import the ColorThemer extension +#import "MaterialActionSheet+TypographyThemer.h" + +// Step 2: Create or get a color scheme +id typographyScheme = [[MDCTypographyScheme alloc] init]; + +// Step 3: Apply the color scheme to your component +MDCActionSheetController *actionSheet = [[MDCActionSheetController alloc] init]; +[MDCActionSheetTypographyThemer applyTypographyScheme:self.typographyScheme + toActionSheetController:actionSheet]; +``` +