cssionic-frameworkweb-componentshadow-domionic-vue

How to style Ionic component using shadow part


I created a button with a popover like this: enter image description here

Here is the Vue template code:

<template>
  <div :class="['lang-button', { 'in-list': listItem } ]">
    <k-button id="lang-button" :raised="!listItem" clear class="py-3 px-3">
      <font-awesome-icon icon="earth-americas" class="mr-2" />
      {{ $t('common.language') }}
    </k-button>
    <ion-popover trigger="lang-button" :dismiss-on-select="true">
      <ion-content class="lang-button-popover-content">
        <ion-list>
          <ion-item :button="true" :detail="false" @click="setLanguage('en')">English</ion-item>
          <ion-item :button="true" :detail="false" @click="setLanguage('es')">Español</ion-item>
        </ion-list>
      </ion-content>
    </ion-popover>
  </div>
</template>

Unfortunately, the last item (Espanol) has a bottom border I want to remove. In Chrome Inspector, I can do it: enter image description here

It looks better afterwards: enter image description here

But I'm not able to figure out how to style it in code to do that. I tried:

ion-item::part(native) {
  .item-inner {
    border-bottom-width: 0;
  }
}

and a bunch of other variations, and nothing works. How do you remove style that div.item-inner to remove that bottom margin?

Thanks.


Solution

  • To fix this issue is as simple as looking at the docs and it shows you how to do this without extra css.

    <ion-item lines="none">
     <ion-label>Item Lines None</ion-label>
    </ion-item>