具有弹出式界面的造型离子选择-前端问题

Styling ion-select with popover interface(具有弹出式界面的造型离子选择)

本文介绍了具有弹出式界面的造型离子选择的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

<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-OPTION，我都可以使用...。

推荐答案

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

ion-select内部有弹出窗口包装，实际上我们需要根据需要设置样式。

实现您提到的目标。

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

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

您将同时获得ios和md的以下内容。

注意：使用媒体查询执行相同的操作并调整宽度，这样在平板电脑和iPad上看起来就不会很笨拙。

这篇关于具有弹出式界面的造型离子选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！