Skip to content

Commit 7d9e1fe

Browse files
liamdebeasireslear
liamdebeasi
and
reslear
authored
docs(list): use dark mode aware color (#3015)
Co-authored-by: reslear <[email protected]>
1 parent 03022cb commit 7d9e1fe

File tree

6 files changed

+87
-77
lines changed

6 files changed

+87
-77
lines changed

‎static/usage/v7/list/inset/angular.md

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
```html
2-
<ion-list [inset]="true">
3-
<ion-item>
4-
<ion-label>Pokémon Yellow</ion-label>
5-
</ion-item>
6-
<ion-item>
7-
<ion-label>Mega Man X</ion-label>
8-
</ion-item>
9-
<ion-item>
10-
<ion-label>The Legend of Zelda</ion-label>
11-
</ion-item>
12-
<ion-item>
13-
<ion-label>Pac-Man</ion-label>
14-
</ion-item>
15-
<ion-item>
16-
<ion-label>Super Mario World</ion-label>
17-
</ion-item>
18-
</ion-list>
2+
<ion-content color="light">
3+
<ion-list [inset]="true">
4+
<ion-item>
5+
<ion-label>Pokémon Yellow</ion-label>
6+
</ion-item>
7+
<ion-item>
8+
<ion-label>Mega Man X</ion-label>
9+
</ion-item>
10+
<ion-item>
11+
<ion-label>The Legend of Zelda</ion-label>
12+
</ion-item>
13+
<ion-item>
14+
<ion-label>Pac-Man</ion-label>
15+
</ion-item>
16+
<ion-item>
17+
<ion-label>Super Mario World</ion-label>
18+
</ion-item>
19+
</ion-list>
20+
</ion-content>
1921
```

‎static/usage/v7/list/inset/demo.html

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,6 @@
1010
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
1111

1212
<style>
13-
ion-content {
14-
--background: #f9f9f9;
15-
}
16-
1713
.container {
1814
flex-flow: column;
1915
align-items: stretch;
@@ -23,7 +19,7 @@
2319

2420
<body>
2521
<ion-app>
26-
<ion-content>
22+
<ion-content color="light">
2723
<div class="container">
2824
<ion-list inset>
2925
<ion-item>

‎static/usage/v7/list/inset/index.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,10 @@ import react from './react.md';
55
import vue from './vue.md';
66
import angular from './angular.md';
77

8-
<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/list/inset/demo.html" size="350px" />
8+
<Playground
9+
version="7"
10+
code={{ javascript, react, vue, angular }}
11+
src="usage/v7/list/inset/demo.html"
12+
size="350px"
13+
includeIonContent={false}
14+
/>

‎static/usage/v7/list/inset/javascript.md

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
11
```html
2-
<ion-list inset="true">
3-
<ion-item>
4-
<ion-label>Pokémon Yellow</ion-label>
5-
</ion-item>
6-
<ion-item>
7-
<ion-label>Mega Man X</ion-label>
8-
</ion-item>
9-
<ion-item>
10-
<ion-label>The Legend of Zelda</ion-label>
11-
</ion-item>
12-
<ion-item>
13-
<ion-label>Pac-Man</ion-label>
14-
</ion-item>
15-
<ion-item>
16-
<ion-label>Super Mario World</ion-label>
17-
</ion-item>
18-
</ion-list>
2+
<ion-content color="light">
3+
<ion-list inset="true">
4+
<ion-item>
5+
<ion-label>Pokémon Yellow</ion-label>
6+
</ion-item>
7+
<ion-item>
8+
<ion-label>Mega Man X</ion-label>
9+
</ion-item>
10+
<ion-item>
11+
<ion-label>The Legend of Zelda</ion-label>
12+
</ion-item>
13+
<ion-item>
14+
<ion-label>Pac-Man</ion-label>
15+
</ion-item>
16+
<ion-item>
17+
<ion-label>Super Mario World</ion-label>
18+
</ion-item>
19+
</ion-list>
20+
</ion-content>
1921
```

‎static/usage/v7/list/inset/react.md

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
11
```tsx
22
import React from 'react';
3-
import { IonItem, IonLabel, IonList } from '@ionic/react';
3+
import { IonContent, IonItem, IonLabel, IonList } from '@ionic/react';
44

55
function Example() {
66
return (
7-
<IonList inset={true}>
8-
<IonItem>
9-
<IonLabel>Pokémon Yellow</IonLabel>
10-
</IonItem>
11-
<IonItem>
12-
<IonLabel>Mega Man X</IonLabel>
13-
</IonItem>
14-
<IonItem>
15-
<IonLabel>The Legend of Zelda</IonLabel>
16-
</IonItem>
17-
<IonItem>
18-
<IonLabel>Pac-Man</IonLabel>
19-
</IonItem>
20-
<IonItem>
21-
<IonLabel>Super Mario World</IonLabel>
22-
</IonItem>
23-
</IonList>
7+
<IonContent color="light">
8+
<IonList inset={true}>
9+
<IonItem>
10+
<IonLabel>Pokémon Yellow</IonLabel>
11+
</IonItem>
12+
<IonItem>
13+
<IonLabel>Mega Man X</IonLabel>
14+
</IonItem>
15+
<IonItem>
16+
<IonLabel>The Legend of Zelda</IonLabel>
17+
</IonItem>
18+
<IonItem>
19+
<IonLabel>Pac-Man</IonLabel>
20+
</IonItem>
21+
<IonItem>
22+
<IonLabel>Super Mario World</IonLabel>
23+
</IonItem>
24+
</IonList>
25+
</IonContent>
2426
);
2527
}
2628
export default Example;

‎static/usage/v7/list/inset/vue.md

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,32 @@
11
```html
22
<template>
3-
<ion-list :inset="true">
4-
<ion-item>
5-
<ion-label>Pokémon Yellow</ion-label>
6-
</ion-item>
7-
<ion-item>
8-
<ion-label>Mega Man X</ion-label>
9-
</ion-item>
10-
<ion-item>
11-
<ion-label>The Legend of Zelda</ion-label>
12-
</ion-item>
13-
<ion-item>
14-
<ion-label>Pac-Man</ion-label>
15-
</ion-item>
16-
<ion-item>
17-
<ion-label>Super Mario World</ion-label>
18-
</ion-item>
19-
</ion-list>
3+
<ion-content color="light">
4+
<ion-list :inset="true">
5+
<ion-item>
6+
<ion-label>Pokémon Yellow</ion-label>
7+
</ion-item>
8+
<ion-item>
9+
<ion-label>Mega Man X</ion-label>
10+
</ion-item>
11+
<ion-item>
12+
<ion-label>The Legend of Zelda</ion-label>
13+
</ion-item>
14+
<ion-item>
15+
<ion-label>Pac-Man</ion-label>
16+
</ion-item>
17+
<ion-item>
18+
<ion-label>Super Mario World</ion-label>
19+
</ion-item>
20+
</ion-list>
21+
</ion-content>
2022
</template>
2123

2224
<script lang="ts">
23-
import { IonItem, IonLabel, IonList } from '@ionic/vue';
25+
import { IonContent, IonItem, IonLabel, IonList } from '@ionic/vue';
2426
import { defineComponent } from 'vue';
2527
2628
export default defineComponent({
27-
components: { IonItem, IonLabel, IonList },
29+
components: { IonContent, IonItem, IonLabel, IonList },
2830
});
2931
</script>
3032
```

0 commit comments

Comments
 (0)