83fffdb4cc
### Context After releasing the Shape Theming code, this provides initial documentation for how to use shape theming, and its API. ### The problem We lack documentation on what is Shape Theming, and how do you use it. ### The fix An Initial doc outlining shape theming. ### Bug Closes #4605 Closes #4606
2.7 KiB
Shape scheme
The Material Design shape system can be used to create a shape theme that reflects your brand or style.
Related Documentation
Overview
An implementation of the Material Design shape scheme is provided in the MDCShapeScheme
class. By default, an instance of this class is configured with the Material defaults.
The following image shows an MDCButton themed with the default
shape scheme values (bottom) and an MDCButton themed with custom shape scheme values (top).
Currently, 5 components support being themed with a shape scheme using a shape themer extension, namely Cards, Buttons, FABs, Chips,
and Bottom Sheet. You can learn more about which extensions are available for a given component by reading the
component documentation.
Shape Values
A shape scheme consists of the following shape values:
| Shape Category | Use |
|---|---|
smallComponentShape |
The shape defining small sized components. |
mediumComponentShape |
The shape defining medium sized components. |
largeComponentShape |
The shape defining large sized components. |
Each of the shape categories are of the class MDCShapeCategory.
An MDCShapeCategory holds properties that define a shape value. It consists of 4 corners of type MDCCornerTreatment that represent each corner of the shape. It also has a convenience initializer to set all the 4 corners at once to the same value, creating a symmetrical shape.
Lastly, an MDCCornerTreatment can be set by using any of the convenience initializers in MDCCornerTreatment+CornerTypeInitializer.h.
Shape to Component Mapping
Installation
Installation with CocoaPods
Add the following to your Podfile:
pod 'MaterialComponents/schemes/Shape'
Then, run the following command:
pod install
Importing
To import the component:
Swift
import MaterialComponents.MaterialShapeScheme
Objective-C
#import "MaterialShapeScheme.h"