blob: ed7fddfc7a6f0dc4e5990851d0d1d35bb393337a [file] [log] [blame] [view] [edit]
<!--docs:
title: "ShapeLibrary"
layout: detail
section: components
excerpt: "ShapeLibrary consists of convenience APIs to create shaped surfaces."
iconId: shapelibrary
path: /catalog/shapelibrary/
api_doc_root: true
-->
<!-- This file was auto-generated using ./scripts/generate_readme ShapeLibrary -->
# Shape Library
Our Shape Library consists of different convenience APIs and classes we use to build a shape.
Specifically, the classes in this library sit on top of our [core Shapes implementation](../Shapes), and that implementation
should be understood and used before making use of the classes here.
## Related Documentation
<ul class="icon-list">
<li class="icon-list-item icon-list-item--link"><a href="../Shapes">Core Shapes Implementation</a></li>
</ul>
## Table of contents
- [Overview](#overview)
- [Usage](#usage)
- - -
## Overview
The classes described below are convenience APIs on top of `MDCRectangleShapeGenerator`:
#### MDCCurvedCornerTreatment
Generates an MDCCornerTreatment that is curved and receives a size to define the size of the curve.
#### MDCCutCornerTreatment
Generates an MDCCornerTreatment that is a cut corner and receives a cut to define by how much to cut.
#### MDCRoundedCornerTreatment
Generates an MDCCornerTreatment that is rounded and receives a radius to define the radius of the rounding.
#### MDCTriangleEdgeTreatment
Generates an MDCEdgeTreatment that consists of a triangle of a settable size and style.
The classes described below are convenience shape generators that create an `MDCRectangleShapeGenerator` subclass that consist of preset corner and edge treatments:
#### MDCCurvedRectShapeGenerator
This generates a shape using MDCRectangleShapeGenerator with MDCCurvedCornerTreatment for its corners.
#### MDCPillShapeGenerator
This generates a shape using MDCRectangleShapeGenerator with MDCRoundedCornerTreatment for its corners.
#### MDCSlantedRectShapeGenerator
This generates a shape using MDCRectangleShapeGenerator and adds a slant to its corners using a simple offset to its corners.
## Usage
You'll typically create an `MDCRectangleShapeGenerator` instance that you set your component with.
Components that support the shape system will have a `id<MDCShapeGenerating> shapeGenerator` property as part of their API.
By setting the `shapeGenerator` property with your `MDCRectangleShapeGenerator`, you will provide the defined shape to your component.
<!--<div class="material-code-render" markdown="1">-->
#### Swift
```swift
let card = MDCCard()
let shapeGenerator = MDCRectangleShapeGenerator()
let cutCornerTreatment = MDCCutCornerTreatment(cut: 4)
shapeGenerator.setCorners(cutCornerTreatment)
let triangleEdgeTreatment = MDCTriangleEdgeTreatment(size: 8, style: MDCTriangleEdgeStyleCut)
shapeGenerator.setEdges(triangleEdgeTreatment)
card.shapeGenerator = shapeGenerator
```
#### Objective-C
```objc
MDCCard *card = [[MDCCard alloc] init];
MDCRectangleShapeGenerator *shapeGenerator = [[MDCRectangleShapeGenerator alloc] init];
MDCCutCornerTreatment *cutCornerTreatment = [[MDCCutCornerTreatment alloc] initWithCut: 4];
[shapeGenerator setCorners:cutCornerTreatment];
MDCTriangleEdgeTreatment *triangleEdgeTreatment = [[MDCTriangleEdgeTreatment alloc] initWithSize: 8 style: MDCTriangleEdgeStyleCut];
[shapeGenerator setEdges:triangleEdgeTreatment];
card.shapeGenerator = shapeGenerator;
```
<!--</div>-->