如何在离子上放置图标徽章？

Question

如何使用 ionic 和 scss 设计带有通知徽章且没有编号的卡片

如下制作不带编号的徽章

我有以下 scss 但它没有响应

<ion-card class="ion-margin-top">
     <ion-badge color="danger">1</ion-badge>
     <ion-icon name="settings-outline"></ion-icon>
     <ion-card-content>
       <span class="contentText">Configuration</span>
     </ion-card-content>
</ion-card>

ion-card {
   background: #fff;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin: 0;
 
   ion-icon {
     width: 75%;
     margin-top: 16px;
     font-size: 5em;
   }
   ion-badge {
       position: absolute;
       top: 20px;
       right: 50px;
       }
}

Answer 1

添加到 ion-badge css

z-index:100;

这会将徽章带到图标前面..

添加--color属性，它会改变文本的颜色，使其与背景颜色相同..

--background可用于指定徽章的背景颜色。

Reference Docs