diff --git a/src/app/generated/projects/ionic-theme-ios26.en.generated.ts b/src/app/generated/projects/ionic-theme-ios26.en.generated.ts index 54908d1..9b90093 100644 --- a/src/app/generated/projects/ionic-theme-ios26.en.generated.ts +++ b/src/app/generated/projects/ionic-theme-ios26.en.generated.ts @@ -75,8 +75,13 @@ export const PROJECT = { "file": "using-ion-item-group.md", "section": "Guides", "path": "/projects/ionic-theme-ios26/docs/using-ion-item-group", - "html": "

Most Ionic markup works without changes. When an ion-list uses inset=\"true\", wrap its items in ion-item-group and keep ion-list-header outside the group.

\n

The examples use framework-neutral Web Component markup. In React or Vue, use the equivalent component and property syntax.

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

No wrapper is required for lists that do not use inset=\"true\".

\n

Why the wrapper is required

\n

Ionic normally gives ion-list its background, which makes ion-list-header appear inside the same surface as the items. The iOS 26 layout treats the header and item surface separately.

\n

\"Inset

\n

The theme therefore:

\n\n

Sharing the markup with Material Design

\n

@rdlabo/ionic-theme-md3 supports the same grouped markup, so one template can be used for both Ionic modes.

\n

When an application uses this package without @rdlabo/ionic-theme-md3, import the optional stylesheet to apply the same grouped layout in Material mode:

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

For two-line items and section-header groups, see Special markup and classes.

\n", + "html": "

Most Ionic markup works without changes. When an ion-list uses inset=\"true\", wrap its items in ion-item-group and keep ion-list-header outside the group.

\n

The examples use framework-neutral Web Component markup. In React or Vue, use the equivalent component and property syntax.

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

No wrapper is required for lists that do not use inset=\"true\".

\n

Checking Angular templates

\n

In Ionic Angular applications, the @rdlabo/rules/require-ion-item-group ESLint rule checks that each ion-item in an ion-list is wrapped by the group component that matches its behavior. The rule is included in the recommended preset and can automatically fix some violations.

\n

Why the wrapper is required

\n

Ionic normally gives ion-list its background, which makes ion-list-header appear inside the same surface as the items. The iOS 26 layout treats the header and item surface separately.

\n

\"Inset

\n

The theme therefore:

\n\n

Sharing the markup with Material Design

\n

@rdlabo/ionic-theme-md3 supports the same grouped markup, so one template can be used for both Ionic modes.

\n

When an application uses this package without @rdlabo/ionic-theme-md3, import the optional stylesheet to apply the same grouped layout in Material mode:

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

For two-line items and section-header groups, see Special markup and classes.

\n", "headings": [ + { + "id": "checking-angular-templates", + "text": "Checking Angular templates", + "level": 2 + }, { "id": "why-the-wrapper-is-required", "text": "Why the wrapper is required", diff --git a/src/app/generated/projects/ionic-theme-ios26.ja.generated.ts b/src/app/generated/projects/ionic-theme-ios26.ja.generated.ts index 659b7eb..0d3a0da 100644 --- a/src/app/generated/projects/ionic-theme-ios26.ja.generated.ts +++ b/src/app/generated/projects/ionic-theme-ios26.ja.generated.ts @@ -75,8 +75,13 @@ export const PROJECT = { "file": "using-ion-item-group.md", "section": "ガイド", "path": "/projects/ionic-theme-ios26/docs/using-ion-item-group", - "html": "

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

\n

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

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

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

\n

wrapperが必要な理由

\n

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

\n

\"ion-item-groupが必要な理由を示すinset

\n

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

\n\n

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

\n

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

\n

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

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

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

\n", + "html": "

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

\n

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

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

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

\n

Angular templateでの検査

\n

Ionic Angularアプリケーションでは、@rdlabo/rules の require-ion-item-group ruleを使うと、ion-list 内の ion-item が対応するgroup componentで囲まれていることをESLintで検査できます。このruleはrecommended presetに含まれ、一部の問題は自動修正できます。

\n

wrapperが必要な理由

\n

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

\n

\"ion-item-groupが必要な理由を示すinset

\n

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

\n\n

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

\n

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

\n

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

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

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

\n", "headings": [ + { + "id": "angular-template%E3%81%A7%E3%81%AE%E6%A4%9C%E6%9F%BB", + "text": "Angular templateでの検査", + "level": 2 + }, { "id": "wrapper%E3%81%8C%E5%BF%85%E8%A6%81%E3%81%AA%E7%90%86%E7%94%B1", "text": "wrapperが必要な理由", diff --git a/src/app/generated/projects/ionic-theme-md3.en.generated.ts b/src/app/generated/projects/ionic-theme-md3.en.generated.ts index 5087453..de8a75b 100644 --- a/src/app/generated/projects/ionic-theme-md3.en.generated.ts +++ b/src/app/generated/projects/ionic-theme-md3.en.generated.ts @@ -114,8 +114,13 @@ export const PROJECT = { "file": "using-ion-item-group.md", "section": "Guides", "path": "/projects/ionic-theme-md3/docs/using-ion-item-group", - "html": "

The MD3 theme uses the same inset-list structure as @rdlabo/ionic-theme-ios26, allowing one template to work across Ionic modes. When an ion-list uses inset=\"true\", wrap its items in ion-item-group and keep ion-list-header outside the group.

\n

The examples use framework-neutral Web Component markup. In React or Vue, use the equivalent component and property syntax.

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

No wrapper is required for lists that do not use inset=\"true\".

\n

Why the wrapper is required

\n

The shared structure keeps ion-list-header separate from the item surface. This matches the iOS 26 layout while allowing MD3 to style the same markup without platform-specific templates.

\n

The theme therefore:

\n\n

For two-line items and section-header groups, see Special markup.

\n", + "html": "

The MD3 theme uses the same inset-list structure as @rdlabo/ionic-theme-ios26, allowing one template to work across Ionic modes. When an ion-list uses inset=\"true\", wrap its items in ion-item-group and keep ion-list-header outside the group.

\n

The examples use framework-neutral Web Component markup. In React or Vue, use the equivalent component and property syntax.

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

No wrapper is required for lists that do not use inset=\"true\".

\n

Checking Angular templates

\n

In Ionic Angular applications, the @rdlabo/rules/require-ion-item-group ESLint rule checks that each ion-item in an ion-list is wrapped by the group component that matches its behavior. The rule is included in the recommended preset and can automatically fix some violations.

\n

Why the wrapper is required

\n

The shared structure keeps ion-list-header separate from the item surface. This matches the iOS 26 layout while allowing MD3 to style the same markup without platform-specific templates.

\n

The theme therefore:

\n\n

For two-line items and section-header groups, see Special markup.

\n", "headings": [ + { + "id": "checking-angular-templates", + "text": "Checking Angular templates", + "level": 2 + }, { "id": "why-the-wrapper-is-required", "text": "Why the wrapper is required", diff --git a/src/app/generated/projects/ionic-theme-md3.ja.generated.ts b/src/app/generated/projects/ionic-theme-md3.ja.generated.ts index f65c964..f7c2f8b 100644 --- a/src/app/generated/projects/ionic-theme-md3.ja.generated.ts +++ b/src/app/generated/projects/ionic-theme-md3.ja.generated.ts @@ -114,8 +114,13 @@ export const PROJECT = { "file": "using-ion-item-group.md", "section": "ガイド", "path": "/projects/ionic-theme-md3/docs/using-ion-item-group", - "html": "

MD3テーマは @rdlabo/ionic-theme-ios26 と同じinset list構造を使うため、Ionic modeをまたいで1つのtemplateを利用できます。ion-list で inset=\"true\" を使う場合は、itemを ion-item-group で囲み、ion-list-header はgroupの外に置きます。

\n

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

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

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

\n

wrapperが必要な理由

\n

共有構造では、ion-list-header をitemのsurfaceから分離します。これにより、platform固有のtemplateを用意せずに、iOS 26のlayoutとMD3のstyleを同じマークアップへ適用できます。

\n

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

\n\n

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

\n", + "html": "

MD3テーマは @rdlabo/ionic-theme-ios26 と同じinset list構造を使うため、Ionic modeをまたいで1つのtemplateを利用できます。ion-list で inset=\"true\" を使う場合は、itemを ion-item-group で囲み、ion-list-header はgroupの外に置きます。

\n

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

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

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

\n

Angular templateでの検査

\n

Ionic Angularアプリケーションでは、@rdlabo/rules の require-ion-item-group ruleを使うと、ion-list 内の ion-item が対応するgroup componentで囲まれていることをESLintで検査できます。このruleはrecommended presetに含まれ、一部の問題は自動修正できます。

\n

wrapperが必要な理由

\n

共有構造では、ion-list-header をitemのsurfaceから分離します。これにより、platform固有のtemplateを用意せずに、iOS 26のlayoutとMD3のstyleを同じマークアップへ適用できます。

\n

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

\n\n

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

\n", "headings": [ + { + "id": "angular-template%E3%81%A7%E3%81%AE%E6%A4%9C%E6%9F%BB", + "text": "Angular templateでの検査", + "level": 2 + }, { "id": "wrapper%E3%81%8C%E5%BF%85%E8%A6%81%E3%81%AA%E7%90%86%E7%94%B1", "text": "wrapperが必要な理由", diff --git a/src/ionic-theme-ios26/docs/ja/using-ion-item-group.md b/src/ionic-theme-ios26/docs/ja/using-ion-item-group.md index 01547dc..21faf8f 100644 --- a/src/ionic-theme-ios26/docs/ja/using-ion-item-group.md +++ b/src/ionic-theme-ios26/docs/ja/using-ion-item-group.md @@ -18,6 +18,10 @@ title: ion-item-groupの使用方法 `inset="true"` を使わないlistでは、このwrapperは不要です。 +## Angular templateでの検査 + +Ionic Angularアプリケーションでは、`@rdlabo/rules` の [`require-ion-item-group`](/eslint-plugin-rules/docs/rules/require-ion-item-group) ruleを使うと、`ion-list` 内の `ion-item` が対応するgroup componentで囲まれていることをESLintで検査できます。このruleはrecommended presetに含まれ、一部の問題は自動修正できます。 + ## wrapperが必要な理由 Ionicは通常、`ion-list` 自体に背景を設定するため、`ion-list-header` もitemと同じsurface内に表示されます。iOS 26のlayoutではheaderとitemのsurfaceを分離します。 diff --git a/src/ionic-theme-md3/docs/ja/using-ion-item-group.md b/src/ionic-theme-md3/docs/ja/using-ion-item-group.md index ada350c..30f3d2f 100644 --- a/src/ionic-theme-md3/docs/ja/using-ion-item-group.md +++ b/src/ionic-theme-md3/docs/ja/using-ion-item-group.md @@ -18,6 +18,10 @@ MD3テーマは `@rdlabo/ionic-theme-ios26` と同じinset list構造を使う `inset="true"` を使わないlistでは、このwrapperは不要です。 +## Angular templateでの検査 + +Ionic Angularアプリケーションでは、`@rdlabo/rules` の [`require-ion-item-group`](/eslint-plugin-rules/docs/rules/require-ion-item-group) ruleを使うと、`ion-list` 内の `ion-item` が対応するgroup componentで囲まれていることをESLintで検査できます。このruleはrecommended presetに含まれ、一部の問題は自動修正できます。 + ## wrapperが必要な理由 共有構造では、`ion-list-header` をitemのsurfaceから分離します。これにより、platform固有のtemplateを用意せずに、iOS 26のlayoutとMD3のstyleを同じマークアップへ適用できます。