I am having Issues with Materialize cards in react I want them to display side by side and instead they are displaying vertically one on top of the other. Any help would be much appreciated.
{this.state.players.length ? (
<Row className="basketball-BG">
<Col m={3}>
<div className="card-content">
<PlayersList>
{this.state.players.map(player => (
<PlayersInfo key={player._id}>
<Card className="card small'"
header={<CardTitle ></CardTitle>}>
<a className="player-card" href={"/players/" + player._id}>
<div className="card-content">
<h4>
{player.lName +" "}
{player.fName}
</h4>
<p>
{player.jersey}
</p>
<p>
{player.position}
</p>
</div>
</a>
<DeleteBtn onClick={() => this.deletePlayer(player._id)} />
</Card>
</PlayersInfo>
))}
</PlayersList>
</div>
</Col>
</Row>
) : (
<h3 className="center">You Dont Have any Players yet Add them to the roster</h3>
)}
You can use flex layouts
// in your component
<PlayersList class='row-wise-spread'>
</PlayersList>
In a css file
.row-wise-spread {
display: flex;
flex-direction: row;
}
Related
I want to be able to make a dynamic card component that will eventialy call an api to get the data. Right now I will be using dummy data.
I want a name, description and star rating for each card. What I am not to sure about is how I would get the star images in each card component.
export const ReviewCards: React.FC<ReviewCardsProps> = ({ name, star, description }) => {
return (
<>
<Card className="reviewCards sm:h-415">
<CardContent>
<div className="flex p-4 justify-between">
<p className="text-lg">{name}</p>
<div className="flex w-3.5 space-x-1.5 justify-end">
<img src={StarIcon} alt="Ratings icon" />
<img src={StarIcon} alt="Ratings icon" />
<img src={StarIcon} alt="Ratings icon" />
<img src={StarIcon} alt="Ratings icon" />
<img src={EmptyStar} alt="Ratings icon" />
</div>
</div>
<p className="text-sm font-extralight p-7">{description}</p>
</CardContent>
</Card>
)
}
I dont want to manually put in the images. I want to be able to say
<div className="flex w-3.5 space-x-1.5 justify-end">{star}<div>
And then when calling the component I want to be able to say:
<ReviewCard name="Bianca", star={4} description={...} /
You can create a array and assign the images accordingly..
// Array index starts with 0, so added 1 to the index
const HelperStar = (index) =>
index + 1 < star ? StarIcon : index + 1 - 0.5 === star ? HalfStar : EmptyStar;
const imageSource = new Array(5)
.fill(0)
.map((data, index) => HelperStar(index);
return (
// ...
<div className="flex w-3.5 space-x-1.5 justify-end">
{imageSource.map((data) => <img src={data} alt="Ratings icon" />}
</div>
</div>
//..
);
Hello I'm kinda noob with react and I don't know how to slice every 1 item into a new div and then display it on the page with grid grid-cols-2 gap-4 tailwindcss styling, so I'd like to have 2 colums and 2 items in each row. Right now even I apply this tailwindcss there is 1 column and every 1 item is on a new row ;/ So I got to slice every one item.title, item.coverImage.url in a new div?
export default function BlogPage({ items }) {
console.log(items);
return (
<div className="max-w-lg mx-auto">
{items?.map((item) => (
<div key={item.slug} className="grid grid-cols-2 gap-4">
<Link href={`/portfolio/${item.slug}`}>
<div>
<a>
{item.title}
<Image
src={item.coverImage.url}
height={item.coverImage.height}
width={item.coverImage.width}
/>
</a>
</div>
</Link>
</div>
))}
</div>
);
}
You just need to add class col-span-1 to the div to explicitly tell how much column-span it needs to occupy.
export default function BlogPage({ items }) {
console.log(items);
return (
<div className="max-w-lg mx-auto">
{items?.map((item) => (
<div key={item.slug} className="grid grid-cols-2 gap-4">
<Link href={`/portfolio/${item.slug}`}>
<div className="col-span-1">
<a>
{item.title}
<Image
src={item.coverImage.url}
height={item.coverImage.height}
width={item.coverImage.width}
/>
</a>
</div>
</Link>
</div>
))}
</div>
);
}
I have a structure which consists:
an image horizontally stacked with a text array which are vertically stacked like this:
Here is the snippet for the same:
import React from "react";
export default function BoxHeader(props) {
return (
<div style={{ marginTop: `${props.Gap}rem` }}>
<div className="Image-wrapper">
<img
className="Profile-Image-Decorator"
alt=""
src="https://i.redd.it/rm6sqwpmesb41.jpg"
></img>
</div>
<div className="Collapsible-Navbar">
{props.Msg.map((element) => (
<div className="Message-Holder">{element}</div>
))}
</div>
</div>
);
}
What I want to achieve is on reducing the screensize, the text should move below the image, but what I actually get is this:
By using Bootstrap classes I managed to make a responsive navbar... but I wanted the same with my this section as well. Does anyone have any suggestions for the same?
For reproducing goto this link
Use Row and Col components to create responsive grids.
...
import { Row, Col } from "react-bootstrap";
export default function BoxHeader(props) {
return (
<div style={{ marginTop: `${props.Gap}rem` }}>
<div className="Body-wrapper">
<Row>
<Col sm={12} md={6}>
<div className="Image-wrapper">
<img
className="Profile-Image-Decorator"
alt=""
src="https://i.redd.it/rm6sqwpmesb41.jpg"
></img>
</div>
</Col>
<Col sm={12} md={6}>
<div className="Collapsible-Navbar">
{props.Msg.map((element) => (
<div className="Message-Holder">{element}</div>
))}
</div>
</Col>
</Row>
</div>
</div>
);
}
I have a bunch of cards and I would like to have transition with a delay on each item but couldn't really figure it out on how to implement this.
According to the documentation I have to use something like this:
<Transition.Group
as={List}
duration={200}
divided
size='huge'
verticalAlign='middle'
>
{items.map((item) => (
<List.Item key={item}>
<Image avatar src={`/images/avatar/small/${item}.jpg`} />
<List.Content header={_.startCase(item)} />
</List.Item>
))}
</Transition.Group>
but I didn't really get what is as={List} doing there. That's why couldn't really go forward with my solution. Any help will be appreciated.
Here is what I have:
<Card.Group itemsPerRow={itemsPerRow} centered>
{data.map((e) => {
const dateToFormat = e.created_at;
const userIndex = data.indexOf(e);
return (
<Card raised>
<Image
src={readmeFiles[userIndex].image}
wrapped
size="large"
ui={false}
onClick={() => {
const index = data.indexOf(e);
clickHandler(index);
}}
/>
<Card.Content>
<Card.Header></Card.Header>
<Card.Meta>
<span className="date">{e.name}</span>
</Card.Meta>
<Card.Description>{e.description}</Card.Description>
</Card.Content>
<Card.Content extra>
<a>
<Icon name="calendar alternate outline" />
Created: <Moment date={dateToFormat} fromNow />
</a>
</Card.Content>
</Card>
);
})}
The as={List} tells semantic to render this Transition.Group component as a List component, which serves as a parent to the List.Item components. Those will only render correctly if they have a List as parent. You can check the resulting html out here.
The following snippet:
<Transition.Group
as={List}
duration={200}
divided
size='huge'
verticalAlign='middle'
>
{items.map((item) => (
<List.Item key={item}>
<Image avatar src={`/images/avatar/small/${item}.jpg`} />
<List.Content header={_.startCase(item)} />
</List.Item>
))}
</Transition.Group>
Generates the following html:
<div role="list" class="ui huge divided middle aligned list">
<div role="listitem" class="item fade visible transition">
<img src="/images/avatar/small/ade.jpg" class="ui avatar image" />
<div class="content"><div class="header">Ade</div></div>
</div>
<div role="listitem" class="item fade visible transition">
<img src="/images/avatar/small/chris.jpg" class="ui avatar image" />
<div class="content"><div class="header">Chris</div></div>
</div>
<div role="listitem" class="item fade visible transition">
<img src="/images/avatar/small/christian.jpg" class="ui avatar image" />
<div class="content"><div class="header">Christian</div></div>
</div>
</div>
As you can see the first div says role="List" and has the list css class added. In your case the parent would be the Card.Group component.
I'm trying to align horizontal card using grid with react-bootstrap and map function
I'm using redux to bring the Data through the props so I create a JSON to traverse it with a function Map
this is a fraction of my code
render() {
//const { tablaCliente } = this.state
//const { isLoading } = this.state
const { entity } = this.props;
return (
<div>
<Header></Header>
<div className="col-xs-4">
<a className="btn btn-primary" href="/newclient">Nuevo Cliente</a>
</div>
<br />
<center>
<Spinner animation="border" role="status">
<span className="sr-only">Loading...</span>
</Spinner>
</center>
<Container>
{entity && entity.getAllEntities && entity.getAllEntities.length > 0 && entity.getAllEntities.map((item, index) => {
return (
<CardGroup value={item}key={index}>
<Card style={{ width: '1rem' }} >
<Card.Img variant="top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16b0e6bd8ef%20text%20%7B%20fill%3A%23999%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16b0e6bd8ef%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23373940%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.203125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" />
<Card.Body>
<Card.Title> Cliente {item.name}</Card.Title>
<Card.Text>
{item.description}
</Card.Text>
</Card.Body>
<ListGroup className="list-group-flush">
<ListGroupItem>Estado:{''}{JSON.stringify(item.state)}</ListGroupItem>
<ListGroupItem>Creado por: {item.createby}</ListGroupItem>
</ListGroup>
<Card.Body>
<Card.Link href="/cliente">Card Link</Card.Link>
<Card.Link href="/cliente">Editar</Card.Link>
</Card.Body>
</Card>
</CardGroup>)
})}
</Container>
</div>
);
}
I dont use react-bootstrap but u can achieve it by doing
<Container>
<div class='row'>
{this.map(value => {
return (
<div class='col-md-6'>
<Card />
</div>
)
});}
</div>
</Container>
This should work
Wrap the map function in row and the returning jsx in col
And dont just write a whole logic in jsx use functions or components