主页 / coding / 问题 / 79332721
Accepted
jacob
Asked: 2025-01-06 18:12:27 +0800 CST

如何使用阴影部分设计 Ionic 组件

  • 772

我创建了一个带有弹出窗口的按钮，如下所示： 在此处输入图片描述

以下是 Vue 模板代码：

<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>

不幸的是，最后一项（Espanol）有一个我想删除的底部边框。在 Chrome Inspector 中，我可以这样做： 在此处输入图片描述

之后看起来好多了： 在此处输入图片描述

但我不知道如何在代码中设计它来实现这一点。我试过：

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

以及一堆其他变体，但都不起作用。如何删除样式div.item-inner以删除底部边距？

谢谢。

css

1 个回答

  1. Best Answer

    修复此问题很简单，只需查看文档，它会向您展示如何在没有额外 CSS 的情况下执行此操作。

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

相关问题