Search code examples
ionic-frameworkionic5

Is it possible to defined ion-item attributes globally?

I'm using the Ionic Framework and I wonder if it's possible to defined global options for ion-item elements.

In .html files I got

<ion-item lines="none"></ion-item>

I would like every ion-item to have the "lines=nones". Is there a way to define it globally so that I could only use:

<ion-item></ion-item>
Solution

  • One way to achieve that would be by adding the following in the variables.scss file:

    ion-item {
  --inner-border-width: 0px;
}

    Although to be honest, if in the future you want to show an ion-item with lines it may be hard to remember/debug why the lines are not shown when adding an <ion-item></ion-item> to the view.

    So if the only difference is one attribute, I guess it'd be better to just be explicit and add lines="none" on each ion-item that you want to show without lines.

    <ion-item lines="none"></ion-item>
<ion-item lines="none"></ion-item>
...
<ion-item></ion-item>
<ion-item></ion-item>