-
+
+
+
Masahiko Sakakibara
Apple Account, iCloud+, and more
@@ -29,7 +31,8 @@
-
+
+ Support ios26 structured
@@ -38,22 +41,22 @@
WiFi
- ionic-framework-a
+ ionic-framework-a
Bluetooth
- On
+ On
Cellular
- Off
+ Off
Personal Hotspot
- Off
+ Off
@@ -61,55 +64,18 @@
-
+
+ Support md3 structured
-
-
- General
-
-
-
- Accessibility
-
-
-
- Action Button
-
-
-
- Apple Intelligence & Siri
-
-
-
- Camera
-
-
-
- Home Screen & App Library
-
-
-
- Search
-
-
-
- StandBy
-
-
-
-
-
-
-
- Screen Time
-
-
-
-
-
-
-
- Privacy & Security
+
+
+ Network & internet
+ Mobile, Wi-Fi, hotspot
+
+
+
+ Connected devices
+ Bluetooth, pairing
diff --git a/demo/src/app/settings/settings-page.component.scss b/demo/src/app/settings/settings-page.component.scss
index 2ce4f409..bad2a8ca 100644
--- a/demo/src/app/settings/settings-page.component.scss
+++ b/demo/src/app/settings/settings-page.component.scss
@@ -7,15 +7,32 @@ ion-list.list-inset {
}
ion-item > ion-icon[slot='start'] {
- border-radius: 8px;
- padding: 4px;
- margin-right: 14px;
color: var(--ion-background-color, #fff);
- font-size: 1.3rem;
+}
+
+.support-ios-structured {
+ ion-item > ion-icon[slot='start'] {
+ padding: 4px;
+ font-size: 1.3rem;
+ margin-right: 14px;
+ border-radius: 8px;
+ }
+}
+
+.support-md-structured {
+ ion-item > ion-icon[slot='start'] {
+ padding: 8px;
+ width: calc(40px - 16px);
+ height: calc(40px - 16px);
+ margin-right: 16px;
+ border-radius: 50%;
+ background: var(--ion-color-light-shade);
+ }
}
ion-list.user-info {
margin-top: 0;
+ margin-bottom: 0;
ion-avatar {
width: 64px;
height: 64px;
diff --git a/demo/src/app/settings/settings-page.component.ts b/demo/src/app/settings/settings-page.component.ts
index 243282d1..887be049 100644
--- a/demo/src/app/settings/settings-page.component.ts
+++ b/demo/src/app/settings/settings-page.component.ts
@@ -10,7 +10,6 @@ import {
IonFooter,
IonHeader,
IonIcon,
- IonImg,
IonItem,
IonItemGroup,
IonLabel,
@@ -21,6 +20,7 @@ import {
IonToggle,
IonToolbar,
Platform,
+ IonListHeader,
} from '@demo/ionic';
@Component({
@@ -43,10 +43,10 @@ import {
IonSearchbar,
IonBackButton,
IonAvatar,
- IonImg,
IonNote,
IonItemGroup,
IonToggle,
+ IonListHeader,
],
})
export class SettingsPage {
diff --git a/src/styles/components/ion-list.scss b/src/styles/components/ion-list.scss
index fb6498d4..e4ace7f5 100644
--- a/src/styles/components/ion-list.scss
+++ b/src/styles/components/ion-list.scss
@@ -8,7 +8,7 @@ ion-list.ios:not(.ios26-disabled) {
}
ion-list.list-inset.ios:not(.ios26-disabled) {
- @include theme-list-inset.ion-list-inset();
+ @include theme-list-inset.ion-list-inset(20px);
ion-radio-group,
ion-reorder-group {
diff --git a/src/styles/md-ion-list-inset.scss b/src/styles/md-ion-list-inset.scss
index e5d569cd..199517f7 100644
--- a/src/styles/md-ion-list-inset.scss
+++ b/src/styles/md-ion-list-inset.scss
@@ -1,7 +1,7 @@
@use 'utils/theme-list-inset';
ion-list.list-inset.md {
- @include theme-list-inset.ion-list-inset();
+ @include theme-list-inset.ion-list-inset(8px);
ion-item-group > ion-item {
& > ion-input[labelplacement='floating'] {
diff --git a/src/styles/utils/theme-list-inset.scss b/src/styles/utils/theme-list-inset.scss
index e7368e70..d3418750 100644
--- a/src/styles/utils/theme-list-inset.scss
+++ b/src/styles/utils/theme-list-inset.scss
@@ -1,4 +1,4 @@
-@mixin ion-list-inset() {
+@mixin ion-list-inset($note-inset) {
background: transparent;
ion-list-header {
@@ -64,6 +64,30 @@
}
ion-item {
+ &:has(> ion-label:not([slot])):has(> ion-note:not([slot])) {
+ &::part(container) {
+ flex-direction: column;
+ justify-content: center;
+ padding-top: 14px;
+ padding-bottom: 14px;
+ min-height: 64px;
+ }
+ & > ion-label,
+ & > ion-note {
+ width: auto;
+ align-self: flex-start;
+ }
+ & > ion-label {
+ margin: 0;
+ font-weight: 500;
+ font-size: 1.15rem;
+ line-height: 0.9rem;
+ }
+ & > ion-note {
+ font-size: 0.85rem;
+ }
+ }
+
ion-text[slot='end'] {
padding-left: 8px;
}
@@ -96,6 +120,6 @@
color: var(--ion-color-medium-tint);
font-size: 0.9rem;
display: block;
- margin: 8px calc(20px + var(--ion-safe-area-right)) 8px calc(20px + var(--ion-safe-area-left));
+ margin: 8px calc(var(--ion-safe-area-right, 0) + $note-inset) 8px calc(var(--ion-safe-area-left, 0) + $note-inset);
}
}