Bootstrap Dropdownlists

Question

I am trying to use Bootstrap Dropdown list for replicating the Salesforce List Views functionality in Lightning components. I am able to achieve the functionality using ui:InputSelect but it is not appearing as per the htmls given by the UI/UX Team. I need to implement this using div class="dropdown" using button, ul and li tags.

Original Code:

<ui:inputSelect label="" aura:id="listViews" change="{!c.onSelectChange}"><ui:inputSelectOption text="{!$Label.c.OrderTabListAllOrders}" label="{!$Label.c.OrderTabListAllOrders}" value="true" />

It is appearing as below But I want it to appear as this.

I cannot use custom CSS since this would hamper the look of the overall page where I will plugin my component.

Answer 1

You could do something as follows to get your bootstrap styled options. You can use the bootstrap HTML elements and then bind the events with aura controllers. It would work just fine.

App

<aura:application >
    <ltng:require styles="{!join(',', $Resource.Bootstrap + '/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css')}" 
                  scripts="{!join(',', $Resource.jquery, $Resource.tether, $Resource.Bootstrap + '/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js')}" />

    <aura:attribute name="options" type="String[]" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <aura:iteration items="{!v.options}" var="item">
                <a class="dropdown-item" href="" onclick="{!c.handleclick}">{!item}</a>
            </aura:iteration>
        </div>
    </div>
</aura:application>

Controller.js

({
    doInit : function(component, event, helper) {
        /*do your action callbacks*/
        var options = ["Car", "Saab", "Volvo"];
        component.set("v.options",options);
    },
    handleclick : function(component, event, helper){
        var selected = event.srcElement.text;
        console.log(selected);
    }
})

Update (Sample):

Once you click on the links , you should be able to get the selected values, I have checked the same for locker compatibility as well.