英文:
how to display full screen on click with reactjs bootstrap
问题
我正在使用Bootstrap样式,当我点击图片时,我希望图片全屏显示。
这是代码:
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src={images} style={{ marginLeft: 10, marginTop: 20, width: '15rem', height: '15rem' }}/>
<Card.Body>
<Card.Title>{name}</Card.Title>
</Card.Body>
<ListGroup className="list-group-flush">
<ListGroup.Item>{number}</ListGroup.Item>
<ListGroup.Item>{type}</ListGroup.Item>
</ListGroup>
<Card.Body>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
英文:
Iam using bootstrap styling and i want to get the image with full screen when I click on the image.
this is the code .
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src={images} style={{marginLeft:10,marginTop:20, width: '15rem',height: '15rem' }}/>
<Card.Body>
<Card.Title>{name}</Card.Title>
</Card.Body>
<ListGroup className="list-group-flush">
<ListGroup.Item>{number}</ListGroup.Item>
<ListGroup.Item>{type}</ListGroup.Item>
</ListGroup>
<Card.Body>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
答案1
得分: -1
要在用户点击图像时以全屏模式显示图像,您可以使用Bootstrap Modal组件。
import { useState } from 'react';
import { Card, Button, Modal } from 'react-bootstrap';
function ImageCard({ name, number, type, image }) {
const [showModal, setShowModal] = useState(false);
const handleModalShow = () => setShowModal(true);
const handleModalClose = () => setShowModal(false);
return (
<>
<Card style={{ width: '18rem' }}>
<Card.Img
variant="top"
src={image}
style={{ marginLeft: 10, marginTop: 20, width: '15rem', height: '15rem' }}
onClick={handleModalShow}
/>
<Card.Body>
<Card.Title>{name}</Card.Title>
</Card.Body>
<ListGroup className="list-group-flush">
<ListGroup.Item>{number}</ListGroup.Item>
<ListGroup.Item>{type}</ListGroup.Item>
</ListGroup>
<Card.Body>
<Button variant="primary">前往其他地方</Button>
</Card.Body>
</Card>
<Modal show={showModal} onHide={handleModalClose} size="lg">
<Modal.Header closeButton></Modal.Header>
<Modal.Body>
<img src={image} alt={name} style={{ width: '100%', height: 'auto' }} />
</Modal.Body>
</Modal>
</>
);
}
请注意,这段代码包含React组件,用于在用户点击图像时显示全屏模态框。
英文:
To display the image in full-screen mode when the user clicks on it, you can use the Bootstrap Modal component.
import { useState } from 'react';
import { Card, Button, Modal } from 'react-bootstrap';
function ImageCard({ name, number, type, image }) {
const [showModal, setShowModal] = useState(false);
const handleModalShow = () => setShowModal(true);
const handleModalClose = () => setShowModal(false);
return (
<>
<Card style={{ width: '18rem' }}>
<Card.Img
variant="top"
src={image}
style={{ marginLeft: 10, marginTop: 20, width: '15rem', height: '15rem' }}
onClick={handleModalShow}
/>
<Card.Body>
<Card.Title>{name}</Card.Title>
</Card.Body>
<ListGroup className="list-group-flush">
<ListGroup.Item>{number}</ListGroup.Item>
<ListGroup.Item>{type}</ListGroup.Item>
</ListGroup>
<Card.Body>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
<Modal show={showModal} onHide={handleModalClose} size="lg">
<Modal.Header closeButton></Modal.Header>
<Modal.Body>
<img src={image} alt={name} style={{ width: '100%', height: 'auto' }} />
</Modal.Body>
</Modal>
</>
);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论