score:0
do you need the buttons, or just the horizontal scroll? this is a simple example of horizontal scroll section with images:
import react from 'react';
import { makestyles } from '@material-ui/core/styles';
import gridlist from '@material-ui/core/gridlist';
import gridlisttile from '@material-ui/core/gridlisttile';
import gridlisttilebar from '@material-ui/core/gridlisttilebar';
const usestyles = makestyles((theme) => ({
root: {
display: 'flex',
flexwrap: 'wrap',
justifycontent: 'space-around',
overflow: 'hidden',
},
gridlist: {
flexwrap: 'nowrap'
}
}));
const tiledata = [
{
img: 'images/image1.jpg',
title: 'title'
},
{
img: 'images/image2.jpg',
title: 'title'
},
{
img: 'images/image3.jpg',
title: 'title'
}
];
export default function singlelinegridlist() {
const classes = usestyles();
return (
<div classname={classes.root}>
<gridlist classname={classes.gridlist} cols={2.5}>
{tiledata.map((tile) => (
<gridlisttile key={tile.img}>
<img src={tile.img} alt={tile.title} />
<gridlisttilebar
title={tile.title}
/>
</gridlisttile>
))}
</gridlist>
</div>
);
}
i think for the buttons you would need to set a <div>
for each section of 3, and set the href=#id
on each button.
score:0
you can use below code to get it done. i have used some css properties to make it work. this will remove the additional usage of arrows to scroll horizontally.
i have used this in a netflix clone app. this is a row component. i have used it in my home page and passed different genre of movie list to it. based on the genre it will show different movies in a row.
<div classname="row">
{/* title */}
<h2>{title}</h2>
{/* container -> posters */}
<div classname="row__posters">
{/* several row posters */}
{movies.map((movie) => (
<img
key={movie.id}
classname="row__poster row__posterlarge"
src={`${image_base_url}${
islargerow ? movie.poster_path : movie.backdrop_path
}`}
alt={movie.name}
/>
))}
</div>
</div>
below is the css used for above component.
.row {
margin-left: 20px;
color: white;
}
.row__posters {
display: flex;
overflow-x: scroll;
overflow-y: hidden;
padding: 20px;
}
.row__posters::-webkit-scrollbar {
display: none;
}
.row__poster {
width: 100%;
object-fit: contain;
max-height: 100px;
margin-right: 10px;
transition: transform 450ms;
}
.row__posterlarge {
max-height: 250px;
}
.row__posterlarge:hover {
transform: scale(1.09);
}
.row__poster:hover {
transform: scale(1.08);
}
score:0
i can't share the full code because it's mixed a lot with other code that is not related to this question, but here is something similar that i can share:
import react, { usestate } from "react";
import { makestyles } from "@material-ui/core/styles";
import chip from "@material-ui/core/chip";
import box from "@material-ui/core/box";
import tabs from "@material-ui/core/tabs";
import iconbutton from "@material-ui/core/iconbutton";
import styled from "@emotion/styled";
import chevronlefticon from "@material-ui/icons/chevronleftrounded";
import chevronrighticon from "@material-ui/icons/chevronrightrounded";
const styledchip = styled(chip)`
border-radius: 16px;
text-transform: capitalize;
color: ${(props) => (props.selected ? "#ffffff" : "#6877ae")};
background-color: ${(props) => (props.selected ? "#03194f" : "#ffffff")};
border: 4px solid ${"#03194f"};
border-color: ${(props) =>
props.selected ? "#03194f" : "rgba(0, 83, 229, 0.12)"};
.muichip-root&:hover {
background-color: ${(props) => (props.selected ? "#03194f" : "")};
}
`;
const stylediconbutton = styled(iconbutton)`
left: ${(props) => (props.isleft ? "0" : "none")};
right: ${(props) => (props.isleft ? "none" : "0")};
height: 32px;
width: 32px;
position: absolute;
border-radius: 16px;
border: 1px solid gray;
//top: 33%;
background-color: white;
color: rgba(0, 83, 229, 1);
border-color: rgba(0, 83, 229, 0.12);
z-index: 1;
opacity: 1;
margin: 20px;
:hover {
box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
0px 4px 5px rgba(0, 0, 0, 0.14), 0px 1px 10px rgba(0, 0, 0, 0.12);
border-color: white;
background-color: inherit;
}
`;
const usestyles = makestyles((theme) => ({
root: {
display: "flex",
justifycontent: "center",
flexwrap: "nowrap",
liststyle: "none",
padding: theme.spacing(0.5),
margin: 0,
overflow: "auto",
maxwidth: "100%"
},
chip: {
margin: theme.spacing(2)
}
}));
export default function chipsarray() {
const classes = usestyles();
const [chipdata, setchipdata] = react.usestate([
{ key: 0, label: "angular" },
{ key: 1, label: "jquery" },
{ key: 2, label: "polymer" },
{ key: 3, label: "react" },
{ key: 4, label: "vue" },
{ key: 5, label: "knockout" },
{ key: 6, label: "ember" },
{ key: 7, label: "d3" },
{ key: 8, label: "google charts" },
{ key: 9, label: "c+" },
{ key: 10, label: "c++" },
{ key: 11, label: "nodejs" }
]);
const [selectedindustryfilter, setselectedindustryfilter] = react.usestate(
"angular"
);
return (
<box classname={classes.root}>
<tabs
variant="scrollable"
scrollbuttons="on"
aria-label="scrollable auto tabs example"
scrollbuttoncomponent={(props) => {
if (props.direction === "left") {
return (
<stylediconbutton isleft {...props}>
<chevronlefticon />
</stylediconbutton>
);
} else if (props.direction === "right") {
return (
<stylediconbutton {...props}>
<chevronrighticon />
</stylediconbutton>
);
} else {
return null;
}
}}
>
{chipdata.map((data) => {
return (
<styledchip
label={data.label}
onclick={() => {
setselectedindustryfilter(data.label);
console.log(data.label);
}}
selected={data.label === selectedindustryfilter}
key={data.key}
classname={classes.chip}
/>
);
})}
</tabs>
</box>
);
}
also check it here: https://codesandbox.io/s/demo-material-ui-chips-single-line-with-scroll-forked-2f0z30?file=/src/app.js
score:1
maybe you can try using a library like this one:
instead of putting images in this component, try putting cards instead.
Source: stackoverflow.com
Related Query
- React + Material-UI | How to create horizontal scroll cards?
- How can I stop my material UI Cards from going off screen creating a horizontal scroll situation?
- How to create sticky headers on scroll with react
- How can I create a color variant from a base color in React Material UI?
- How to add horizontal scroll in Material UI grid
- How to create a sticky navbar on scroll in react
- how to create a space between list items in React material
- How to create insertion point to mount styles in shadow dom for MUI material v5 in React custom element
- How to create a dynamic Material UI Icon Atom in StoryBook and React TypeScript?
- How to create <h1/> element that uses React Material User Interface theme?
- How to make Horizontal Scroll with arrow in React JS?
- How to create a horizontal timeline in React
- How to supply background color as a prop for cards using Material UI in React JS?
- How to create two onclick events on a clickable cards in react
- How to set horizontal scroll position react
- How to add vertical scroll to my React material table?
- How to Programmatically Scroll Drawer in Material UI React JS?
- How to create selects and states dynamically on react using Material UI?
- Material UI Cards subttitle introduces Horizontal Scroll bar
- How to create a ref to child component, store it in context and pass it to a sibling in React with Material UI
- How to create helper file full of functions in react native?
- How to create a React app directly in the current folder
- How to create unique keys for React elements?
- How to create dynamic href in react render function?
- How is ESLint integrated into Create React App?
- How to create multiple page app using react
- <Grid> in material ui causes horizontal scroll- React
- How to create a React Modal (which is appended to <body>) with transitions?
- How to make a Material UI react Button act as a react-router-dom Link?
- How to create text border in React Native?
More Query from same tag
- Change one of params in url with react-router v4
- most concise way to pass props to a react component?
- How to use this highchart map in reactJS
- What webpack4 loader is used to load *.svg files, *.gif, *.eot?
- Unhandled Rejection (TypeError): Cannot read property 'map' of undefined? (React-firebase)
- How to call Grpahql with .Net core from a React component using Axios?
- Search Input for ANTD Table
- Class object not working properly in reducer
- Error: Element type is invalid when using react-router-bootstrap LinkContainer
- How to create a static function within a functional React component?
- Why does loading page directly with url doesn't show the data using react?
- Add and remove score with React
- Correct syntax to apply a method within render () using arrow function
- Sorting data (in a state) when state gets updated (React) - renders with delay
- How to use environment variables with webpack+reactjs?
- How to get a code coverage report with react-create-app?
- dynamically generate headings and rows reactjs using map - nested
- Call method from child (class based component) in parent (functional component)
- Set custom text for material icon
- How do you use useMutation from react-apollo-hook to execute a delete mutation?
- How to automatically move JSON data depending on Boolean value
- CSS change where 100% is located
- React Hooks react-hooks/exhaustive-deps eslint rule seems overly sensitive
- Sending request to elasticsearch using axios to map cards
- Redux using combineReducers returning blank page
- Adding space to array list item in React
- Using included script in index.html in React components
- Extend Enzyme js
- How to deal with huge output of JSON data in Flask backend
- Text color can not be made white