Ion-item attributes in Beta 4

#1

I’m using ion-list in Ionic Beta 4.

Additionally, on the ion-item I’ve included the attributes no-lines and detail-none. However, in the Ionic DevApp, the lines and the greater than/right arrow still appear.

The ultimate goal is to get rid of the lines and the greater than/right arrow.

How do I do this in Ionic 4?

BTW, here’s my code snippet:

    <ion-list>
      <ion-menu-toggle *ngFor="let page of appPages">
        <ion-item no-lines detail-none [routerLink]="page.url" [routerDirection]="'root'">
          <ion-icon slot="start" [name]="page.icon" color="primary"></ion-icon>
          <ion-label>{{page.title}}</ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>

EDIT: I found the “breaking changes” GitHub page and changed detail-none to detail="false". This fixes the greater than/right arrow issue.

EDIT 2: I was looking at the GitHub Docs that noted there was a lines attribute with three possible values: full (default), inset, and none. I’ve tried all three, but Ionic DevApp doesn’t change the display of my menu items at all. It seems that this setting has no effect in the Ionic DevApp.

#2
@Prop() lines?: 'full' | 'inset' | 'none';

from here: https://github.com/ionic-team/ionic/blob/master/core/src/components/item/item.tsx

#3

Check out my Edit 2.

I found this in the docs, but the setting changes nothing in the Ionic DevApp. Is this a bug?

#4

It looks as though it is supposed to work. The hostData function provides style attributes to the render function, and lines appears to be used correctly inside hostData. You’re saying that you are using lines="none" inside ion-item, and there are still lines? Is this true in the browser also?

#5

Ummm, apparently, that attribute must be applied to the ion-list instead of the ion-item within the list. Once I applied that attribute to the list, the lines were gone.

I think the documentation needs to be updated or the code needs to be corrected. I’ve opened a GitHub Issue.

Here’s the updated (working) app.component.html:

<ion-app>
  <ion-split-pane>
    <ion-menu type="overlay">
      <ion-header>
        <ion-toolbar>
          <ion-title>
            Menu
          </ion-title>
        </ion-toolbar>
      </ion-header>
      
      <ion-content padding>
        <ion-list lines="none">
          <ion-menu-toggle *ngFor="let page of appPages">
            <ion-item detail="false" [routerLink]="page.url" [routerDirection]="'root'">
              <ion-icon slot="start" [name]="page.icon" color="primary"></ion-icon>
              <ion-label>{{page.title}}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>
#6

FWIW that’s the same as the behavior in Ionic 3. Though I agree that the Ionic 4 documentation needs to be much better.

Just FYI: I barely look at Ionic 4 docs at all right now, just the source code. I assume the docs are wrong, or at least in a state of flux.