离子3 - 离子选择 - 造型帮助 - 图标和线条-Java 学习之路

在尝试实现特定的选择设计之后（参见另一个线程上的上一个帮助：Ionic 3 - Dropdown Select）我已经决定尝试使用离子提供的离子选择 .

这是我到目前为止：Current Design

有谁知道如何删除： - 每个选项下的行 - 无线电图标

以及如何在select下拉列表中添加一个子 Headers ，其中"My Filters"是子 Headers ：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>

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

希望这有助于以任何方式获得它想要的一点点

回复于 2024-04-27T16:55:20+08:00

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

1 回答

相关问题