带有弹出界面的样式离子选择

Question

我正在创建一个带有弹出界面的离子选择元素。我想设置 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>

我希望选择选项跨越屏幕的宽度。...如果列表中的任何文本比选择选项长，我可以接受。

Answer 1

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

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

为了实现你所提到的。

你需要在你的global.scssfor 中添加一些样式popover-content

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

您将获得以下两个ios和md.

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

Answer 2

使用时interface="popover"可以使用ion-popover来设置嵌套的界面选项[interfaceOptions]="..."。要以全角显示选择选项，请使用size: 'cover'：

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

有关更多选项，请参阅https://ionicframework.com/docs/api/popover#interfaces 。