Ionic 如何创建一个长方形离子晶圆厂按钮的宽度设置自动根据内容?

dbf7pr2w  于 2022-12-16  发布在  Ionic
关注(0)|答案(1)|浏览(147)

目前我使用的ion-fab-button如下:

<ion-fab-button size="small" [ngClass]="{'active-tab': currentTab === 'bookmarks'}">
   <ion-icon name="bookmark-outline"></ion-icon>
   <ion-text>Bookmarks</ion-text>
</ion-fab-button>

要显示以下内容,

我必须明确地指定ion-fab-button的宽度并覆盖--border-radius以获得椭圆形(也就是跑道形,而不是椭圆形)。

element.style {
   --border-radius: 20px;
   max-width: unset;
   min-width: unset;
   width: 120px;
}

我试着修改其他属性,比如display: inline-block之类的,但是我好像弄不明白。
如果不指定特定的宽度,您将如何在您的终端上实现相同的事情?由于标签(在ion-text中)的长度会发生变化,我需要宽度是动态的。

aiazj4mn

aiazj4mn1#

我认为使用 ion-fab-button 是不可能的。这个元素包含一个span,类为 button-inner,它设置了内容的绝对位置,并且据我所知,span不能被样式化,因为它在shadow-dom中,并且没有 part 属性。

相关问题