简体   繁体   中英

How to change dropdown icon in semantic-ui accordion?

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM