Grid question

Ionic Framework ionic-v3
1

Hi there,

Is it possible to do something like this with the grid?

If so, how you would do it?

Thanks

1 Like
2

In the HTML:

<ion-toolbar><ion-title>Grid</ion-title></ion-toolbar>

<ion-content class="grid-full">

  <ion-row>
    <ion-col class="cell-1">
      statistics
    </ion-col>
    <ion-col class="cell-2">
      profile
    </ion-col>
    <ion-col class="cell-3">
      photos
    </ion-col>
    <ion-col class="cell-4">
      laboratory
    </ion-col>
    <ion-col class="cell-5">
      calendar
    </ion-col>
    <ion-col class="cell-6">
      alert
    </ion-col>
  </ion-row>

</ion-content>

In the CSS:

.grid-full ion-row {
  height: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.grid-full ion-col {
  flex: 0 0 50%;
  max-width: 50%;
  text-align: center;
  padding: 10px 5px;
}

.cell-1 {
  background-color: #C5DCFC;
}
.cell-2 {
  background-color: #262B69;
}
.cell-3 {
  background-color: #A0C5FA;
}
.cell-4 {
  background-color: #B3D0FC;
}
.cell-5 {
  background-color: #73A7F9;
}
.cell-6 {
  background-color: #8CB9FA;
}

Note: you could also add width-50 as an attribute to each ion-col but I just did it in the CSS because it applies to all of them. We could always add some attributes to make this easier.

You’ll have to tweak the CSS to add the images and center them vertically, but this is a good starting point. :smile:

image
Screen Shot 2016-01-23 at 2.21.24 PM.png375Ă—626 10.6 KB

5 Likes
3

If you don’t mind that the rows don’t get pushed out, but get equally smaller,
here is my try

1 Like
4

Very nice, thanks for your help @brandyshea and @YayO

1 Like
5

Hi again,

I am sure it is doable, but I don’t have the knowledge to do it yet.

Here the current code

  <ion-row>
    <ion-col *ngFor="#menu of menus" class="cell-0" (click)="menuSelected(menu)">
      <ion-icon [name]="menu.icon"></ion-icon>
      <ion-label>{{ menu.name }}</ion-label>
    </ion-col>
  </ion-row>

Like you can see, it will create all my cells with different icons and labels, but I don’t know how to increment the number of the “class”. How can I change “cell-0” to something like “cell-i”? Unless there is a way to apply the cell background color with a different way? It will be nice if it could be something like <ion-col [color]="menu.cellColor">

Thanks

6

There’s some ways like:

<ion-col *ngFor='#menu of menus; #i = index' class='cell-{{i}}'> // Not tested, i think it should work

But i would recommend you just add the class to the menu item in the array and use it with ngClass:

<ion-col *ngFor='#menu of menus' [ngClass]='menu.backgroundColor'>
7

You should be able to use ngClass with index similar to the way @luchillo17 said. We’re doing something similar in tabs:

https://github.com/driftyco/ionic/blob/2.0/ionic/components/tabs/tabs.ts#L51

Like I said in another reply though we need to discuss adding the color attribute to multiple components. :smile:

8

@luchillo17, the first one is working and of course, the second one too.

thanks!

9

@brandyshea, I agree, the color attribut should be everywhere! :slight_smile:

10

Glad it worked, tough the first one i suggested looks kind of like a hacky workaround.

12

Thanks Brandy, this code is working fine on Ionic v3, you are pretty and smart.

Regards.

13

Want to align the text vertically center, could you update pls