ion-item-groupの使用方法

ほとんどのIonicマークアップは変更せずに使えます。ion-list で inset="true" を使う場合は、itemを ion-item-group で囲み、ion-list-header はgroupの外に置きます。

以下はframeworkに依存しないWeb Component形式のマークアップです。ReactまたはVueでは、各frameworkに対応するcomponentとpropertyの構文に置き換えてください。

<ion-list inset="true">
  <ion-list-header><ion-label>Connections</ion-label></ion-list-header>
  <ion-item-group>
    <ion-item>...</ion-item>
    <ion-item>...</ion-item>
  </ion-item-group>
</ion-list>

inset="true" を使わないlistでは、このwrapperは不要です。

ESLintでリストの構造を整える。

wrapperが必要な理由

Ionicは通常、ion-list 自体に背景を設定するため、ion-list-header もitemと同じsurface内に表示されます。iOS 27のlayoutではheaderとitemのsurfaceを分離します。

そのため、このテーマは次のようにstyleを適用します。

• inset ion-list の背景を透明にする
• itemのsurfaceを ion-item-group に適用する
• ion-list-header をsurfaceの外に置く

Material Designとのマークアップ共有

@rdlabo/ionic-theme-md3 も同じgroup構造に対応しているため、両方のIonic modeで1つのtemplateを共有できます。

このpackageを @rdlabo/ionic-theme-md3 なしで使うapplicationでは、Material modeにも同じgroup layoutを適用するため、任意のstylesheetをimportします。

@import '@rdlabo/ionic-theme-ios27/dist/css/md-ion-list-inset.css';

2行itemとsection header groupについては 特別なマークアップとクラス を参照してください。