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

Posted 2023-03-06

【中文标题】带有弹出界面的离子选择样式

【英文标题】：Styling ion-select with popover interface

【发布时间】：2020-05-03 20:22:54

【问题描述】：

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

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

【参考方案1】：

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

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

为了实现你所提到的。

您需要在global.scss 中为popover-content 添加一些样式

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

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

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

【讨论】：

有没有办法做到这一点而不把它放在全局中？这将影响所有弹出窗口，对吗？如果我只想更改这个特定的怎么办？

能否分享完整的 CSS。你是怎么改字体的？我想更改弹出文本的字体颜色，但如果我将它放在 popover-content 中，它就不起作用

【参考方案2】：

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

模板.html：

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

global.scss：

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

【参考方案3】：

你可以用 css 管理这个

.popover-content
  width: 95%

【讨论】：

这仅在我将其放入全局时才有效。有没有办法在不把它放在全局中的情况下做到这一点？

是的，您可以将其添加到特定页面的 css 文件或 app.component.scss 文件中。我检查它正在工作