Ionic 2 如何设置 <ion-item> 窗口的样式答案

【问题标题】：Ionic 2 How to style <ion-item> windowIonic 2 如何设置 <ion-item> 窗口的样式
【发布时间】：2017-12-14 20:33:30
【问题描述】：

所以我一直在尝试设置每当我按下它时弹出的“”窗口的样式。所以我的 HTML 代码是这样的：

page-about {
  
}

<!--HTML about.html -->
  <ion-item>
  <ion-label>Toppings</ion-label>
  <ion-select [(ngModel)]="toppings">
    <ion-option>Bacon</ion-option>
    <ion-option>Black Olives</ion-option>
    <ion-option>Extra Cheese</ion-option>
    <ion-option>Mushrooms</ion-option>
    <ion-option>Pepperoni</ion-option>
    <ion-option>Sausage</ion-option>
  </ion-select>
</ion-item>

我有点想减少弹出窗口的宽度和高度。谢谢你的帮助。

【问题讨论】：

我只需在 chrome 开发者工具栏中打开页面，找到相关的标签来改变风格。

标签： html css angular ionic-framework ionic2

【解决方案1】：

你可以试试这个

<ion-select [(ngModel)]="toppings" class="selectClass">
    <ion-option>Bacon</ion-option>
    <ion-option>Black Olives</ion-option>
    <ion-option>Extra Cheese</ion-option>
    <ion-option>Mushrooms</ion-option>
    <ion-option>Pepperoni</ion-option>
    <ion-option>Sausage</ion-option>
  </ion-select>

在你的 .sass 文件中添加这个

.selectClass {
    max-width:100px !important;
}

【讨论】：