Tiles vs Collapsible/Accordian

design material
#1

Hi,

Kudos on your Bootstrap / Material framework! It’s the leader of the pack IMHO - aesthetically and for ease-of-use / uncluttered code base. (Weird thing is after scouring the internet, the best solution turned out to be just up the road in Potts Point lol.)

Anyhow, I’m using your framework for a Vue.js application, and I’m just curious about the implementation of the “Tiles” extra… It seems very similar to the vanilla Bootstrap “Collapsible” plugin (configured to behave as an Accordian), so I’m wondering why it needed its own plugin on top of Collapsible? It also seems to be tied into the “tile-” class name, and I was hoping to adapt it for some custom components, but now I’m wondering what complexity I might be missing if it required the bespoke code)

Thanks in advance, and thanks again for releasing your in-house source code for us. It’s SOOO helpful!!

Jon. :slight_smile:

1 Like
#2

hi @CookieJon, thanks for the kind words.

To answer your question, in short, yes, the tile js is pretty much the same as bootstrap’s collapse. However, the tile js also supports esc key to close the opening tile(s). The reason behind this is when I was working on the current master, the official Material Design Guideline did not have this: https://material.google.com/components/expansion-panels.html. I did the tile js based on the interface of Google’s Inbox.

In terms of keyboard interactions, the guideline only specifies that a user may traverse through list items by using the tab key, so in the future (i.e. https://github.com/Daemonite/material/tree/back-filling-bootstrap-4), the js part of "tile"s will be handled by bootstrap’s collapse (tiles will probably be renamed to panels according to the guideline as well) and the “.tile-” (or “.panel-”) will handle the css part only.

Even in the current master, you can use “.tile-” alone to only style a certain element as long as you do not call data-toggle="title" on that particular element. In this case, no tile related js will be triggered and you can hook any customised functions with this .tile- element.

1 Like
#5

Ah hah!

Glad I asked, thanks for the detailed explanation.

Cheers,
J.