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); } } }