Skip to content

Commit

Permalink
docs(list): use dark mode aware color (#3015)
Browse files Browse the repository at this point in the history 
Co-authored-by: reslear <[email protected]>
  • Loading branch information
@liamdebeasi @reslear
liamdebeasi and reslear authored Jul 6, 2023
1 parent 03022cb commit 7d9e1fe
Show file tree
Hide file tree
Showing 6 changed files with 87 additions and 77 deletions.
36 changes: 19 additions & 17 deletions static/usage/v7/list/inset/angular.md
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
```html
<ion-list [inset]="true">
<ion-item>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-label>Mega Man X</ion-label>
</ion-item>
<ion-item>
<ion-label>The Legend of Zelda</ion-label>
</ion-item>
<ion-item>
<ion-label>Pac-Man</ion-label>
</ion-item>
<ion-item>
<ion-label>Super Mario World</ion-label>
</ion-item>
</ion-list>
<ion-content color="light">
<ion-list [inset]="true">
<ion-item>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-label>Mega Man X</ion-label>
</ion-item>
<ion-item>
<ion-label>The Legend of Zelda</ion-label>
</ion-item>
<ion-item>
<ion-label>Pac-Man</ion-label>
</ion-item>
<ion-item>
<ion-label>Super Mario World</ion-label>
</ion-item>
</ion-list>
</ion-content>
```
6 changes: 1 addition & 5 deletions static/usage/v7/list/inset/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,6 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />

<style>
ion-content {
--background: #f9f9f9;
}

.container {
flex-flow: column;
align-items: stretch;
Expand All @@ -23,7 +19,7 @@

<body>
<ion-app>
<ion-content>
<ion-content color="light">
<div class="container">
<ion-list inset>
<ion-item>
Expand Down
8 changes: 7 additions & 1 deletion static/usage/v7/list/inset/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,10 @@ import react from './react.md';
import vue from './vue.md';
import angular from './angular.md';

<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/list/inset/demo.html" size="350px" />
<Playground
version="7"
code={{ javascript, react, vue, angular }}
src="usage/v7/list/inset/demo.html"
size="350px"
includeIonContent={false}
/>
36 changes: 19 additions & 17 deletions static/usage/v7/list/inset/javascript.md
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
```html
<ion-list inset="true">
<ion-item>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-label>Mega Man X</ion-label>
</ion-item>
<ion-item>
<ion-label>The Legend of Zelda</ion-label>
</ion-item>
<ion-item>
<ion-label>Pac-Man</ion-label>
</ion-item>
<ion-item>
<ion-label>Super Mario World</ion-label>
</ion-item>
</ion-list>
<ion-content color="light">
<ion-list inset="true">
<ion-item>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-label>Mega Man X</ion-label>
</ion-item>
<ion-item>
<ion-label>The Legend of Zelda</ion-label>
</ion-item>
<ion-item>
<ion-label>Pac-Man</ion-label>
</ion-item>
<ion-item>
<ion-label>Super Mario World</ion-label>
</ion-item>
</ion-list>
</ion-content>
```
38 changes: 20 additions & 18 deletions static/usage/v7/list/inset/react.md
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
```tsx
import React from 'react';
import { IonItem, IonLabel, IonList } from '@ionic/react';
import { IonContent, IonItem, IonLabel, IonList } from '@ionic/react';

function Example() {
return (
<IonList inset={true}>
<IonItem>
<IonLabel>Pokémon Yellow</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Mega Man X</IonLabel>
</IonItem>
<IonItem>
<IonLabel>The Legend of Zelda</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Pac-Man</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Super Mario World</IonLabel>
</IonItem>
</IonList>
<IonContent color="light">
<IonList inset={true}>
<IonItem>
<IonLabel>Pokémon Yellow</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Mega Man X</IonLabel>
</IonItem>
<IonItem>
<IonLabel>The Legend of Zelda</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Pac-Man</IonLabel>
</IonItem>
<IonItem>
<IonLabel>Super Mario World</IonLabel>
</IonItem>
</IonList>
</IonContent>
);
}
export default Example;
Expand Down
40 changes: 21 additions & 19 deletions static/usage/v7/list/inset/vue.md
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,32 @@
```html
<template>
<ion-list :inset="true">
<ion-item>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-label>Mega Man X</ion-label>
</ion-item>
<ion-item>
<ion-label>The Legend of Zelda</ion-label>
</ion-item>
<ion-item>
<ion-label>Pac-Man</ion-label>
</ion-item>
<ion-item>
<ion-label>Super Mario World</ion-label>
</ion-item>
</ion-list>
<ion-content color="light">
<ion-list :inset="true">
<ion-item>
<ion-label>Pokémon Yellow</ion-label>
</ion-item>
<ion-item>
<ion-label>Mega Man X</ion-label>
</ion-item>
<ion-item>
<ion-label>The Legend of Zelda</ion-label>
</ion-item>
<ion-item>
<ion-label>Pac-Man</ion-label>
</ion-item>
<ion-item>
<ion-label>Super Mario World</ion-label>
</ion-item>
</ion-list>
</ion-content>
</template>

<script lang="ts">
import { IonItem, IonLabel, IonList } from '@ionic/vue';
import { IonContent, IonItem, IonLabel, IonList } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonItem, IonLabel, IonList },
components: { IonContent, IonItem, IonLabel, IonList },
});
</script>
```

1 comment on commit 7d9e1fe

@vercel
Copy link

@vercel vercel bot commented on 7d9e1fe Jul 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ionic-docs – ./

ionic-docs-git-main-ionic1.vercel.app
ionic-docs-ionic1.vercel.app
ionic-docs-gqykycf8t.vercel.app

Please sign in to comment.