@patternfly/pfe-dropdown

PatternFly Element | Dropdown Element

This element will provide a dropdown menu of links and/or actions. It's comprised of one sub-component, pfe-dropdown-item , which denotes an item in the dropdown menu.

Usage

<pfe-dropdown label="Dropdown">
    <pfe-dropdown-item item-type="link">
        <a href="https://bit.ly/3b9wvWg">Link 1</a>
    </pfe-dropdown-item>
    <pfe-dropdown-item item-type="link">
        <a href="https://bit.ly/3b9wvWg">Link 2</a>
    </pfe-dropdown-item>
    <pfe-dropdown-item item-type="link" disabled>
        <a href="https://bit.ly/3b9wvWg">Link 2</a>
    </pfe-dropdown-item>
    <pfe-dropdown-item item-type="separator"></pfe-dropdown-item>
    <pfe-dropdown-item item-type="action">
        <button>Action 1</button>
    </pfe-dropdown-item>
</pfe-dropdown>

You can also provide a list of dropdown items dynamically:

let dropdown = document.querySelector("pfe-dropdown");

When pfe-dropdown is defined, via the whenDefined method. Pass an array of pfe-dropdown-item objects to pfeDropdownOptions.

customElements.whenDefined("pfe-dropdown").then(function() {
    dropdown.pfeDropdownOptions = [
        {
            href: "https://bit.ly/3b9wvWg",
            text: "Link 1",
            type: "link",
            disabled: false
        },
        {
            href: "https://bit.ly/3b9wvWg",
            text: "Link 2",
            type: "link",
            disabled: false
        },
        {
            href: "https://bit.ly/3b9wvWg",
            text: "Link 3",
            type: "link",
            disabled: true
        },
        {
            type: "separator"
        },
        {
            text: "Action 1",
            type: "action",
            disabled: false
        },
        {
            text: "Action 2",
            type: "action",
            disabled: true
        }
    ];
});

Or you can add individual dropdown items with the addDropdownOptions method. Pass an array of pfe-dropdown-item objects to addDropdownOptions .

customElements.whenDefined("pfe-dropdown").then(function() {
    dropdown.addDropdownOptions(
        [{
            href: "https://bit.ly/3b9wvWg",
            text: "Link 4",
            type: "link",
            disabled: false
        }]
    );
});

Slots

Default slot

The default slot should contain at least one link or action pfe-dropdown-item .

Attributes

pfe-dropdown

• label : This is an optional attribute string that you can provide to describe your dropdown, which appears in the dropdown toggle.
• disabled : This is an optional attribute that you can provide to disable your dropdown. Visually the dropdown will look disabled and mouse or keyboard events will have no impact on it.

pfe-dropdown-item

• item-type : This is an optional attribute string that you should provide to indicate the type of dropdown item. This drives the appropriate assignment of accessibility attributes for each type of item.

• link : an HTML link
• action : a button that triggers some sort of action
• separator : a visual separator for items in the list

API

open

Manually opens the dropdown menu. document.querySelector("pfe-dropdown").open() ;

close

Manually closes the dropdown menu. document.querySelector("pfe-dropdown").close() ;

Events

• pfe-dropdown:change : When an item is selected, this event is fired. It includes the inner text of the item that was selected.

Test

npm run test

Build

npm run build

Demo

From the PFElements root directory, run:

npm start

Code style

Dropdown (and all PFElements) use Prettier to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can integrate your editor with Prettier to have the style rules applied on every save.