Как изменить положение иконки семантически-пользовательского интерфейса Accordion? - PullRequest
Новая
       11

Как изменить положение иконки семантически-пользовательского интерфейса Accordion?

0 голосов
/ 28 января 2019

Реакция semantic-ui page содержит пример аккордеона со значком справа.

enter image description here

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

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

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

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

У меня была похожая проблема, когда я хотел избавиться от иконки через стенографию, потребовалось просмотреть исходный код, чтобы понять это.Если свойство 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' - это то же самоекак настройка содержимого.

0 голосов
/ 28 января 2019

Просто переключите положение компонента <Icon /> после текста.IE 

 <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' }} />
...