Создание Whinst, часть 7. Создание домашней страницы (2/2)
В прошлой статье я рассказал о том, как настроил создание каталога и вывод ранее сделанных каталогов. Эта статья является продолжением и последней частью статьи о создании домашней страницы. В этой статье я расскажу вам, как настроить предварительный просмотр каталога в веб-приложении Whinst. Давайте погрузимся🏄🏾.
Настройка превью👨🏾💻
Как упоминалось в предыдущей статье💁🏾♂️, на главной странице веб-приложения Whinst есть кнопка, которая ведет на страницу создания каталога, где можно создать новый каталог, а также список всех предыдущих каталогов пользователя. созданный. В этих ранее созданных каталогах мало изображений для предварительного просмотра изображений, используемых в каталоге.
Я работал над тем, чтобы отображать эти изображения и делать их отзывчивыми на всех типах устройств, то есть на малых, средних и больших. Для этого я сначала создал контейнеры, которые реагируют, используя компонент div для хранения этих изображений. Затем я получил несколько образцов изображений из бесплатного API изображений для отображения в этих контейнерах. Чтобы эти изображения поместились в этот внешний контейнер, я применил свойство relative к div, без этого изображения покрывали весь экран, чего мы не хотим🙄. В приведенном ниже коде показано, как я это сделал
<div className='flex justify-center'>
<div className='border-1 w-24 h-24 relative'>
<Image fill alt='An image' src="https://images.com" />
</div>
</div>
В коде есть внешний div, который является просто контейнером для всего. Я применил свойства flex и justify-center, чтобы аккуратно выровнять объекты внутри него. Внутренний div — это контейнер, который содержит изображение, у него есть простое свойство границы, чтобы я мог легко его увидеть, высоту и ширину и, самое главное, относительное свойство, благодаря которому изображение аккуратно помещается внутри контейнера. Наконец, в Nextjs встроен тег изображения, который эффективно генерирует изображения.
Теперь, когда домашняя страница завершена, я перешел к созданию страницы каталога, которую я уже закончил, и я скоро напишу о ней в следующей статье. Спасибо за прочтение🙏.
