Ionic-4 轮选择器/选择器按钮 css 自定义

Posted 2023-02-22

【中文标题】Ionic-4 轮选择器/选择器按钮 css 自定义

【英文标题】：Ionic-4 wheel picker/selector buttons css customization

【发布时间】：2019-08-16 13:03:53

【问题描述】：

我在设置选轮按钮和分隔线的样式时遇到了困难。 我想更改按钮和线条的默认颜色，但看不到任何自定义方式。

有没有办法像我们在 ionic-alert-controller 中那样自定义它的样式。

任何回应都会有很大帮助。 :P

【参考方案1】：

您可以使用 cssClass 属性单独自定义按钮

let options: PickerOptions = 
      mode: 'ios',
      buttons: [
        
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'cancel-button'
        ,
        
          text: 'Okay',
          cssClass: 'okay-button',
          handler: (val: any) => 
            console.log(val)
          
        
      ],
      columns: [....]
      ],
      cssClass: 'picker-style'
    ;

并在 global.scss 文件中定义 css 类，如...

.cancel-button 
  color: red;


.okay-button 
  color: blue;

【参考方案2】：

我也遇到过这个问题。 基本上，您需要做的是在创建选择器时将类名传递给“cssClass”属性

const p = await this.pickerCtrl.create(
  columns : [
    ...
  ],
  buttons : [
    ...
  ],
  cssClass : 'pickerClassName'
);

在 Ionic 文档中，您可以找到可以输入此类的 css 属性列表： https://ionicframework.com/docs/api/picker#css-custom-properties

现在的问题是，在该列表中没有用于定义文本颜色的属性，所以我深入研究了元素结构并按如下方式进行了操作：

在我的“app.scss”中：

// Set the "secondary" color to the picker
.pickerClassName

  // Border color (from the docs)
  --border-color: var(--ion-color-secondary);

  // Buttons color
  .picker-button 
    color : var(--ion-color-secondary);
  

  // Options color
  .picker-opt 
    color : var(--ion-color-secondary);
  

  // Selected option color
  .picker-opt-selected 
    color : var(--ion-color-secondary);
  

  // Prefix color
  .picker-prefix 
    color : var(--ion-color-secondary);
  

【讨论】：

有一个选项可以为每个按钮和列定义 CSS 类，但我不知道 css 属性是什么