Related to this question How to add a button within a dropdown menu?
I have a Semantic UI React Dropdown and I want to place a little, clickable, delete icon on each row of the dropdown, similar to this photo.
How can I do that?
Add a comment
|
1 Answer
you can do like this
<Dropdown
text='Filter'
icon='filter'
floating
labeled
button
className='icon'
>
<Dropdown.Menu>
<Dropdown.Header icon='tags' content='Filter by tag' />
<Dropdown.Divider />
<Dropdown.Item>
<Icon name='attention' className='right floated' />
Important
</Dropdown.Item>
<Dropdown.Item>
<Icon name='comment' className='right floated' />
Announcement
</Dropdown.Item>
<Dropdown.Item>
<Icon name='conversation' className='right floated' />
Discussion
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
if you have some dynamic data then simple map it
<Dropdown
text='Filter'
icon='filter'
floating
labeled
button
className='icon'
>
<Dropdown.Menu>
<Dropdown.Header icon='tags' content='Filter by tag' />
<Dropdown.Divider />
{
options.map(item => <Dropdown.Item>
<Icon name={item.icon} className='right floated' />
{item.name}
</Dropdown.Item>)
}
</Dropdown.Menu>
</Dropdown>
2 Comments
I Stand With Israel
This is great! Thank you for the response! I added a <Button> instead of an <Icon> but you showed me what I was missing, a <Dropdown.Menu>
I Stand With Israel
The problem I'm having now is that clicking a menu option doesn't update the Dropdown itself. The Dropdown doesn't seem to hear option selections.