如何更改语义用户界面反应手风琴的图标位置？

Question

语义ui React page带有一个手风琴示例，其图标在右侧。

但是代码没有解释如何完成。手风琴组件没有用于更改图标或图标位置的图标道具。

我想快速更改Semantic-ui React手风琴的图标和图标位置，即无需手动维护组件状态，例如：printf

有没有办法做到这一点？

Answer 1

只需将<Icon />组件的位置切换为文本之后。 I.E。

 <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 name='dropdown' style={{"marginLeft": '2em' }} />

Answer 2

有一个类似的问题，我想通过速记来删除该图标，因此需要查看源代码来找出它。如果默认情况下为Accordion.Title设置了content属性（或者在您的情况下为速记标题属性），则会添加下拉图标，如果没有，则可以使用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'与设置内容相同。