API-интерфейс React MUI ImageListItemBar

Опубликовано: 15 Декабря, 2022

MUI или Material-UI — это библиотека пользовательского интерфейса, предоставляющая предопределенные надежные и настраиваемые компоненты для React для упрощения веб-разработки. Дизайн MUI основан на Material Design от Google.

В этой статье мы обсудим API-интерфейс React MUI ImageListItemBar. ImageList отображает коллекцию изображений в формате структурированной сетки. ImageListItemBar позволяет размещать наложение поверх изображений, содержащих некоторые подписи. ImageListItemBar позволяет разместить наложение над панелью, где мы можем разместить кнопку действия, заголовок и подзаголовок. API предоставляет множество функций, и мы научимся их реализовывать.

Импорт API ImageListItemBar:

import ImageListItemBar from "@mui/material/ImageListItemBar";
// or
import { ImageListItemBar } from "@mui/material";

Список реквизитов: Вот список различных реквизитов, используемых с этим компонентом. Мы можем получить к ним доступ и изменить их в соответствии с нашими потребностями.

actionIcon: используется для установки кнопки со значком на компоненте, который можно использовать в качестве вторичного действия.
actionPosition: используется для установки позиции actionIcon. Значение по умолчанию правильное.
классы: переопределите существующие стили или добавьте новые стили к компоненту.
position: используется для установки положения строки заголовка. Положение по умолчанию — нижнее.
subtitle: используется для добавления подзаголовка в строку заголовка.
title: Используется для установки отображаемого заголовка.

Правила CSS:

root: это стили, применяемые к корневому элементу.
positionBottom: это стили, применяемые к корневому элементу, если позиция нижняя.
positionTop: это стиль, применяемый к корневому элементу, если позиция сверху.
positionBelow: это стили, применяемые к корневому элементу, если позиция находится ниже.
titleWrap: это стили, применяемые к элементу-контейнеру заголовка и подзаголовка.
titleWrapBelow: это стили, применяемые к элементу-контейнеру заголовка и подзаголовка, если позиция находится ниже.
titleWrapActionPosLeft: это стили, применяемые к элементу-контейнеру, если actionPosition оставлен.
titleWrapActionPosRight: это стили, применяемые к элементу-контейнеру, если actionPosition правильный.
заголовок: это стили, применяемые к элементу контейнера заголовка.
subtitle: это стиль, применяемый к элементу контейнера субтитров.
actionIcon: это стили, применяемые к actionIcon, если они предоставлены.
actionIconActionPosLeft: это стили, применяемые к actionIcon, если actionPositionleft.

Синтаксис: Создайте ImageListItem с ImageListItemBar:

<ImageListItem>
    <img
        src="#"
        loading="lazy"
    />
    <ImageListItemBar title="title" />
</ImageListItem>

Установка и создание приложения React и добавление зависимостей MUI:

Шаг 1: Создайте проект реакции, используя следующую команду.

npx create-react-app gfg_tutorial

Шаг 2: Войдите в каталог проекта

cd gfg_tutorial

Шаг 3: Установите зависимости MUI следующим образом:

npm install @mui/material @emotion/react 
npm install @emotion/styled @mui/lab @mui/icons-material

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

Шаг 4: Запустите проект следующим образом:

npm start

Пример 1. В следующем примере у нас есть ImageListItemBar в ImageListItems.

App.js

import "./App.css";
import * as React from "react";
import ImageList from "@mui/material/ImageList";
import ImageListItem from "@mui/material/ImageListItem";
import ImageListItemBar from "@mui/material/ImageListItemBar";
  
function srcset(image, size, rows = 1, cols = 1) {
    return {
        src: `${image}?w=${size * cols}
      &h=${size * rows}&fit=crop&auto=format`,
        srcSet: `${image}?w=${size * cols}&h=${size * rows
            }&fit=crop&auto=format&dpr=2 2x`,
    };
}
  
function App() {
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI ImageListItemBar API</strong>
            </div>
            <br />
            <ImageList
                sx={{ width: 900, height: 300, margin: "auto" }}
                cols={4}
                variant="quilted"
                rowHeight={140}
            >
                <ImageListItem cols={1} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png",
                            121,
                            1,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks"
                        subtitle="A computer science portal for geeks."
                    />
                </ImageListItem>
                <ImageListItem cols={1} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png",
                            121,
                            1,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks"
                        subtitle="A computer science portal for geeks."
                    />
                </ImageListItem>
                <ImageListItem cols={1} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png",
                            121,
                            1,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks Logo"
                        subtitle="A computer science portal for geeks."
                    />
                </ImageListItem>
                <ImageListItem cols={3} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png",
                            121,
                            3,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks New Logo"
                        subtitle="A computer science portal for geeks."
                    />
                </ImageListItem>
                <ImageListItem cols={1} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png",
                            121,
                            1,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks"
                        subtitle="A computer science portal for geeks."
                    />
                </ImageListItem>
            </ImageList>
        </div>
    );
}
  
export default App;

Выход:

Пример 2. В следующем примере у нас есть кнопка «Нравится» в строке заголовка.

App.js

import "./App.css";
import * as React from "react";
import ImageList from "@mui/material/ImageList";
import ImageListItem from "@mui/material/ImageListItem";
import ImageListItemBar from "@mui/material/ImageListItemBar";
import { ThumbsUpDown, ThumbsUpDownRounded } from "@mui/icons-material";
import ThumbUpIcon from "@mui/icons-material/ThumbUp";
import { IconButton } from "@mui/material";
  
function srcset(image, size, rows = 1, cols = 1) {
    return {
        src: `${image}?w=${size * cols}
      &h=${size * rows}&fit=crop&auto=format`,
        srcSet: `${image}?w=${size * cols}&h=${size * rows
            }&fit=crop&auto=format&dpr=2 2x`,
    };
}
  
function App() {
    return (
        <div className="App">
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI ImageListItemBar API</strong>
            </div>
            <br />
            <ImageList
                sx={{ width: 900, height: 300, margin: "auto" }}
                cols={4}
                variant="quilted"
                rowHeight={140}
            >
                <ImageListItem cols={1} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png",
                            121,
                            1,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks"
                        subtitle="A computer science portal for geeks."
                        actionIcon={
                            <IconButton sx={{ color: "lightgreen" }}>
                                <ThumbUpIcon />
                            </IconButton>
                        }
                    />
                </ImageListItem>
                <ImageListItem cols={1} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png",
                            121,
                            1,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks"
                        subtitle="A computer science portal for geeks."
                        actionIcon={
                            <IconButton sx={{ color: "lightgreen" }}>
                                <ThumbUpIcon />
                            </IconButton>
                        }
                    />
                </ImageListItem>
                <ImageListItem cols={1} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png",
                            121,
                            1,
                            1
                        )}
                        loading="lazy"
                    />
                    <ImageListItemBar
                        title="GeeksforGeeks Logo"
                        subtitle="A computer science portal for geeks."
                        actionIcon={
                            <IconButton sx={{ color: "lightgreen" }}>
                                <ThumbUpIcon />
                            </IconButton>
                        }
                    />
                </ImageListItem>
                <ImageListItem cols={3} rows={1}>
                    <img
                        {...srcset(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png",
                            121,
                      
            

                    
                                            Picked
                                    
РЕКОМЕНДУЕМЫЕ СТАТЬИКоличество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Найдите все факторы заданного числа и их побитовое XOR
27 Февраля, 2023
Показать самое длинное имя
27 Февраля, 2023
Форматирование лицензионного ключа
27 Февраля, 2023
Когда я должен использовать список против LinkedList
27 Февраля, 2023
Реализовать быструю сортировку с первым элементом в качестве опорного
27 Февраля, 2023
Алгоритм хеш-сортировки
27 Февраля, 2023


    


        
            
                
                    
                        
                        < PROGLER >
                    
                
                
                    
                        Общее
                        
                        Контакты
                        Политика конфиденциальности
                    
                    
                        Обучение
                        Блог
                    
                
            
            
                © progler.ru 2024. Все права защищены.