Ionic (离子2)选择框内的分组标签

whlutmcx 于 2022-12-08 发布在 Ionic

关注(0)|答案(2)|浏览(162)

I need to create the multiple checkbox select box that have grouping label inside the box. Example
-Appetizer:
---Salad
---etc
-Main Course:
---Steak
---etc
-Desert:
---Ice Cream
---etc
This is my code:

<ion-select [(ngModel)]="food" multiple="true">
                        <ion-label>Toppings</ion-label> <!-- I want to create group label in here -->
                        <ion-option>Bacon</ion-option>
                        <ion-option>Black Olives</ion-option>
                        <ion-option>Extra Cheese</ion-option>
                        <ion-option>Mushrooms</ion-option>
                        <ion-option>Pepperoni</ion-option>
                        <ion-option>Sausage</ion-option>
 </ion-select>

How to create the grouping label inside the ion-select? Thanks..

ionic-framework

来源：https://stackoverflow.com/questions/38569761/ionic-2-grouping-label-inside-select-box

2条答案

按热度按时间

eivgtgni1#

一个很好的方法是将disabled标记添加到“label”中。
这将导致该选项不可选，然后可以向其添加类，以便根据需要调整外观。

<ion-select [(ngModel)]="food" multiple="true">
    <ion-option disabled>Toppings</ion-option>
    <ion-option>Bacon</ion-option>
    <ion-option>Black Olives</ion-option>
    <ion-option>Extra Cheese</ion-option>
    <ion-option>Mushrooms</ion-option>
    <ion-option>Pepperoni</ion-option>
    <ion-option>Sausage</ion-option>
 </ion-select>

赞(0）回复(0）举报 2022-12-08

prdp8dxp2#

我用它在爱奥尼克5/6
在.html文件中

<ion-select multiple class="group-select">
      <ion-select-option disabled class="option-group-custom"> -- EU Group 1 -- </ion-select-option>
      <ion-select-option>Add Knowledge</ion-select-option>
      <ion-select-option>Share Knowledge</ion-select-option>
      <ion-select-option>Other</ion-select-option>
      <ion-select-option disabled class="option-group-custom"> -- EU Group 2 -- </ion-select-option>
      <ion-select-option>Option 1</ion-select-option>
      <ion-select-option>Option 2</ion-select-option>
    </ion-select>

和global.scss中的文件

.option-group-custom {
  .alert-checkbox-icon {
    display: none;
  }

  .alert-checkbox-label {
    padding-left: 10px;
  }
}

赞(0）回复(0）举报 2022-12-08

我来回答

Ionic (离子2)选择框内的分组标签

2条答案

相关问题

热门标签

最新问答