Question

我有一个离子选择，只有几个选项，我使用[selectOptions]给出一个标题，有没有办法定义一个CSS，这样我就可以设置背景颜色到标题，按钮对齐，并添加一个图标到标题

 <ion-select [selectOptions]="daysOptions" #selectDays="ngModel" required name="selectedDay" [(ngModel)]="selectDay" >
         <ion-option *ngFor="let day of Days;" [value]="day.val">{{day.name}}</ion-option>
 </ion-select>

有人可以帮助我

Answer 1

是的，您可以在选项中使用cssClass：

// In your component
daysOptions = {
    cssClass: 'my-class',
    ...,
}

然后在css中你可以做你想做的事，例如：

.my-class .alert-wrapper {
    max-width: 94% !important;
}

感谢离子文档：https://ionicframework.com/docs/api/components/alert/AlertController/#advanced

Answer 2

我几个月前需要一个颜色选择器，但我找不到任何颜色选择器。唯一的方法是使用自定义CSS。我尝试将CSS类添加到ion-select和ion-option中，但这些类不会反映在生成的输出中。因此，将自定义CSS应用于离子选择和离子选项的唯一方法是使用父元素和一些JS。

您可以检查以下逻辑： HTML： https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.html

TS： https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.ts

SCSS： https://github.com/ketanyekale/ionic-color-and-image-selector/blob/master/src/pages/home/home.scss

Answer 3

您现在可以轻松解决此问题

添加至离子选择元素：

[interfaceOptions]="{cssClass: 'my-class'}"

添加到CSS：

.my-class .alert-wrapper {
    max-width: 94% !important;
}

添加自定义样式以进行离子选择

3 个答案: