which component should i use to get such a view?

[cst_zf]

can anyone help to choose the best component to get such the view below.

first, some flex cards with some layout inside.

second, some tiles with a big icon above and text below. besides, how to get a bigger icon with <i> tag?
q-tabs cannot get such effect, because i find it cannot wrap the tabs to multi lines…

third, how to get a full screen picture view when dragging it to zoom in or out?

[a47ae]

I think I would build the components by myself, shouldn’t be that hard if you use flexbox.
Maybee you can change the CSS of the existing card component to fit your card example, but in the end, I think it would be faster to just write them yourself.

When using Quasar 0.14 icons you should be able to change the size by just setting the size prop.
In 0.13 you can change the size by altering the font-size / line-height via CSS.

To get the drag in effect you could use hammer.js or even try to do it with the integrated replacement in Quasar 0.14

[cst_zf]

@a47ae excuse me but what is flexbox?

[cst_zf]

@a47ae does flexbox mean the new css3 layout? use class flex in a div with quasar?

[a47ae]

Oh sorry, I mean the CSS flexbox model. It allows for easy implementing things like Grids, like in your first example.

I did a rough implementation of the card here: https://jsbin.com/janewihomi/edit?html,css,output
Put this markup into a component for example my-card

Then you just use the Quasar flex classes and basically wrap them into a row, like so

<template>
  <div class="row">
    <my-card v-for="card in cards" class="col-3"></my-card>
  </div>
</template>

This should get you a grid of cards where there are displayed 4 cards in a row.

[cst_zf]

@a47ae thx for your help. i am going to study it. i leave frontend dev for years and not very familiar with new concepts.