Часть 3: Использование Material-UI и Moment.js для улучшения списка

В этой части мы воспользуемся помощью пакета «момент» для отображения времени. Итак, внутри терминала мы установим Moment.js, набрав:

yarn add moment

Видеоуроки и Исходный код

Измените ширину контейнера

Перейдите в index.js, добавьте maxWidth = «sm» в ‹Container›.

export default function Home() {
return (
<Container maxWidth="sm">
<TodoList />
</Container>
)
}

Создать компонент ToDo

Чтобы создать компонент ToDo, перейдите в папку «component», создайте Todo.js.

Внутри Todo.js мы планируем получить идентификатор, временную метку, заголовок и детализацию в реквизитах.

Импортируйте ListItem и добавьте margin-top с 3 единицами, boxShadow также с 3 единицами. Добавьте очень светло-серый цвет в качестве фона.

Импортируйте ListItemText, установите заголовок как первичный и добавьте метку времени как вторичную по отношению к ListItemText.

import { ListItem, ListItemText } from "@mui/material";
import moment from 'moment';
const Todo = ({ id, timestamp, title, detail }) => {
return (
<ListItem
sx={{ mt: 3, boxShadow: 3 }}
style={{ backgroundColor: '#FAFAFA' }}
>
<ListItemText primary={title} secondary={moment(timestamp).format("MMMM Do YYYY, h:mm:ss a")} />
</ListItem>
)
}
export default Todo

Добавить значки

Добавьте значки как дополнительное действие. Так что импортируйте DeleteIcon и MoreVertIcon. Позже один значок предназначен для удаления ToDo, а другой - для просмотра деталей ToDo.

Мы также добавляем маржу 1 у первого значка. Таким образом, два значка не будут перекрывать друг друга.

import { IconButton, ListItem, ListItemText } from "@mui/material";
import moment from 'moment';
import DeleteIcon from '@mui/icons-material/Delete';
import MoreVertIcon from '@mui/icons-material/MoreVert';
const Todo = ({ id, timestamp, title, detail }) => {
return (
<ListItem
sx={{ mt: 3, boxShadow: 3 }}
style={{ backgroundColor: '#FAFAFA' }}
secondaryAction={
<>
<IconButton sx={{ m: 1 }} >
<DeleteIcon />
</IconButton>
<IconButton>
<MoreVertIcon />
</IconButton>
</>
}
>
<ListItemText primary={title} secondary={moment(timestamp).format("MMMM Do YYYY, h:mm:ss a")} />
</ListItem>
)
}
export default Todo

Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter, Instagram, Gumroad

Больше контента на plainenglish.io