如何在ReactJS中使用Bootstrap点击时全屏显示。

huangapple go评论62阅读模式
英文:

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 .

&lt;Card style={{ width: &#39;18rem&#39; }}&gt;
    &lt;Card.Img variant=&quot;top&quot; src={images} style={{marginLeft:10,marginTop:20, width: &#39;15rem&#39;,height: &#39;15rem&#39; }}/&gt;
    &lt;Card.Body&gt;
      &lt;Card.Title&gt;{name}&lt;/Card.Title&gt;
    &lt;/Card.Body&gt;
    &lt;ListGroup className=&quot;list-group-flush&quot;&gt;
      &lt;ListGroup.Item&gt;{number}&lt;/ListGroup.Item&gt;
      &lt;ListGroup.Item&gt;{type}&lt;/ListGroup.Item&gt;
    &lt;/ListGroup&gt;
    &lt;Card.Body&gt;
      &lt;Button variant=&quot;primary&quot;&gt;Go somewhere&lt;/Button&gt;
    &lt;/Card.Body&gt;
  &lt;/Card&gt;

答案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 &#39;react&#39;;
import { Card, Button, Modal } from &#39;react-bootstrap&#39;;

function ImageCard({ name, number, type, image }) {
  const [showModal, setShowModal] = useState(false);

  const handleModalShow = () =&gt; setShowModal(true);
  const handleModalClose = () =&gt; setShowModal(false);

  return (
    &lt;&gt;
      &lt;Card style={{ width: &#39;18rem&#39; }}&gt;
        &lt;Card.Img
          variant=&quot;top&quot;
          src={image}
          style={{ marginLeft: 10, marginTop: 20, width: &#39;15rem&#39;, height: &#39;15rem&#39; }}
          onClick={handleModalShow}
        /&gt;
        &lt;Card.Body&gt;
          &lt;Card.Title&gt;{name}&lt;/Card.Title&gt;
        &lt;/Card.Body&gt;
        &lt;ListGroup className=&quot;list-group-flush&quot;&gt;
          &lt;ListGroup.Item&gt;{number}&lt;/ListGroup.Item&gt;
          &lt;ListGroup.Item&gt;{type}&lt;/ListGroup.Item&gt;
        &lt;/ListGroup&gt;
        &lt;Card.Body&gt;
          &lt;Button variant=&quot;primary&quot;&gt;Go somewhere&lt;/Button&gt;
        &lt;/Card.Body&gt;
      &lt;/Card&gt;

      &lt;Modal show={showModal} onHide={handleModalClose} size=&quot;lg&quot;&gt;
        &lt;Modal.Header closeButton&gt;&lt;/Modal.Header&gt;
        &lt;Modal.Body&gt;
          &lt;img src={image} alt={name} style={{ width: &#39;100%&#39;, height: &#39;auto&#39; }} /&gt;
        &lt;/Modal.Body&gt;
      &lt;/Modal&gt;
    &lt;/&gt;
  );
}

huangapple
  • 本文由 发表于 2023年3月7日 05:35:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/75656064.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定