Как изменить положение значка семантического пользовательского интерфейса, реагирующего на аккордеон?

Semantic-ui React страница имеет пример Аккордеона со значком справа.

Как изменить положение значка семантического пользовательского интерфейса, реагирующего на аккордеон?

Но код не объясняет, как это делается. Компонент Accordion не имеет свойств значка для изменения значка или положения значка в сокращении.

Я хотел бы изменить значок и положение значка Semantic-ui React Accordion в сокращении, т.е. без необходимости поддерживать состояние компонента вручную, например: <Accordion defaultActiveIndex = {0} panels = {panels} />

Есть ли способ сделать это?

🤔 А знаете ли вы, что...
React использует компонентную архитектуру для организации кода.


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

У меня была аналогичная проблема, когда я хотел избавиться от значка с помощью стенографии, чтобы понять это, потребовалось просмотреть исходный код. Если свойство content установлено для Accordion.Title (или, в вашем случае, реквизит заголовка в сокращении), по умолчанию добавляется значок раскрывающегося списка, если нет, значок можно добавить с помощью свойства children.

Если вы хотите управлять значком (используя пример с сайта реакции в качестве отправной точки):

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

Обратите внимание, что title: 'some value' аналогичен установке содержимого.