Selectable grid of elements

[andrew solis]

Hello,

     I'm working on a web project that involves us having a front-facing website where users can view a catalog of files, represented by cards for now, that they can select to download its associated files. It's very similar in concept to Google Drive, only any user can see the available files. We like it to be so that users can select the cards of those they wish to download, and then download those they have selected. I was looking over the material guidelines (specifically for states here: https://material.io/design/interaction/states.html#states) and wanted to know if my implementation would be correct. Here is an example of my pages layout in html:

<mat-grid-list cols="5" rowHeight="4:3" gutterSize="15px">

   <mat-grid-tile *ngFor="let element of elements">

        <mat-card>

           

           <mat-card-header>

               <mat-card-title>{{element.name}}</mat-card-title>

           </mat-card-header>

<img mat-card-image src="thumbnails/{{element.filename}}">

           

       </mat-card>

    </mat-grid-tile>

</mat-grid-list>

Am I correct in putting my cards into a grid list and making these selectable somehow, or is this breaking any material guidelines? Or should they just be images? I'm not tied to cards so any advice on if this is correct or not and how best to continue would be greatly appreciated. 

Thanks!

[Vikas Verma]

I do t see any issue though I am not from material team.Moreover I am using Material in one of my ongoing project and the implementation is somewhat same..

[andrew solis]

Great, thanks! If you don't mind, what are you doing to show that a user say has "selected" a card? I was wanting to show this but haven't figured out a great way of doing so.

Thanks!

Andrew Solis

[Ng Jun Yen]

You can look into using SelectionModel from the CDK. An example of its usage would be the selection table examples on material.angular.io.

[Vikas Verma]

i haven't had that requirement  and also there does not seems a way to make a card feels like select-able i believe.May be you can either go for  some custom classes(handling it using styles) or provide an checkbox against each card.