在Ionic 6中修改离子 accordion 的图标大小和颜色

f2uvfpb9 于 2023-03-27 发布在 Ionic

关注(0)|答案(3)|浏览(139)

我正在尝试使用Ionic 6中的新ion-accordion实现菜单。
文档中说当我们在header插槽中使用ion-item时，会自动添加一个ion-icon。他们提供了一个组件属性来更改图标名称，甚至使用自定义图标（不是ion-icon），但文档中没有提到如何更改默认图标的大小和颜色。

<ion-accordion-group>
 <ion-accordion>
     <ion-item slot="header">
         <ion-label>
             Home
         </ion-label>
     </ion-item>
 </ion-accordion>
</ion-accordion-group>

我试过

ion-accordion-group {

  ion-accordion {

    ion-item {

      // Attempt 1
      ion-icon {
        // Note. The default icon has this class
        &.ion-accordion-toggle-icon {
          font-size: 128px !important;
          color: red;
        }
      }

      // Attempt 2
      ion-icon[slot="end"] {
        font-size: 128px;
        color: red;
      }

    }

    // Attempt 3
    ion-item[slot="header"] {
        ion-icon[slot="end"] {
          font-size: 128px;
          color: red;
        }
    }

  }

}

我想更改ion-accordion提供的默认图标的大小和颜色。
任何帮助或建议将不胜感激。

ionic-framework

来源：https://stackoverflow.com/questions/71229819/modify-icon-size-and-color-of-ion-accordion-in-ionic-6

3条答案

按热度按时间

eanckbw91#

检查此工作URL：https://stackblitz.com/edit/ionic6-angular13-jvsxxr?file=src/styles.css
在styles.scss或global.scss文件中应用以下代码

ion-accordion-group{
    ion-accordion {
        .ion-accordion-toggle-icon {
            font-size: 50px;
            color: red;
        }
    }
}

赞(0）回复(0）举报 2023-03-27

7kqas0il2#

如果你不使用scss，你可以在你的样式中使用它。css：

.ion-accordion-toggle-icon{
  font-size: 50px;
  color: red;
}

它也起作用了。

赞(0）回复(0）举报 2023-03-27

aiazj4mn3#

最好的方法是通过扭曲一个div来完全控制你的组件，并创建你自己的IonItem：

<IonAccordionGroup value="completed">
  <IonAccordion value="completed"> 
    <div slot="header">
       <IonItem button lines="none">
           You can put any icon and anything here
       </IonItem>
    </div>
  </IonAccordion>
</IonAccordionGroup>

赞(0）回复(0）举报 2023-03-27

我来回答

在Ionic 6中修改离子 accordion 的图标大小和颜色

3条答案

相关问题

热门标签

最新问答