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 use mode Per-Page Layouts

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

Header/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;

Main/index.tsx

import React from "react";

interface Props {
  children: React.ReactNode;
}

const Main: React.FC<Props> = ({ children }) => {
  return <main>{children}</main>;
};

export default Main;

Footer/index.tsx

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;

PreviousLayouts NextLanding

Last updated 1 year ago