时间戳

首页 > 解决方案 > 切换 div 展开语义 ui 卡片组件

reactjs - 切换 div 展开语义 ui 卡片组件

问题描述

我正在使用<Card>Semantic-UI-React 中的组件。我有一组显示一些随机信息的卡片。我extra定义了渲染按钮的道具。我的想法是让这个按钮在单击时切换/展开一个 div 以显示更多信息。我环顾四周，找不到太多关于如何实现这一目标的信息。

我<Accordion>也从语义 ui 中进行了研究，但无法让它很好地嵌套在卡片组件中。

我创建了一个沙箱来展示我到目前为止所拥有的内容以及我上面解释的内容的一般外观。

为简洁起见，我只会在下面的组中发布一张卡的代码。

 <Card color="blue">
     <Card.Content header="Elliot" textAlign="center" />
     <Card.Content description="'Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'" />
     <Card.Content extra>
       <Button basic circular icon size="tiny">
       <Icon name="plus circle" />
       </Button>
       Show More
     </Card.Content>
 </Card>

标签： reactjssemantic-ui

解决方案

如果您想展开以显示更多内容，您可以跟踪哪些卡片以某种反应状态展开。在 UI 中，您可以使用状态来确定是否应该为特定卡片呈现额外内容。

前任：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Card, Button, Icon } from "semantic-ui-react";

import "./styles.css";

function App() {
  const [expanded, setExpanded] = useState({});
  const cards = [1, 2, 3, 4, 5, 6];
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Card.Group itemsPerRow={3}>
        {cards.map(cardNumber => (
          <Card color="blue">
            <Card.Content header="Elliot" textAlign="center" />
            <Card.Content description="'Elliot is a sound engineer living in Nashville who enjoys playing guitar and hanging with his cat.'" />
            <Card.Content extra>
              <Button
                basic
                circular
                icon
                size="tiny"
                onClick={() =>
                  setExpanded({
                    ...expanded,
                    [cardNumber]: !expanded[cardNumber]
                  })
                }
              >
                <Icon name="plus circle" />
              </Button>
              {expanded[cardNumber] && (
                <div style={{ height: 200 }}>
                  Extra content expanded for card {cardNumber}
                </div>
              )}
              Show More
            </Card.Content>
          </Card>
        ))}
      </Card.Group>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是一个简短的沙箱，可以查看它的外观：https ://codesandbox.io/s/modest-mayer-t12ot

推荐阅读