diff --git a/components/BottomSheet/README.md b/components/BottomSheet/README.md index 3dc6952a970..05cb2a300a2 100644 --- a/components/BottomSheet/README.md +++ b/components/BottomSheet/README.md @@ -124,6 +124,7 @@ MDCBottomSheetController *bottomSheet = [[MDCBottomSheetController alloc] initWi // Present the bottom sheet [self presentViewController:bottomSheet animated:true completion:nil]; ``` + #### Behavioral customizations @@ -265,4 +266,4 @@ id shapeScheme = [[MDCShapeScheme alloc] init]; [MDCBottomSheetControllerShapeThemer applyShapeScheme:shapeScheme toBottomSheetController:component]; ``` - \ No newline at end of file + diff --git a/components/Chips/README.md b/components/Chips/README.md index 55a47d040c1..25ffa22b4d5 100644 --- a/components/Chips/README.md +++ b/components/Chips/README.md @@ -164,7 +164,6 @@ chipField.showChipsDeleteButton = true [chipField sizeToFit]; [self.view addSubview:chipField]; ``` - ## Choice chip @@ -174,37 +173,39 @@ Choice chips clearly delineate and display options in a compact area. They are a It is easiest to create choice Chips using a `UICollectionView`: - - Use `MDCChipCollectionViewFlowLayout` as the `UICollectionView` layout: - - ```objc - MDCChipCollectionViewFlowLayout *layout = [[MDCChipCollectionViewFlowLayout alloc] init]; - _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout]; - ``` - - - - Leave the default `UICollectionView` selection setting (single selection). - - Use `MDCChipCollectionViewCell` as `UICollectionView` cells. (`MDCChipCollectionViewCell` manages the state of the chip based on selection state of `UICollectionView` automatically) - - - ```objc - - (void)loadView { - [super loadView]; - … - [_collectionView registerClass:[MDCChipCollectionViewCell class] - forCellWithReuseIdentifier:@"identifier"]; - ... - } - - - (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView - cellForItemAtIndexPath:(NSIndexPath *)indexPath { - MDCChipCollectionViewCell *cell = - [collectionView dequeueReusableCellWithReuseIdentifier:@"identifier" forIndexPath:indexPath]; - MDCChipView *chipView = cell.chipView; - // configure the chipView - return cell; - } - ``` - +- Use `MDCChipCollectionViewFlowLayout` as the `UICollectionView` layout: + + +```objc +MDCChipCollectionViewFlowLayout *layout = [[MDCChipCollectionViewFlowLayout alloc] init]; +_collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout]; +``` + + +- Leave the default `UICollectionView` selection setting (single selection). + +- Use `MDCChipCollectionViewCell` as `UICollectionView` cells. (`MDCChipCollectionViewCell` manages the state of the chip based on selection state of `UICollectionView` automatically) + + +```objc +- (void)loadView { + [super loadView]; + … + [_collectionView registerClass:[MDCChipCollectionViewCell class] + forCellWithReuseIdentifier:@"identifier"]; + ... + } + +- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView + cellForItemAtIndexPath:(NSIndexPath *)indexPath { + MDCChipCollectionViewCell *cell = + [collectionView dequeueReusableCellWithReuseIdentifier:@"identifier" forIndexPath:indexPath]; + MDCChipView *chipView = cell.chipView; + // configure the chipView + return cell; +} +``` + - Use `UICollectionViewDelegate` methods `collectionView:didSelectItemAtIndexPath:` for reacting to new choices. @@ -218,42 +219,45 @@ Filter chips clearly delineate and display options in a compact area. They are a It is easiest to create filter Chips using a `UICollectionView`: - - Use `MDCChipCollectionViewFlowLayout` as the `UICollectionView` layout: - - ```objc - MDCChipCollectionViewFlowLayout *layout = [[MDCChipCollectionViewFlowLayout alloc] init]; - _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout]; - ``` - - - - Allow multi cell selection in the `UICollectionView`: - - ```objc - collectionView.allowsMultipleSelection = YES; - ``` - - - Use `MDCChipCollectionViewCell` as `UICollectionView` cells. (`MDCChipCollectionViewCell` manages the state of the chip based on selection state of `UICollectionView` automatically) - - - ```objc - - (void)loadView { - [super loadView]; - … - [_collectionView registerClass:[MDCChipCollectionViewCell class] - forCellWithReuseIdentifier:@"identifier"]; - ... - } - - - (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView - cellForItemAtIndexPath:(NSIndexPath *)indexPath { - MDCChipCollectionViewCell *cell = - [collectionView dequeueReusableCellWithReuseIdentifier:@"identifier" forIndexPath:indexPath]; - MDCChipView *chipView = cell.chipView; - // configure the chipView - return cell; - } - ``` - +- Use `MDCChipCollectionViewFlowLayout` as the `UICollectionView` layout: + + +```objc +MDCChipCollectionViewFlowLayout *layout = [[MDCChipCollectionViewFlowLayout alloc] init]; +_collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout]; +``` + + +- Allow multi cell selection in the `UICollectionView`: + + +```objc +collectionView.allowsMultipleSelection = YES; +``` + + +- Use `MDCChipCollectionViewCell` as `UICollectionView` cells. (`MDCChipCollectionViewCell` manages the state of the chip based on selection state of `UICollectionView` automatically) + + +```objc +- (void)loadView { + [super loadView]; + … + [_collectionView registerClass:[MDCChipCollectionViewCell class] + forCellWithReuseIdentifier:@"identifier"]; + ... + } + +- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView + cellForItemAtIndexPath:(NSIndexPath *)indexPath { + MDCChipCollectionViewCell *cell = + [collectionView dequeueReusableCellWithReuseIdentifier:@"identifier" forIndexPath:indexPath]; + MDCChipView *chipView = cell.chipView; + // configure the chipView + return cell; +} +``` + - Use `UICollectionViewDelegate` methods `collectionView:didSelectItemAtIndexPath:` and `collectionView:didDeselectItemAtIndexPath:` for reacting to filter changes. @@ -267,51 +271,52 @@ An alternative to action chips are buttons, which should appear persistently and It is easiest to create action Chips using a `UICollectionView`: - - Use `MDCChipCollectionViewFlowLayout` as the `UICollectionView` layout: - - ```objc - MDCChipCollectionViewFlowLayout *layout = [[MDCChipCollectionViewFlowLayout alloc] init]; - _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout]; - ``` - - - - Leave the default `UICollectionView` selection setting (single selection). - - Use `MDCChipCollectionViewCell` as `UICollectionView` cells. (`MDCChipCollectionViewCell` manages the state of the chip based on selection state of `UICollectionView` automatically) - - - ```objc - - (void)loadView { - [super loadView]; - … - [_collectionView registerClass:[MDCChipCollectionViewCell class] - forCellWithReuseIdentifier:@"identifier"]; - ... - } - - - (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView - cellForItemAtIndexPath:(NSIndexPath *)indexPath { - MDCChipCollectionViewCell *cell = - [collectionView dequeueReusableCellWithReuseIdentifier:@"identifier" forIndexPath:indexPath]; - MDCChipView *chipView = cell.chipView; - // configure the chipView - return cell; - } - ``` - +- Use `MDCChipCollectionViewFlowLayout` as the `UICollectionView` layout: + + +```objc +MDCChipCollectionViewFlowLayout *layout = [[MDCChipCollectionViewFlowLayout alloc] init]; +_collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout]; +``` + + +- Leave the default `UICollectionView` selection setting (single selection). +- Use `MDCChipCollectionViewCell` as `UICollectionView` cells. (`MDCChipCollectionViewCell` manages the state of the chip based on selection state of `UICollectionView` automatically) + + +```objc +- (void)loadView { + [super loadView]; + … + [_collectionView registerClass:[MDCChipCollectionViewCell class] + forCellWithReuseIdentifier:@"identifier"]; + ... + } + +- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView + cellForItemAtIndexPath:(NSIndexPath *)indexPath { + MDCChipCollectionViewCell *cell = + [collectionView dequeueReusableCellWithReuseIdentifier:@"identifier" forIndexPath:indexPath]; + MDCChipView *chipView = cell.chipView; + // configure the chipView + return cell; +} +``` + - Make sure that `MDCChipCollectionViewCell` does not stay in selected state - - ```objc - - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { - // For action chips, we never want the chip to stay in selected state. - // Other possible apporaches would be relying on theming or Customizing collectionViewCell - // selected state. - [collectionView deselectItemAtIndexPath:indexPath animated:NO]; - // Trigger the action - } - ``` - + +```objc +- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { + // For action chips, we never want the chip to stay in selected state. + // Other possible apporaches would be relying on theming or Customizing collectionViewCell + // selected state. + [collectionView deselectItemAtIndexPath:indexPath animated:NO]; + // Trigger the action +} +``` + - Use `UICollectionViewDelegate` method `collectionView:didSelectItemAtIndexPath:` to Trigger the action.