Limitation in lists, tiles and cards

[odahcam]

Bug, feature request, or proposal:

feature

What is the expected behavior?

I would like to be able to reuse some already existing small components (like mat-card-title) to take more benefit from the lib while creating some specific views.

What is the current behavior?

Some components are/look too limited and they have too few examples in the docs to a beginner understand what can be done.

What are the steps to reproduce?

n/a

What is the use-case or motivation for changing an existing behavior?

Looking at the docs I could only create three types of lists (none of them was the one I wanted)

These are some implementations that I couldn't find in the docs nor implement:

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

TS ~2.5, Ng ~5.1 and NgMat 5.0.2

Is there anything else we should know?

This site has some good examples of things I would like to see in the docs:
http://bitmap9.github.io/materialmockups/

And this site has some very good implementations: https://tina-material-tree.firebaseapp.com/
I found it trought the "tree view" feature "sneak peak" link in the README file, I know that a lot of people here know these example sites, but they are very hard to find because most of times the reader don't realise that these sites have so many good implementations.

Some styles are very similar between components like cards, tiles and lists and we cannot take benefit of the already existing items because they are too specific. For example, I cannot use the mat-card-title nor the mat-card-image in a tile because they were made for the card component, but the typografy and the internal layout of both would be the same.

Ignoring the use case, but considering the layout itself, in this example taken from material guidelines the internal layout from both card and tile are exactly the same, the tile even looks lika a flat card or something else.

Also in some web examples we can see that tiles have exactly the same internal layout that cards do:

[jotatoledo]

The third is not a list, its a grid.

The 1st and 2nd can be done, did you even tried?

[odahcam]

Before anything else, I would like to say that I've edited the issue. The previous version was very bad written.

The third is not a list, its a grid.

It's a <mat-grid-list>, so I thought it was a list too, and for any end user it can be understood as a list. I know the 1st and 2nd are list views and the 3rd is a grid view, but they're all treated as lists in some point, so maybe some clearification or renaming is needed here.

The 1st and 2nd can be done, did you even tried?

I'm trying different implementations, but none worked fine without undesired CSS modifications.

---

I remember that there was a time where material.io/guidelines had a tiles section that specifies exactly what I'm trying to do, they were what we know today as mat-grid-tiles and there was exemples that looks like a flat card list.

The card component has a very nice style for creating this, but I can't see how to use it with a list or grid, I'm very confused about what I can do.

---

I'm also new to Angular 5 and this lib, but I liked it and if there's aything that I can do, just tell me and I will gladly make a PR.

[julianobrasil]

@odahcam, I understood that you're asking for docs about doing some stuff suposing they currently exist out-of-the-box in angular material 2 library.

I'm not the one who can answer on the team behalf, but based on what I've seen, I think that everything you want will be fulfilled, but the first release version has just come up a few weeks ago. You'll have to wait some more time. Until there, IMO this is a valid "feature" request (more docs and possibly, some more features in a component).

About the features... well, I think you can, with little effort, achieve what you want (the three examples you used) with mat-grid-list and almost no css (of course it depends on what you want). Take a look at this stackblitz demo: https://stackblitz.com/edit/angular-material2-list-of-cards

[odahcam]

That's a good example, I tried to implement something in that way: https://stackblitz.com/edit/angular-material-product-list?file=app%2Flist-example.html

---

I did some experiments where I implemented that layout with card:

I made it with some flex CSS rules and the mat-card-title-group component, but looks like this layout is not part of the card scope, this looks like a list thing. I thought we could create a flat card variation with some of these styles, but I think that grid and list are the right components for implementing this.

---

Also, I found that the 3rd list type has an example similar to the print I posted here, in here: https://tina-material-tree.firebaseapp.com/grid-list

[odahcam]

As far as I can see, we could easly have cards inside a grid tile, but the card content's style lives only inside the card, making it impossible to reuse any of that styled elements in a simple tile, that is responsible for the same content type, but without elevation.

The styles present in the card component follow rules for placing content inside a container in a way that looks good to a final user, they're not "card styles", the card component should just use these styles do satisfy its design patterns and should not contain all the styling for itself in that way, any card, tile or list could use the same already written code.

That's my point of view for a real (and very common) production use case.

[julianobrasil]

What you want is a directive to apply to an item of the list and make it looks like a card, because you think it's a common case, right? Why don't express it in the title of this issue?

If you need the same styles elsewhere, have you thought of building a custom component so you haven't to reapply every styles everytime? Sometimes this is where the real power of angular resides.

I took a look at your stackblitz demo. I don't know whether you were still experimenting the available features, but based on what I saw at the moment I accessed stackblitz, I think it's worth a careful reading on the available documention of the very powerful api of angular/flex-layout. It can help you to better organize the layout inside the card, for example.

[odahcam]

I have to say that when I created the issue, it was about how I could make "x" thing, but now this is not a "how to" anymore, it's about what Material guidelines says and what is implemented here and how we maybe could improve it.

Let me show my point:

Material guidelines shows some design rules in both cards and tiles, but in here I can only find them in cards, I feel like tiles were built here only to show media in a grid.

In my case, I want to create a list, but lists here can only contain avatars, while I need big images to show some products like cards do, so neither lists, cards or tiles fit in this spec, but I can find it clearly in Material guidelines.

---

I started to use the flex-layout and it's really powerfull, but I could be using the same style that the card does, the only reason I'm having to implement this by myself is because the entire internal layout of the card belongs only to the card and is not something generic shared between components. I do not want something specific of mine, I want a style that is specified in the Material guidelines, I styling margins, paddings and font-sizes that are the same as the card styles.

I also found that a grid tile cannot be a <a> element, I can't see why, because Material guidelines says that the entire tile body can be an action, so I can't see why it can't be a navigation anchor.

---

One of the things that I learn from twbs/bootstrap is that almost everything is reusable and has something in common.

[julianobrasil]

About the <a> feature of the tile, you can comment it here: #5918 (this other issue is about it and is opened to discussion)

About using the card styles ouside a card... well in fact you can do something like this (outside mat-card):

<div matCardTitle>
    Testing style
</div>

[odahcam]

It's very nice to see that, I will try it out and see what can be done. The number of examples really is a problem, I couldn't find this directive or an example for its using in the docs.

[julianobrasil]

Well, I got that reading the code, but it is really missing in docs.

Anyway, a good reading on dash-case vs camelCase in Material 2 is #6720

[odahcam]

Very nice, thanks.

Well, so we went a little off topic in a very badly written issue.

I'll close this for now and any new discussions should be done in another thread.