React Collapsible - 添加图标

Question

我正在像这样使用 React-Collapsible：

<Collapsible trigger="Fiche de référencement"  >
<h2>Hello world</h2>
</Collapsible >

我想放置一个带有“Fiche de référencement”字样的图标，但我不知道该怎么做？ 你能帮助我吗 ？ 谢谢

Answer 1

你不会给这个东西传递一个图标。 你可以做的是看看它返回什么， https://github.com/glennflanagan/react-collapsible/blob/develop/src/Collapsible.js#L248

在任何情况下，这都由具有类Collapsible__trigger的 span 元素处理。 可以在此处的示例中找到有关它的信息： https : //github.com/glennflanagan/react-collapsible/blob/develop/example/_src/sass/components/_Collapsible.scss#L37

Answer 2

这是一个例子——

import { BsChevronDown } from "react-icons/bs"; //react-icon
.
.
<Collapsible trigger={["Serial No.", <BsChevronDown />]}>
  <div/> //children
</Collapsible>

css-

.Collapsible__trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.Collapsible__trigger.is-open svg {
  transform: rotate(180deg);
}

Answer 3

<可折叠触发器={[Fiche de référencement, <Icon name="remove"]} >

你好，世界

 <Collapsible trigger="Fiche de référencement" > <h2>Hello world</h2> </Collapsible >