“This is the 13th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

We created the project in the previous two articles. Realize electron, front-end UMI and back-end Express through. In this article we will write about the UI part of the component.

We refer to the to-do list of flying books

The new file

Since we are a single-page application, there is no need for routing. Start by creating a Components folder under Pages in the front end to store the components. Create MainMenu and TaskList components respectively

MainMenu/index.tsx

import styles from './index.less';

export default function MainMenu() {
  return (
    <div>
      <h1 className={styles.title}>The main menu</h1>
    </div>
  );
}
Copy the code

TaskList/index.tsx

import styles from './index.less';

export default function TaskList() {
  return (
    <div>
      <h1 className={styles.title}>The task list</h1>
    </div>
  );
}
Copy the code

Introduce two components

Introduce two components in the main page file

import MainMenu from './components/MainMenu';
import TaskList from './components/TaskList';
import styles from './index.less';

export default function IndexPage() {
  return (
    <div className={styles.page}>
      <MainMenu/>
      <TaskList/>
    </div>
  );
}
Copy the code

index.less

.page {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
}
Copy the code

At this point we want to see the effect, and remember, we’re copying the front end packed file into Electron. If you want to see the effect you need to package it again, or run the front end to see the effect.

Go to the main yarn start folder to start the project. See the effect under port 8000

Simple layout

The main menu is a small part and the task list is a large part. Add styles for MainMenu and TaskList, respectively

MainMenu

index.tsx

import styles from './index.less';

export default function MainMenu() {
  return (
    <div className={styles.main_menu}>
      <h1 className={styles.title}>The main menu</h1>
    </div>
  );
}
Copy the code

index.less

The width is 20% and a minimum width is given. When zooming out the browser, it stops zooming out after 100px.

.main_menu {
  background: rgb(121.242.157);
  width: 20%;
  min-width: 100px;
}
Copy the code

TaskList

index.tsx

import styles from './index.less';

export default function TaskList() {
  return (
    <div className={styles.task_list}>
      <h1 className={styles.title}>The task list</h1>
    </div>
  );
}
Copy the code

index.less

Use Flex: 1 to take up all the remaining space.

.task_list {
  background: rgb(134.109.204); // Take up the remaining spaceflex:1;
}
Copy the code

Results the following