How can I change the dropdown icon in semantic-ui react accordion?
const panel1Panels = [
{ key: 'panel-1a', title: 'Panel 1A', content: 'Panel 1A Contents' },
{ key: 'panel-1b', title: 'Panel 1B', content: 'Panel 1B Contents' },
]
const AccordionExample = () =>
<Accordion defaultActiveIndex={0} panels={panel1Panels} styled />
You can add panels manually like in Semantic-UI React examples
<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.Title active={activeIndex === 1} index={1} onClick={this.handleClick}>
<Icon name='dropdown' />
What kinds of dogs are there?
</Accordion.Title>
<Accordion.Content active={activeIndex === 1}>
<p>
There are many breeds of dogs. Each breed varies in size and temperament. Owners often
select a breed of dog that they find to be compatible with their own lifestyle and
desires from a companion.
</p>
</Accordion.Content>
<Accordion.Title active={activeIndex === 2} index={2} onClick={this.handleClick}>
<Icon name='dropdown' />
How do you acquire a dog?
</Accordion.Title>
<Accordion.Content active={activeIndex === 2}>
<p>
Three common ways for a prospective owner to acquire a dog is from pet shops, private
owners, or shelters.
</p>
<p>
A pet shop may be the most convenient way to buy a dog. Buying a dog from a private
owner allows you to assess the pedigree and upbringing of your dog before choosing to
take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog
who may not find one so readily.
</p>
</Accordion.Content>
</Accordion>
Or you can add icon to the title field
const panel1Panels = [
{ key: 'panel-1a', title: (<div><Icon name='edit' />'Panel 1A'</div>), content: 'Panel 1A Contents' },
{ key: 'panel-1b', title: (<div><Icon name='add' />'Panel 1B'</div>), content: 'Panel 1B Contents' },
];
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.