Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Dropdown subcomponents should allow adding a class on their <li> elements #4022

Closed
@fourcube

Description

@fourcube

Is your feature request related to a problem? Please describe...

I propose that b-dropdown-item and all other dropdown subcomponents (b-dropdown-group, b-dropdown-text, ...) should accept a list-item-class prop, which consistently adds a class attribute to the component root elements. This makes it easier to style dropdown children.

Describe the solution you'd like

Adding list-item-class to any dropdown subcomponent should result in the following rendered markup

Template

<b-dd>
  <b-dd-group list-item-class="clazz" />
</b-dd>

Rendered output

<!-- other properties omitted for clarity -->
<ul>
  <li class="clazz" />
</ul>

While adding a class prop currently works for <b-dropdown-item>, it does not work for many other dropdown subcomponents. Adding a class to e.g. a <b-dropdown-text> adds the class to the nested span element instead of the root li element.

Describe alternatives you've considered

I've considered using :nth-child selectors to style the dropdown children, but this seems hacky and also does not work for complex setups. (e.g. multi-column).

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions