diff --git a/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png b/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png
index 5c2f1f0..413896e 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png and b/demo/e2e/screenshot.spec.ts-snapshots/item-list-dark.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/item-list.png b/demo/e2e/screenshot.spec.ts-snapshots/item-list.png
index e78802c..fd6f7c3 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/item-list.png and b/demo/e2e/screenshot.spec.ts-snapshots/item-list.png differ
diff --git a/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet.png b/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet.png
index 840e88d..5f68b2c 100644
Binary files a/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet.png and b/demo/e2e/screenshot.spec.ts-snapshots/modal-sheet.png differ
diff --git a/demo/src/app/index/pages/item-list/item-list.page.html b/demo/src/app/index/pages/item-list/item-list.page.html
index b5a7ef2..5a33071 100644
--- a/demo/src/app/index/pages/item-list/item-list.page.html
+++ b/demo/src/app/index/pages/item-list/item-list.page.html
@@ -37,6 +37,27 @@
item-list
Note additional information.
+
+ 保存
+
+
+ Item
+
+
+
+
+
+ Radio item1
+
+
+
+
+ Radio item2
+
+
+
+
+
Default List
diff --git a/demo/src/app/index/pages/item-list/item-list.page.ts b/demo/src/app/index/pages/item-list/item-list.page.ts
index c92098d..ed9e0f8 100644
--- a/demo/src/app/index/pages/item-list/item-list.page.ts
+++ b/demo/src/app/index/pages/item-list/item-list.page.ts
@@ -2,6 +2,8 @@ import { Component, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
+ IonAccordion,
+ IonAccordionGroup,
IonBackButton,
IonButtons,
IonContent,
@@ -13,6 +15,8 @@ import {
IonList,
IonListHeader,
IonNote,
+ IonRadio,
+ IonRadioGroup,
IonText,
IonTitle,
IonToolbar,
@@ -39,6 +43,10 @@ import {
IonListHeader,
IonNote,
IonButtons,
+ IonRadioGroup,
+ IonAccordionGroup,
+ IonAccordion,
+ IonRadio,
],
})
export class ItemListPage implements OnInit {
diff --git a/src/styles/components/ion-list.scss b/src/styles/components/ion-list.scss
index 3a5288b..fb6498d 100644
--- a/src/styles/components/ion-list.scss
+++ b/src/styles/components/ion-list.scss
@@ -17,27 +17,25 @@ ion-list.list-inset.ios:not(.ios26-disabled) {
$groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group;
- #{$groups} {
- &:not(:has(#{$groups})) {
- border-radius: 24px;
- overflow: hidden;
+ :is(#{$groups}):not(:is(#{$groups}) :is(#{$groups})) {
+ border-radius: 24px;
+ overflow: hidden;
- ion-item {
- // To draw lines inside
- --inner-padding-end: 0;
+ ion-item {
+ // To draw lines inside
+ --inner-padding-end: 0;
- &::part(native) {
- padding-right: calc(var(--ion-safe-area-right, 0px) + 18px);
- }
+ &::part(native) {
+ padding-right: calc(var(--ion-safe-area-right, 0px) + 18px);
+ }
- --min-height: 52px;
+ --min-height: 52px;
- & > ion-input[labelplacement='floating'] {
- transition: transform 200ms ease;
+ & > ion-input[labelplacement='floating'] {
+ transition: transform 200ms ease;
- &:not(.label-floating) {
- transform: translateY(-2px);
- }
+ &:not(.label-floating) {
+ transform: translateY(-2px);
}
}
}
diff --git a/src/styles/utils/theme-list-inset.scss b/src/styles/utils/theme-list-inset.scss
index 922760f..e7368e7 100644
--- a/src/styles/utils/theme-list-inset.scss
+++ b/src/styles/utils/theme-list-inset.scss
@@ -58,37 +58,35 @@
$groups: ion-item-group, ion-reorder-group, ion-accordion-group, ion-radio-group;
- #{$groups} {
- &:not(:has(#{$groups})) {
- &:not(:first-of-type) {
- margin-top: 16px;
- }
+ :is(#{$groups}):not(:is(#{$groups}) :is(#{$groups})) {
+ &:not(:first-of-type) {
+ margin-top: 16px;
+ }
- ion-item {
- ion-text[slot='end'] {
- padding-left: 8px;
- }
+ ion-item {
+ ion-text[slot='end'] {
+ padding-left: 8px;
+ }
- &.item-disabled {
- opacity: 1;
+ &.item-disabled {
+ opacity: 1;
- & > * {
- opacity: 0.4;
- }
+ & > * {
+ opacity: 0.4;
+ }
- &::part(detail-icon) {
- opacity: 0.1;
- }
+ &::part(detail-icon) {
+ opacity: 0.1;
}
+ }
- ion-button[slot='end'] {
- &.ion-align-self-end {
- transform: translateY(-7px);
- }
- ion-icon[slot='icon-only'] {
- font-size: 1.2rem !important;
- transform: translateY(4px);
- }
+ ion-button[slot='end'] {
+ &.ion-align-self-end {
+ transform: translateY(-7px);
+ }
+ ion-icon[slot='icon-only'] {
+ font-size: 1.2rem !important;
+ transform: translateY(4px);
}
}
}