Как создать галерею изображений с помощью Amplify UI

Amplify UI — это библиотека пользовательского интерфейса с открытым исходным кодом, которая позволяет веб-разработчикам создавать полностью расширяемые и настраиваемые пользовательские интерфейсы с компонентами, которые дают вам контроль над внешним видом и ощущениями вашего приложения.

Это руководство научит вас создавать галерею изображений с помощью AWS Amplify UI, не прибегая к помощи других библиотек CSS. Amplify UI предоставляет все компоненты, необходимые для создания стиля.

Необходимые условия

Требуется следующая настройка:

  • Node >= 14.0.0 и npm >= 5.6, установленные на локальной машине.
  • Учетная запись AWS для размещения приложения. Регистрация бесплатная
  • Редактор кода
  • Базовое понимание React и JavaScript

Ознакомьтесь с полным исходным кодом в этом репозитории на GitHub.

Посмотрите демонстрационное приложение в реальном времени.

Начало работы

Использование React является основной фронтенд-библиотекой для этого проекта. Для начала установите шаблон с помощью этой команды:

npx create-react-app <name-of-app>
Войти в полноэкранный режим Выйти из полноэкранного режима

<name-of-app>: Замените это на желаемое имя приложения

После установки файлов и папок, необходимых для создания приложения галереи изображений, вам нужно установить зависимости для компонентов пользовательского интерфейса с помощью этой команды:

npm install @aws-amplify/ui-react aws-amplify
Войти в полноэкранный режим Выйти из полноэкранного режима

Импорт стилей

Amplify поставляется с темой по умолчанию, которую вы можете настроить. Но сначала вам нужно импортировать стили, .css, в один из этих файлов js, src/App.js или src/index.js. Для этого проекта импортируйте стили из файла src/index.js:

 // src/index.js

    // other imports
    import '@aws-amplify/ui-react/styles.css'; // add this

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
Вход в полноэкранный режим Выйти из полноэкранного режима

Использование шрифтов

Тема по умолчанию, на которую ссылается Amplify UI, является шрифтом Inter. Вы можете включить шрифты в свое приложение, используя Google Fonts CDN. Скопируйте и вставьте этот код в файл public/index.html в элемент <head>:

<!-- public/index.html -->

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap"
      rel="stylesheet"
    />
Вход в полноэкранный режим Выход из полноэкранного режима

Создание информации о галерее изображений

В этом разделе создайте файл в папке src под названием gallery-info.js. Этот файл будет хранить все данные в массиве объектов, состоящем из URL изображения, id и текста для изображений на главной странице.

Скопируйте и вставьте следующий код:

// src/gallery-info.js

    export const categories =[
        {
            image: "https://res.cloudinary.com/terieyenike/image/upload/v1662646813/amplify/lerone-pieters-2-oqD5ve6Zs-unsplash.jpg",
            id: 1,
            title: "Travel",
            subtitle: "Lost in the city is where I found myself"
        },
        {
            image: "https://res.cloudinary.com/terieyenike/image/upload/v1662646814/amplify/oppo-find-x5-pro-fNPsd6_ZiuA-unsplash.jpg",
            id: 2,
            title: "Guide",
            subtitle: "Guide to Iceland"
        },
        {
            image: "https://res.cloudinary.com/terieyenike/image/upload/v1662646813/amplify/dane-wetton-t1NEMSm1rgI-unsplash.jpg",
            id: 3,
            title: "Journal",
            subtitle: "A lost city on the rolling hills"
        },
        {
            image: "https://res.cloudinary.com/terieyenike/image/upload/v1662646812/amplify/masahiro-miyagi-EHq_NyOiK80-unsplash.jpg",
            id: 4,
            title: "Guide",
            subtitle: "Top 10 things to consider when travelling"
        },
        {
            image: "https://res.cloudinary.com/terieyenike/image/upload/v1662646811/amplify/roman-kirienko-3gXotCRwGaw-unsplash.jpg",
            id: 5,
            title: "CSS Grid",
            subtitle: "Style your web components faster"
        },
        {
            image: "https://res.cloudinary.com/terieyenike/image/upload/v1662646812/amplify/dell-SGY0LIfTKZ4-unsplash.jpg",
            id: 6,
            title: "Guide",
            subtitle: "Hands on review with the best gimbal"
        }
    ]
Вход в полноэкранный режим Выйти из полноэкранного режима

Создание галереи изображений

Давайте создадим папку components в папке src и включим новый файл card-list.component.jsx в папку card-list. Этот компонент будет отвечать за отображение каждого изображения карты.

Скопируйте и вставьте следующий код:

// src/components/card-list/card-list.component.jsx

    import {
      Collection,
      Card,
      Heading,
      Text,
      Image,
      View,
    } from '@aws-amplify/ui-react';

    import { categories } from '../../gallery-info';

    const CardList = () => {
      return (
        <>
          <Collection
            items={categories}
            type='list'
            direction='row'
            gap={{ base: '0', medium: '2rem' }}
            wrap='wrap'
            justifyContent='center'
            alignItems='center'>
            {(category, index) => (
              <Card
                key={index}
                borderRadius='medium'
                maxWidth={{ medium: '22rem', large: '27rem' }}
                marginTop='2.5rem'
                marginBottom='1.5rem'
                boxShadow='medium'>
                <Image
                  alt={category.title}
                  src={category.image}
                  objectFit='cover'
                />
                <View as='div' maxWidth='100%'>
                  <Heading level={4}>{category.title}</Heading>
                  <Text>{category.subtitle}</Text>
                </View>
              </Card>
            )}
          </Collection>
        </>
      );
    };

    export default CardList;
Войти в полноэкранный режим Выйти из полноэкранного режима

В приведенных выше фрагментах кода происходит следующее:

  • Импортируйте различные компоненты из библиотеки Amplify
  • Далее импортируйте категории, которые содержат все объекты данных для галереи изображений.
  • Компонент collection принимает источник данных из импорта категорий, который мы будем использовать для отображения элементов на странице. Суть компонента Collection выступает в качестве способа повторения компонентов с помощью циклов
  • Для каждого компонента, предоставляемого Amplify, документация предлагает реквизиты, которые могут быть присоединены ко всем импортированным компонентам для стилизации и других свойств, необходимых для компоновки на странице
  • Компоненты Card группируют связанные части контента, и в них помещаются изображение и текст.
  • Остальные компоненты, такие как Image, Heading, и Text отображают отзывчивые изображения, заголовок и текст в элементе соответственно
  • Компонент View по умолчанию отображает элемент <div>.

Пока что приложение не отображает компонент CardList на странице. Для просмотра галереи изображений необходимо импортировать компонент CardList в точку входа проекта, App.js.

Теперь добавьте компонент CardList в файл src/App.js:

// src/App.js

    import CardList from './components/card-list/card-list.component';

    const App = () => {
      return (
        <>
          <CardList />
        </>
      );
    };

    export default App;
Вход в полноэкранный режим Выйти из полноэкранного режима

Приложение должно выглядеть примерно так:

Создание информации нижнего колонтитула

Раздел нижнего колонтитула приложения будет содержать информацию о проекте и любые другие детали, которые вы хотите включить, например, название бренда, авторские права и так далее.

Создайте новую папку, footer, и файл footer.component.jsx в папке components.

Скопируйте и вставьте следующий код:

// src/components/footer/footer.component.jsx

    import { Badge, Link, Flex, Heading, Text, View } from '@aws-amplify/ui-react';

    const Footer = () => {
      return (
        <>
          <Flex
            direction={{ base: 'column', medium: 'row' }}
            justifyContent={{ base: 'center', medium: 'space-between' }}
            alignItems='center'
            marginTop='1.5rem'>
            <View>
              <Flex
                direction='column'
                alignItems={{ base: 'center', medium: 'start' }}>
                <Heading color='neutral.90'>Image Gallery</Heading>
                <Text color='neutral.90' as='p'>
                  Built with React.js and Amplify UI
                </Text>
              </Flex>
            </View>
            <Badge>
              <Link
                href='https://github.com/Terieyenike/react-amplify-gallery'
                isExternal={true}>
                GitHub
              </Link>
            </Badge>
          </Flex>
        </>
      );
    };

    export default Footer;
Вход в полноэкранный режим Выйти из полноэкранного режима

Приведенный выше код делает следующее:

  • Компонент Flex отвечает за макет в разделе нижнего колонтитула, используя CSS Flexbox.
  • Компонент Badge представляет собой элемент с цветовой кодировкой, используемый для отображения сообщения, которое в данном случае является ссылкой на репозиторий GitHub
  • Наконец, компонент Link используется внутри компонента Badge для направления пользователей на внешнюю ссылку с помощью реквизита isExternal, установленного в true.

Теперь страница должна выглядеть следующим образом:

Развертывание приложения

Ознакомьтесь с этим руководством по развертыванию современных приложений с помощью AWS Amplify.

Заключение

Эта статья научила вас использовать Amplify UI для создания полностью отзывчивой галереи изображений. Amplify UI предоставляет все необходимое для создания других страниц полностью с нуля.

Попробуйте!

Подробнее

  • Компоненты Amplify UI

Оцените статью
devanswers.ru
Добавить комментарий