Semantic-ui React страница имеет пример Аккордеона со значком справа.
Но код не объясняет, как это делается. Компонент Accordion не имеет свойств значка для изменения значка или положения значка в сокращении.
Я хотел бы изменить значок и положение значка Semantic-ui React Accordion в сокращении, т.е. без необходимости поддерживать состояние компонента вручную, например: <Accordion defaultActiveIndex = {0} panels = {panels} />
Есть ли способ сделать это?
🤔 А знаете ли вы, что...
React использует компонентную архитектуру для организации кода.
Просто переключите положение компонента <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'
аналогичен установке содержимого.