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 >