如何改变语义的UI图标位置反应手风琴？

Question

语义的UI阵营page具有在右手侧上的图标的手风琴的一个例子。

但是，代码没有解释如何做到这一点。手风琴组件没有图标的道具来改变图标或速记的图标的位置。

我想更改图标和语义的UI的图标位置中的简写，即阵营手风琴，而不必保持组件状态手动例如：<Accordion defaultActiveIndex={0} panels={panels} />

有没有办法做到这一点？

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

也有类似的问题，即我想获得通过速记摆脱图标，花了看源代码来弄明白。如果content属性设置为Accordion.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'是一样的设置内容。