Condtional CSS

Ionic Framework ionic-v3
1

I would like to have a dynamic grid system so trying to use conditional css but it’s failing for the moment. I have seen Josh Morony video with his button example:

<button ion-button [outline]="true">Test</button>

When I try to do this:
<ion-col [width-80]="isTrue">Test</ion-col>

I am getting the following error:

Unhandled Promise rejection: Template parse errors:
Can’t bind to ‘width-80’ since it isn’t a known property of ‘ion-col’.

  1. If ‘ion-col’ is an Angular component and it has ‘width-80’ input, then verify that it is part of this module.
  2. If ‘ion-col’ is a Web Component then add “CUSTOM_ELEMENTS_SCHEMA” to the ‘@NgModule.schemas’ of this component to suppress this message.

Any idea on what to do next? @joshmorony

3

It means ion-col don’t have this attribute. Try use a div instead or create your own grid component.

This is my responsive grid SCSS:

$device-types: 
(
    desktop,
    tablet,
    phone
);

[col], 
[col-phone], 
[col-tablet], 
[col-desktop] 
{
    //width: 100%;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}
[grid] {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    //align-items: stretch;
}
@for $i from 1 through 12 { 
        [grid] > [col="#{$i}"] {
            width: percentage($i / 12);
        }                    
}
@each $device-type in $device-types { 
    .#{$device-type} {
            @for $i from 1 through 12 { 
                    [grid] > [col-#{$device-type}="#{$i}"] {
                        width: percentage($i / 12);
                    }                    
            }
    }
}

Usage:

// getDeviceType() can call Platform class from Ionic 2 or even get window width to make calculations to check the device type. It must return a string "desktop", "tablet" or "phone"
    <div class="{{ getDeviceType() }}" style="width: 100%;">
            <div grid  style="width: 100%;">
                <div col-phone   = "12" 
                        col-tablet  = "4" 
                        col-desktop = "3" 
                        *ngFor      = "let item of myProvider.itens">
                    <ion-card> 

                            <ion-list>
                                <ion-item>
                                      <ion-icon item-left [name]="item.icon"></ion-icon>
                                     <b>{{ item.name }}</b> 
                                     <b>{{ item.content }}</p>
                                </ion-item>

                            </ion-list>

                    </ion-card>
                </div>
            </div>
    </div>
1 Like