Question

尝试实施特定的选择设计后（请参阅另一个主题上的上一个帮助：Ionic 3 - Dropdown Select）我已决定尝试使用离子提供的离子选择。

这是我到目前为止所做的： Current Design

有谁知道如何删除： - 每个选项下的行 - 收音机图标

如何在select下拉列表中添加一个子标题，其中“My Filters”是子标题： enter image description here

我尝试过没有运气的无线路，并尝试更改弹出窗口的模式以删除无线电图标，也没有运气。任何帮助都会很棒。

到目前为止我的代码：

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

希望这可以以任何方式帮助您将其稍微变一些

离子3 - 离子选择 - 造型帮助 - 图标和线条

1 个答案: