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

Question

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

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

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

Answer 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;
}

Answer 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);
  }

}