切换 div 以扩展语义 ui 卡片组件
Toggle div to expand semantic ui card component
我正在使用来自 Semantic-UI-React 的 <Card>
组件。我有一组卡片显示一些随机信息。我定义了呈现按钮的 extra
道具。我的想法是让这个按钮在单击时 toggle/expand 一个 div 来显示更多信息。我环顾四周,并没有找到太多关于如何实现这一点的信息。
我也从语义 ui 研究了 <Accordion>
,但无法让它很好地嵌套在卡片组件中。
我 created a sandbox 展示我到目前为止所拥有的以及我上面解释的内容的一般外观。
为简洁起见,我只post下面组中的一张卡的代码。
<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>
如果您想展开以显示更多内容,您可以跟踪哪些卡片在某种反应状态下展开。在 UI 中,您可以使用状态来确定是否应该呈现特定卡片的额外内容。
EX:
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
我同意@brandon-r 的观点,您可以通过处理状态对象(在我的例子中是一个数组)来处理显示的额外内容。我所做的与他的示例不同的是利用 <Card.Content extra>
组件,它处理所有样式问题。
为了处理额外内容的打开和关闭,我使用了一个简单的reducer。我喜欢在那些需要更复杂状态处理的 UI 交互上使用 useReducer
挂钩。然后我创建了三个组件:一个在打开时显示额外内容,另一个显示显示内容的按钮,第三个在两者之间切换。我这样做是为了以后能够泛化它。
无论如何,这是我的分叉 CodeSandbox 的 link 以及我对解决方案的看法:
https://codesandbox.io/embed/semantic-ui-card-extra-content-toggle-kybt2
希望对你有帮助
编辑 #1
已将 style={{height: "100%"}}
添加到卡片中,以便在打开其中一张卡片时保持其大小。
编辑 #2
添加显示带有详细说明的卡片的图片。
<Card color="blue" style={{ height: "100%" }}>
<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.'" />
<ExtraContentAccordion
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac commodo diam, et tincidunt massa. Sed aliquet tortor purus, in pulvinar enim mattis ac. Maecenas vestibulum cursus lorem, quis fermentum enim lacinia a. Ut nec feugiat nisl. Morbi finibus hendrerit diam, id iaculis nibh feugiat sed. Sed non justo turpis. Fusce neque quam, facilisis eu aliquam vitae, hendrerit nec nulla. Integer metus sapien, dictum eget viverra et, dictum in lectus. Integer vitae dolor ut libero dictum tristique eget non nunc. Suspendisse diam urna, pretium sed elementum sed, fermentum eu leo. Donec augue tortor, rhoncus id pulvinar ac, fringilla eu est. Duis et ante tristique dui molestie maximus at ut enim. Curabitur facilisis tempor lorem quis scelerisque. Maecenas enim leo, mollis at egestas in, vulputate eget risus."
onToggle={toggleCard(1)}
open={state[1]}
/>
</Card>
我正在使用来自 Semantic-UI-React 的 <Card>
组件。我有一组卡片显示一些随机信息。我定义了呈现按钮的 extra
道具。我的想法是让这个按钮在单击时 toggle/expand 一个 div 来显示更多信息。我环顾四周,并没有找到太多关于如何实现这一点的信息。
我也从语义 ui 研究了 <Accordion>
,但无法让它很好地嵌套在卡片组件中。
我 created a sandbox 展示我到目前为止所拥有的以及我上面解释的内容的一般外观。
为简洁起见,我只post下面组中的一张卡的代码。
<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>
如果您想展开以显示更多内容,您可以跟踪哪些卡片在某种反应状态下展开。在 UI 中,您可以使用状态来确定是否应该呈现特定卡片的额外内容。
EX:
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
我同意@brandon-r 的观点,您可以通过处理状态对象(在我的例子中是一个数组)来处理显示的额外内容。我所做的与他的示例不同的是利用 <Card.Content extra>
组件,它处理所有样式问题。
为了处理额外内容的打开和关闭,我使用了一个简单的reducer。我喜欢在那些需要更复杂状态处理的 UI 交互上使用 useReducer
挂钩。然后我创建了三个组件:一个在打开时显示额外内容,另一个显示显示内容的按钮,第三个在两者之间切换。我这样做是为了以后能够泛化它。
无论如何,这是我的分叉 CodeSandbox 的 link 以及我对解决方案的看法:
https://codesandbox.io/embed/semantic-ui-card-extra-content-toggle-kybt2
希望对你有帮助
编辑 #1
已将 style={{height: "100%"}}
添加到卡片中,以便在打开其中一张卡片时保持其大小。
编辑 #2 添加显示带有详细说明的卡片的图片。
<Card color="blue" style={{ height: "100%" }}>
<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.'" />
<ExtraContentAccordion
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac commodo diam, et tincidunt massa. Sed aliquet tortor purus, in pulvinar enim mattis ac. Maecenas vestibulum cursus lorem, quis fermentum enim lacinia a. Ut nec feugiat nisl. Morbi finibus hendrerit diam, id iaculis nibh feugiat sed. Sed non justo turpis. Fusce neque quam, facilisis eu aliquam vitae, hendrerit nec nulla. Integer metus sapien, dictum eget viverra et, dictum in lectus. Integer vitae dolor ut libero dictum tristique eget non nunc. Suspendisse diam urna, pretium sed elementum sed, fermentum eu leo. Donec augue tortor, rhoncus id pulvinar ac, fringilla eu est. Duis et ante tristique dui molestie maximus at ut enim. Curabitur facilisis tempor lorem quis scelerisque. Maecenas enim leo, mollis at egestas in, vulputate eget risus."
onToggle={toggleCard(1)}
open={state[1]}
/>
</Card>