本文介绍了具有弹出式界面的造型离子选择的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个带有弹出界面的离子选择元素。我希望设置离子选择选项的样式，使其跨越整个屏幕的宽度，但我尝试的所有选项都不起作用。
<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>
...。
推荐答案
如果您使用Inspect查看开发人员控制台。您将看到
ion-select内部有弹出窗口包装，实际上我们需要根据需要设置样式。
实现您提到的目标。
您需要在global.scsspopover-content的global.scss中添加一些样式
:root {
.popover-content {
left: 0 !important;
width: 100%;
}
}
您将同时获得ios和md的以下内容。
注意：使用媒体查询执行相同的操作并调整宽度，这样在平板电脑和iPad上看起来就不会很笨拙。
这篇关于具有弹出式界面的造型离子选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！