Mobile / Webview
This section provides guidance on laying out a mobile page.
Overview
Mobile/webview layout is a user interface layout designed for mobile or web applications that are primarily displayed within a webview or browser window. A webview is essentially a container that allows a mobile application to display web content without the user having to leave the application.
How to use
Here we use mobile layout. The installation method is as follows below.
Mobile layout component is split into several sections:
Header
: Component which represents the main navigation bar of the layout.Main
: Contains the content of each page and all prop passed from the page component.Footer
: Component which represents the footer of the layout.
Step 1: Create the layout split component
First, create a few new files in src/layouts/MobileLayout
directory. This will be the parent folder component that wraps around each component layout.
layouts/MobileLayout
├── Header
│ ├── <another split code>
│ └── index.tsx
├── Main
│ ├── <another split code>
│ └── index.tsx
├── Footer
│ ├── <another split code>
│ └── index.tsx
└── index.tsx
import React from "react";
interface Props {
children?: React.ReactNode;
}
const Header: React.FC<Props> = ({ children = <p>Header</p> }) => {
return <header>{children}</header>;
};
export default Header;
import React from "react";
interface Props {
children: React.ReactNode;
}
const Main: React.FC<Props> = ({ children }) => {
return <main>{children}</main>;
};
export default Main;
import React from "react";
interface Props {
children?: React.ReactNode;
}
const Footer: React.FC<Props> = ({ children = <p>Footer</p> }) => {
return <footer>{children}</footer>;
};
export default Footer;
In each split it can be chunked again into smaller code sections.
Step 2: Create the parent layout component
Next, create a new file for parent layout component, such as index.tsx
, also in your src/layouts/MobileLayout
directory.
// Vendors
import React from "react";
// Components
import Header from "./Header";
import Main from "./Main";
import Footer from "./Footer";
interface MobileLayoutProps extends React.PropsWithChildren<{}> {
// Add any other props your component needs
}
const MobileLayout = (props: MobileLayoutProps) => {
return (
<>
<Header />
<Main>{props.children}</Main>
<Footer />
</>
);
};
export default MobileLayout;
Step 3: Create the Page Component
Next, create a new file for your page component, such as index.tsx
, also in your src/components/page/Homepage
directory. This component will be wrapped by the MobileLayout
component.
// Vendors
import React from 'react';
const Homepage = () => {
return (
<>
Homepage
</>
);
}
export default Homepage;
Step 4: Add the Page to Your App
Finally, create a new file for your page component, such as index.tsx
, also in your src/pages
directory.
// Vendors
import React from 'react';
import Head from "next/head";
import type { ReactElement } from "react";
import type { NextPageWithLayout } from "./_app";
// Layouts
import MobileLayout from "@/layouts/MobileLayout";
// Components
import Homepage from "@/components/page/Homepage";
const Home: NextPageWithLayout = () => {
return (
<>
<Head>
<title>Create Tokenomy App</title>
<meta name="description" content="Generated by create tokenomy app" />
</Head>
<Homepage />
</>
);
}
Home.getLayout = function getLayout(page: ReactElement) {
return <MobileLayout>{page}</MobileLayout>;
};
export default Home;
Last updated