带有弹出界面的 ion-select 样式

Question

我正在创建一个带有弹出界面的 ion-select 元素。我想设计 ion-select-options 的样式，以便它们跨越屏幕的宽度，但我尝试过的任何方法都不起作用。

<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>

我想要 select 选项来跨越屏幕的宽度。如果列表中的任何文本比 select 选项长，我可以使用 ...。

Answer 1

您可以通过 css

进行管理

.popover-content{
  width: 95%
}

Answer 2

如果您使用 Inspect 查看开发者控制台。你会看到

ion-select 里面有 popover 包装器，实际上我们需要根据我们的要求设置样式。

实现你提到的目标。

您需要在 global.scss 中为 popover-content

添加一些样式

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

ios 和 md 您将获得以下信息。

注意：使用媒体查询执行相同操作并调整宽度，使其在平板电脑和 ipad 中看起来不会很尴尬。

Answer 3

这个解决方案并不完全理想，因为它仍然需要全局 css 范围，但它至少更具描述性、可重用性，并且不会像其他解决方案那样干扰基本弹出窗口功能。 .

template.html:

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

global.scss:

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

Answer 4

使用 CSS 阴影部分：

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

带有弹出界面的 ion-select 样式

Styling ion-select with popover interface

css

ionic-framework

angular

ionic4