-
Notifications
You must be signed in to change notification settings - Fork 27.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
136 changed files
with
1,608 additions
and
2,919 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 6 additions & 6 deletions
12
examples/with-ionic-typescript/README.md → examples/with-ionic/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,27 @@ | ||
| # Ionic with TypeScript Example | ||
|
|
||
| Example app using Next.js with [Ionic](https://ionicframework.com/) and [TypeScript](https://www.typescriptlang.org/). You can learn more about Ionic in the [documentation](https://ionicframework.com/docs). | ||
| Example app using Next.js with [Ionic](https://ionicframework.com/). You can learn more about Ionic in the [documentation](https://ionicframework.com/docs). | ||
|
|
||
| ## Deploy your own | ||
|
|
||
| Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-ionic-typescript) | ||
| Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-ionic) | ||
|
|
||
| [](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-ionic-typescript&project-name=with-ionic-typescript&repository-name=with-ionic-typescript) | ||
| [](https://vercel.com/new/clone?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-ionic&project-name=with-ionic&repository-name=with-ionic) | ||
|
|
||
| ## How to use | ||
|
|
||
| Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: | ||
|
|
||
| ```bash | ||
| npx create-next-app --example with-ionic-typescript with-ionic-typescript-app | ||
| npx create-next-app --example with-ionic with-ionic-app | ||
| ``` | ||
|
|
||
| ```bash | ||
| yarn create next-app --example with-ionic-typescript with-ionic-typescript-app | ||
| yarn create next-app --example with-ionic with-ionic-app | ||
| ``` | ||
|
|
||
| ```bash | ||
| pnpm create next-app --example with-ionic-typescript with-ionic-typescript-app | ||
| pnpm create next-app --example with-ionic with-ionic-app | ||
| ``` | ||
|
|
||
| Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import Image from "next/image"; | ||
|
|
||
| type CardProps = { | ||
| imageSrc: string; | ||
| title: string; | ||
| subtitle: string; | ||
| content: string; | ||
| }; | ||
|
|
||
| export default function Card({ | ||
| imageSrc, | ||
| title, | ||
| subtitle, | ||
| content, | ||
| }: CardProps) { | ||
| return ( | ||
| <ion-card> | ||
| <Image | ||
| src={imageSrc} | ||
| alt={`Image of ${title}`} | ||
| width={320} | ||
| height={320} | ||
| priority={true} | ||
| /> | ||
| <ion-card-header> | ||
| <ion-card-subtitle>{subtitle}</ion-card-subtitle> | ||
| <ion-card-title>{title}</ion-card-title> | ||
| </ion-card-header> | ||
| <ion-card-content> | ||
| <ion-icon name="pin" slot="start"></ion-icon> | ||
| {content} | ||
| </ion-card-content> | ||
| </ion-card> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| "use client"; | ||
|
|
||
| import React, { useEffect } from "react"; | ||
| import { defineCustomElements as ionDefineCustomElements } from "@ionic/core/loader"; | ||
|
|
||
| export default function IonicLayout({ | ||
| children, | ||
| }: { | ||
| children: React.ReactNode; | ||
| }) { | ||
| useEffect(() => { | ||
| ionDefineCustomElements(window); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <ion-app> | ||
| <ion-header translucent> | ||
| <ion-toolbar> | ||
| <ion-title>Next.js with Ionic</ion-title> | ||
| </ion-toolbar> | ||
| </ion-header> | ||
| <ion-content fullscreen>{children}</ion-content> | ||
| <ion-footer> | ||
| <ion-toolbar> | ||
| <ion-title>Footer</ion-title> | ||
| </ion-toolbar> | ||
| </ion-footer> | ||
| </ion-app> | ||
| ); | ||
| } |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import "@ionic/core/css/core.css"; | ||
| import "@ionic/core/css/normalize.css"; | ||
| import "@ionic/core/css/structure.css"; | ||
| import "@ionic/core/css/typography.css"; | ||
| import "@ionic/core/css/padding.css"; | ||
| import "@ionic/core/css/float-elements.css"; | ||
| import "@ionic/core/css/text-alignment.css"; | ||
| import "@ionic/core/css/text-transformation.css"; | ||
| import "@ionic/core/css/flex-utils.css"; | ||
| import "@ionic/core/css/display.css"; | ||
|
|
||
| export default function RootLayout({ | ||
| children, | ||
| }: Readonly<{ | ||
| children: React.ReactNode; | ||
| }>) { | ||
| return ( | ||
| <html lang="en"> | ||
| <body>{children}</body> | ||
| </html> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import IonicLayout from "@/_components/IonicLayout"; | ||
| import CardComponent from "@/_components/Card"; | ||
|
|
||
| export default function Home() { | ||
| const destinations = new Array(8).fill({ | ||
| imageSrc: "/img/cat.jpg", | ||
| title: "Madison, WI", | ||
| subtitle: "Destination", | ||
| content: | ||
| "Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.", | ||
| }); | ||
|
|
||
| return ( | ||
| <IonicLayout> | ||
| <ion-grid> | ||
| <ion-row> | ||
| {destinations.map((destination, i) => ( | ||
| <ion-col key={i} size="3"> | ||
| <CardComponent | ||
| imageSrc={destination.imageSrc} | ||
| title={destination.title} | ||
| subtitle={destination.subtitle} | ||
| content={destination.content} | ||
| /> | ||
| </ion-col> | ||
| ))} | ||
| </ion-row> | ||
| </ion-grid> | ||
| </IonicLayout> | ||
| ); | ||
| } |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import type { NextConfig } from "next"; | ||
|
|
||
| const nextConfig: NextConfig = { | ||
| /* config options here */ | ||
| }; | ||
|
|
||
| export default nextConfig; |
Oops, something went wrong.