Question

我正在构建一个离子应用程序，我想对离子选择器元素应用某些样式。为了帮助我说明我想要的是我目前所拥有的照片（对不起，但是图像内容是葡萄牙语）。

首先，我需要调整选项显示，以便我可以显示整个选项文本（如果可能，可能以两行显示，或者减小字体大小）。

第二，我想将两列分开。

这是我显示选择器的代码

async showFilters() {
    const columns = {
      activities: this.activities.map(obj => {
        return {text: obj.name, value: obj.id};
      }),
      districts: this.districts.map(obj => {
        return {text: obj.name, value: obj.name};
      })
    };
    columns.activities.unshift({text: 'Atividades', value: undefined});
    columns.districts.unshift({text: 'Distritos', value: undefined});
    const picker = await this.pickerController.create({
      columns: [
        {
          name: 'activity',
          options: columns.activities,
        },
        {
          name: 'district',
          options: columns.districts,
        },
      ],
      buttons: [
        {
          text: 'Cancelar',
          role: 'cancel'
        },
        {
          text: 'Confirmar',
          handler: (value) => {
            console.log(value);
          }
        }
      ],
      cssClass: 'picker',
    });
    return await picker.present();
  }

这是我正在测试以分隔两列的scss

.picker>ion-picker-column {
  margin-left: 1px solid #eeeeee;
}

反正我可以做什么吗？预先感谢。

Answer 1

尝试一下：

::ng-deep .picker.ion-picker-column {
   margin-left: 1px solid #eeeeee !important;
}

Answer 2

这是我用于自己的选择器的scss。您必须将基本组件的scss放置在app.scss文件中，而不是page.scss中。您不会想要这种外观，但是它将为您提供一个开始。

//PICKER
.picker-wrapper {
    background: var(--ion-color-primary) !important; // colors the highlight
    // --border-width: 1px 0 0;
    --border-width: 0;
    --border-color: var(--ion-inactive-on-red, var(--ion-inactive-on-red, var(--ion-inactive-on-red, #ffb3b3)));
}

// Picker Toolbar and Buttons

.picker-toolbar {
    background: var(--ion-color-primary-shade) !important; //buttons
    border-bottom: none !important;
}

.picker-button {
    border: 0;
    font-family: inherit;
    color: var(--ion-color-light) !important;
}

.picker-button {
    &:active,
    &:focus {
        outline: none;
    }
}

// Picker Column

.picker-col {
    display: flex;
    position: relative;
    flex: 1;
    justify-content: center;
    height: 100%;
    box-sizing: content-box;
    contain: content;
}

.picker-opts {
    position: relative;
    flex: 1;
    max-width: 100%;
    .picker-opt {
        font-size: 30px;
        color: #FFFFFF !important;
    }
}

.picker-above-highlight {
    border-bottom: 1px solid var(--ion-color-dark);
    background: linear-gradient( to bottom, var(--ion-color-dark) 20%, var(--ion-color-primary) 100%) !important;
    opacity: 0.6;
}

.picker-below-highlight {
    border-top: 1px solid var(--ion-color-dark);
    background: linear-gradient( to top, var(--ion-color-dark) 30%, var(--ion-color-primary) 100%) !important;
    opacity: 0.6;
}

如何将样式应用于离子选择器

2 个答案: