メインコンテンツまでスキップ
Version: v6

ion-select-option

shadow

コンテンツ

Select Optionsは、Selectの子要素となるコンポーネントです。定義された各オプションは、Selectダイアログに渡され表示されます。詳しくは、Select docs を参照してください。

カスタマイズ

ion-select の子要素として追加された各 ion-select-option コンポーネントは、ダイアログに表示するためにインターフェースに渡されます。ここで重要なことは、 ion-select-option 要素自体はビューから隠されているということです。つまり、この要素にスタイルを設定しても、ダイアログのオプションに影響を与えることはありません。

/* DOES NOT work */
ion-select-option {
color: red;
}

その代わりに、各インターフェイスオプションは .select-interface-option というクラスを持っており、スタイルを設定することができます。オーバーレイはスコープされたコンポーネントであるため、セレクタはそれ自体では動作せず、カスタム cssClass をインターフェイスに渡すことが推奨されることを覚えておいてください。

/* This will NOT work on its own */
.select-interface-option {
color: red;
}

/*
* "my-custom-interface" needs to be passed in through
* the cssClass of the interface options for this to work
*/
.my-custom-interface .select-interface-option {
color: red;
}
note

Note: いくつかのインターフェースは、オプションのレンダリング方法によって、より詳細なスタイリングを必要とします。これに関する詳細な情報については、使用法を参照してください。

オプションは、インターフェイスオプションに渡される ion-select-option に独自のクラスを追加することで、個別にスタイルを設定することができます。オプションに独自のクラスを設定する例については、以下の 使い方セクションを参照してください。

使い方

<ion-item>
<ion-label>Select</ion-label>
<ion-select>
<ion-select-option value="brown">Brown</ion-select-option>
<ion-select-option value="blonde">Blonde</ion-select-option>
<ion-select-option value="black">Black</ion-select-option>
<ion-select-option value="red">Red</ion-select-option>
</ion-select>
</ion-item>

Customizing Options

<ion-item>
<ion-label>Select: Alert Interface</ion-label>
<ion-select class="custom-options">
<ion-select-option value="brown">Brown</ion-select-option>
<ion-select-option value="blonde">Blonde</ion-select-option>
<ion-select-option value="black">Black</ion-select-option>
<ion-select-option value="red">Red</ion-select-option>
</ion-select>
</ion-item>

<ion-item>
<ion-label>Select: Alert Interface (Multiple Selection)</ion-label>
<ion-select class="custom-options" multiple="true">
<ion-select-option value="brown">Brown</ion-select-option>
<ion-select-option value="blonde">Blonde</ion-select-option>
<ion-select-option value="black">Black</ion-select-option>
<ion-select-option value="red">Red</ion-select-option>
</ion-select>
</ion-item>

<ion-item>
<ion-label>Select: Popover Interface</ion-label>
<ion-select interface="popover" class="custom-options">
<ion-select-option value="brown">Brown</ion-select-option>
<ion-select-option value="blonde">Blonde</ion-select-option>
<ion-select-option value="black">Black</ion-select-option>
<ion-select-option value="red">Red</ion-select-option>
</ion-select>
</ion-item>

<ion-item>
<ion-label>Select: Action Sheet Interface</ion-label>
<ion-select interface="action-sheet" class="custom-options">
<ion-select-option value="brown">Brown</ion-select-option>
<ion-select-option value="blonde">Blonde</ion-select-option>
<ion-select-option value="black">Black</ion-select-option>
<ion-select-option value="red">Red</ion-select-option>
</ion-select>
</ion-item>
/* Popover Interface: set color for the popover using Item's CSS variables */
.my-custom-interface .select-interface-option {
--color: #971e49;
--color-hover: #79193b;
}

/* Action Sheet Interface: set color for the action sheet using its button CSS variables */
.my-custom-interface .select-interface-option {
--button-color: #971e49;
--button-color-hover: #79193b;
}

/* Alert Interface: set color for alert options (single selection) */
.my-custom-interface .select-interface-option .alert-radio-label {
color: #971e49;
}

/* Alert Interface: set color for alert options (multiple selection) */
.my-custom-interface .select-interface-option .alert-checkbox-label {
color: #971e49;
}

/* Alert Interface: set color for checked alert options (single selection) */
.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label {
color: #79193b;
}

/* Alert Interface: set color for checked alert options (multiple selection) */
.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label {
color: #79193b;
}
// Pass a custom class to each select interface for styling
const selects = document.querySelectorAll('.custom-options');

for (var i = 0; i < selects.length; i++) {
selects[i].interfaceOptions = {
cssClass: 'my-custom-interface'
};
};

Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for.

Customizing Individual Options

To customize an individual option, set a class on the ion-select-option:

<ion-item>
<ion-label>Select</ion-label>
<ion-select class="custom-options" interface="popover">
<ion-select-option value="brown" class="brown-option">Brown</ion-select-option>
<ion-select-option value="blonde">Blonde</ion-select-option>
<ion-select-option value="black">Black</ion-select-option>
<ion-select-option value="red">Red</ion-select-option>
</ion-select>
</ion-item>
/* Popover Interface: set color for the popover using Item's CSS variables */
.my-custom-interface .brown-option {
--color: #5e3e2c;
--color-hover: #362419;
}
// Pass a custom class to each select interface for styling
const select = document.querySelector('.custom-options');
select.interfaceOptions = {
cssClass: 'my-custom-interface'
};

プロパティ

disabled

DescriptionIf true, the user cannot interact with the select option. This property does not apply when interface="action-sheet" as ion-action-sheet does not allow for disabled buttons.
Attributedisabled
Typeboolean
Defaultfalse

value

DescriptionThe text value of the option.
Attributevalue
Typeany
Defaultundefined

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

No slots available for this component.