如何更改语义-ui反应手风琴的图标位置？

Question

semantic-ui React page 有一个 Accordion 示例，其图标位于右侧。

但代码并没有解释这是如何完成的。 Accordion 组件没有图标道具来更改图标或速记图标的位置。

我想以简写方式更改 Semantic-ui React Accordion 的图标和图标位置，即无需手动维护组件状态 eg：<Accordion defaultActiveIndex={0} panels={panels} />

有没有办法做到这一点？

Answer 1

有一个类似的问题，我想通过速记摆脱图标，它需要查看源代码才能解决。如果为 Accordion.Title 设置了 content 属性（或者在您的情况下为速记中的 title 属性），则默认添加下拉图标，如果没有，则可以使用 children 属性添加图标。

如果你想控制图标（使用来自反应站点的example作为起点）：

const panels = [
  {
    key: 'what-is-dog',
    title: {
      children:(
       /*add your icon and/or styles here*/
        <span>
          <Icon name='random'/>
        </span>
      )
    },
   . . .
  },
]

注意title: 'some value'与设置内容相同。

Answer 2

只需将<Icon /> 组件的位置切换到文本之后。即。

 <Accordion>
    <Accordion.Title active={activeIndex === 0} index={0} onClick={this.handleClick}>
      <Icon name='dropdown' />
      What is a dog?
    </Accordion.Title>
    <Accordion.Content active={activeIndex === 0}>
      <p>
        A dog is a type of domesticated animal. Known for its loyalty and 
        faithfulness, it can
        be found as a welcome guest in many households across the world.
      </p>
    </Accordion.Content>

在左边，但下面显示右边的图标：

 <Accordion>
    <Accordion.Title active={activeIndex === 0} index={0} onClick={this.handleClick}>
        What is a dog?
       <Icon name='dropdown' />
    </Accordion.Title>
    <Accordion.Content active={activeIndex === 0}>
      <p>
        A dog is a type of domesticated animal. Known for its loyalty and 
         faithfulness, it can
        be found as a welcome guest in many households across the world.
      </p>
    </Accordion.Content>

另外，如果你想给Icon留出空间，你也可以将样式传递给prop，例如：

<Icon name='dropdown' style={{"marginLeft": '2em' }} />