ion 3- ion-select - styling帮助-图标和线条

Question

在尝试实现特定的select设计之后(请参阅另一个线程上的帮助：Ionic 3 - Dropdown Select)，我决定尝试并使用ionic提供的离子选择。

这就是我目前所拥有的：Current Design

有人知道如何删除：-每个选项下的线条-单选图标

以及如何在select下拉列表中添加子标题，其中"My Filters“为子标题：enter image description here

我尝试了no -line，但没有成功，并尝试更改弹出窗口的模式，以删除无线图标，但也没有成功。任何帮助都是最好的。

到目前为止我的代码如下：

    <ion-grid *ngIf="toggled">
  <ion-row>
    <ion-col col-4>
      <ion-item>
        <ion-label stacked>Filter</ion-label>
        <ion-select interface="popover">
          <ion-option>Inbox</ion-option>
          <ion-option>Today</ion-option>
          <ion-option>Next 7 Days</ion-option>
          <ion-option>Overdue</ion-option>
          <ion-option>Watching</ion-option>
          <ion-option>Favourites</ion-option>
          <ion-option>Tasks assigned to</ion-option>
          <ion-option>Tasks I've assigned</ion-option>
        </ion-select>
      </ion-item>
    </ion-col>
    <ion-col col-4>
      <ion-item>
        <ion-label stacked>Due Date</ion-label>
        <ion-select interface="popover">
          <ion-option>Priority</ion-option>
          <ion-option>Status</ion-option>
        </ion-select>
      </ion-item>
    </ion-col>
    <ion-col col-4>
      <ion-item>
        <ion-label stacked>Order</ion-label>
        <ion-select interface="popover">
          <ion-option>Descending</ion-option>
          <ion-option value="20">Ascending</ion-option>
        </ion-select>
      </ion-item>
    </ion-col>
  </ion-row>
</ion-grid> 

Answer 1

最终并没有找到解决方案。我必须对CSS使用不同的方法，如下拉列表中的一个示例所示：

<ion-col col-4 text-center>
  <div class="dropdown">
    <span class="flex-content">
      <button ion-button icon-only clear (click)="toggleFilter()" *ngIf="!toggledFilter || toggledFilter" class="filter-down">
        <!-- if filterCriteria is false (not present) then present 'Filter' -->
        <p class="filter-text">{{filterCriteria || 'Filter'}}</p>
        <!-- icons change based on down or up if the drop down is open -->
        <ion-icon [name]="!toggledFilter ? 'ios-arrow-down' : 'ios-arrow-up'" class="expand-icon"></ion-icon>
      </button>
    </span>
    <ion-list no-lines class="dropdown-content" *ngIf="toggledFilter">
      <button ion-item (click)="filterCriteria = 'Inbox'; openFilterPage(pages[0])" class="filter-text background-text">Inbox</button>
      <button ion-item (click)="filterCriteria = 'Today'; openFilterPage(pages[1])" class="filter-text background-text">Today</button>
      <button ion-item (click)="filterCriteria = 'Next 7 days'; openFilterPage(pages[2])" class="filter-text background-text">Next 7 days</button>
      <button ion-item (click)="filterCriteria = 'Overdue'; openFilterPage(pages[3])" class="filter-text background-text">Overdue</button>
      <button ion-item (click)="filterCriteria = 'Watching'; openFilterPage(pages[4])" class="filter-text background-text">Watching</button>
      <button ion-item (click)="filterCriteria = 'Favourites'; openFilterPage(pages[5])" class="filter-text background-text">Favourites</button>
      <p class="dropdown-heading">My Filters</p>
      <button ion-item (click)="filterCriteria = 'Tasks assigned to'; closeFilter()" class="filter-text background-text">Tasks assigned to</button>
      <button ion-item (click)="filterCriteria = 'Tasks I\\'ve assigned'; closeFilter()" class="filter-text background-text">Tasks assigned by me</button>
    </ion-list>
  </div>
</ion-col>

以及它的CSS：

.dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 140px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 10px 10px;
    z-index: 1000;
  }

  .dropdown-heading {
    font-weight: bold;
    color: map-get($theme-color, sub-text);
    font-size: 15px;
    border-bottom: 1px solid #DFE0E3;
    margin-bottom: 0;
    padding-bottom: 5px;
    padding-left: 1em;
    text-align: left;
  }

希望这能以任何方式帮助它稍微得到想要的东西。