Ionic 如何更改离子弹出框的宽度

kjthegm6 于 2022-12-08 发布在 Ionic

关注(0)|答案(4)|浏览(170)

我已经创建了离子弹出窗口。创建了一个弹出窗口页面，并添加了操作按钮点击显示弹出窗口从主页。但我无法改变弹出窗口的宽度。下面是代码;

- 主页. html：**

<ion-content>
  <ion-button expand="full" (click)="openPopover($Event)">Open popover</ion-button>
</ion-content>

- 主页. ts：**

async openPopover(ev: Event) {
 const popover = await this.popoverController.create({
   component:PopoverPage,
   componentProps: {
     custom_id: this.value
   },  
 });
 popover.present();    
}

- 弹出页面. html：**

<ion-content>
  <ion-list>
    <ion-item>
      this is popover
    </ion-item>
    <ion-item button color="danger" (click) = "closePopover()">
      <ion-icon name="close" slot="start"></ion-icon>
      Close Popover
    </ion-item>
  </ion-list>
</ion-content>

- 弹出页面. ts：**

closePopover() {
  this.popoverController.dismiss();
}

请协助我如何改变弹出窗口的宽度，因为我试图添加自定义CSS到弹出窗口页面的离子内容，但它不工作。

ionic-framework

来源：https://stackoverflow.com/questions/57671834/how-to-change-the-width-of-the-ionic-popover

4条答案

按热度按时间

11dmarpk1#

- 其他方法不适用，需要进行以下更改：**

首先，.contact-popover .popover-content{ width: 320px; }内容必须在global.scss中
"这意味着任何自定义样式都需要放在全局样式表文件中。在Ionic Angular启动程序中，这可以是src/global. scss文件，或者您可以通过添加到angular.json中的样式构建选项来注册新的全局样式文件。"（says in documentation）
第二，CSS不能是width，它需要是--width。https://ionicframework.com/docs/api/popover

赞(0）回复(0）举报 2022-12-08

kqhtkvqz2#

two ways:
override the SCSS variables;

$popover-md-width: 320px; $popover-ios-width: 320px; $popover-wp-width: 320px;

or 2. give your popover a class:

let popover = this.popover.create(ContactPopover, {}, {cssClass: 'contact-popover'})

and then style the .popover-content:

.contact-popover .popover-content{ width: 320px; }

Ionic automatically calculates the correct position for your custom width popover.

赞(0）回复(0）举报 2022-12-08

w3nuxt5m3#

可以在全局级别修改离子^4弹出窗口宽度，将以下内容添加到 styles.scss 文件：

ion-popover {
    --width: 320px;
}

赞(0）回复(0）举报 2022-12-08

xxslljrj4#

对于离子型6.x，溶液为

ion-popover {
  &::part(content) {
    min-width: 230px;
  }
}

赞(0）回复(0）举报 2022-12-08

我来回答

Ionic 如何更改离子弹出框的宽度

4条答案

相关问题

热门标签

最新问答