[英]React Collapsible - Add an icon
I'm using React-Collapsible like this :我正在像这样使用 React-Collapsible:
<Collapsible trigger="Fiche de référencement" >
<h2>Hello world</h2>
</Collapsible >
I want to put an icon wit the text "Fiche de référencement", but I don't know how can I do that ?我想放置一个带有“Fiche de référencement”字样的图标,但我不知道该怎么做? Can you help me ?
你能帮助我吗 ? Thank you
谢谢
You aren't going to pass an icon to this thing.你不会给这个东西传递一个图标。 What you can do is look at what it returns, https://github.com/glennflanagan/react-collapsible/blob/develop/src/Collapsible.js#L248
你可以做的是看看它返回什么, https://github.com/glennflanagan/react-collapsible/blob/develop/src/Collapsible.js#L248
In any case, this is handled by the span element with the class Collapsible__trigger
.在任何情况下,这都由具有类
Collapsible__trigger
的 span 元素处理。 Information on it can be found in the example here: https://github.com/glennflanagan/react-collapsible/blob/develop/example/_src/sass/components/_Collapsible.scss#L37可以在此处的示例中找到有关它的信息: https : //github.com/glennflanagan/react-collapsible/blob/develop/example/_src/sass/components/_Collapsible.scss#L37
Here is an example-这是一个例子——
import { BsChevronDown } from "react-icons/bs"; //react-icon
.
.
<Collapsible trigger={["Serial No.", <BsChevronDown />]}>
<div/> //children
</Collapsible>
Css- css-
.Collapsible__trigger {
display: flex;
justify-content: space-between;
align-items: center;
}
.Collapsible__trigger.is-open svg {
transform: rotate(180deg);
}
<Collapsible trigger={[Fiche de référencement, <Icon name="remove"]} > <可折叠触发器={[Fiche de référencement, <Icon name="remove"]} >
<Collapsible trigger="Fiche de référencement" > <h2>Hello world</h2> </Collapsible >
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.