Ionic 使用弹出式界面设计离子选择

ejk8hzay 于 2022-12-09 发布在 Ionic

关注(0)|答案(5)|浏览(166)

我正在创建一个带有弹出窗口界面的离子选择元素。我想设置离子选择选项的样式，使它们跨越屏幕的宽度，但我所尝试的都不起作用。

<ion-header>
  <ion-toolbar>
        <ion-buttons slot="secondary">
                <ion-button>Cancel</ion-button>
              </ion-buttons>
              <ion-title>Messages</ion-title>
              <ion-buttons slot="primary">
                    <ion-button>Blah</ion-button>
                  </ion-buttons>
  </ion-toolbar>
  <ion-toolbar>
        <ion-select interface="popover" placeholder="Select an item">
                <ion-select-option value="nes">Lorem Ipsum is simply dummy text of the</ion-select-option>          
                <ion-select-option value="n64">Nintendo64</ion-select-option>
                <ion-select-option value="ps">Blah Blah Ipsum is simply dummy text of the</ion-select-option>
                <ion-select-option value="genesis">Sega Genesis</ion-select-option>
        </ion-select>
  </ion-toolbar>
</ion-header>

我希望选择选项可以横跨整个屏幕。如果列表中的任何文本比选择选项长，我可以使用...。

ionic-framework

来源：https://stackoverflow.com/questions/59779013/styling-ion-select-with-popover-interface

5条答案

按热度按时间

vsnjm48y1#

如果使用Inspect查看开发人员控制台，您将看到

ion-select里面有popover Package 器，实际上我们需要根据我们的要求来设计样式。
实现你所提到的目标。
您需要在global.scss中为popover-content添加一些样式

:root {
    .popover-content {
        left: 0 !important;
        width: 100%;
    }
}

对于ios和md，您将得到以下结果。

**注：**使用媒体查询执行相同操作，并调整宽度，以便在平板电脑和iPad中不会显得笨拙。

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

ygya80vv2#

这个解决方案并不完全理想，因为它仍然需要全局css作用域，但它至少有更多的描述性，可重用性，并且不像其他解决方案那样干扰基本弹出功能...
template.html:

<ion-select [interfaceOptions]="{ cssClass: 'popover-wide' }">

global.scss:

.popover-wide .alert-wrapper {
  width: 320px;
}

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

b4lqfgs43#

使用CSS阴影部件：

ion-popover::part(content) {
  --width: 95%;
}

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

vshtjzan4#

When you use interface="popover" you can set the nested ion-popover 's interface options with [interfaceOptions]="..." . To display the select options at full-width use size: 'cover' :

<ion-select interface="popover" [interfaceOptions]="{size: 'cover'}">
</ion-select>

See https://ionicframework.com/docs/api/popover#interfaces for more options.

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

pgx2nnw85#

您可以使用css来管理这一点。

.popover-content{
  width: 95%
}

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

我来回答

Ionic 使用弹出式界面设计离子选择

5条答案

相关问题

热门标签

最新问答