
Research
Security News
Malicious npm Packages Target BSC and Ethereum to Drain Crypto Wallets
Socket uncovered four malicious npm packages that exfiltrate up to 85% of a victim’s Ethereum or BSC wallet using obfuscated JavaScript.
@patternfly/pfe-dropdown
Advanced tools
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.
<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
}]
);
});
The default slot should contain at least one link or action pfe-dropdown-item
.
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.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 linkaction
: a button that triggers some sort of actionseparator
: a visual separator for items in the listManually opens the dropdown menu.
document.querySelector("pfe-dropdown").open()
;
Manually closes the dropdown menu.
document.querySelector("pfe-dropdown").close()
;
pfe-dropdown:change
: When an item is selected, this event is fired. It includes the inner text of the item that was selected.npm run test
npm run build
From the PFElements root directory, run:
npm start
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.
FAQs
Dropdown element for PatternFly Elements
The npm package @patternfly/pfe-dropdown receives a total of 271 weekly downloads. As such, @patternfly/pfe-dropdown popularity was classified as not popular.
We found that @patternfly/pfe-dropdown demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 16 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket uncovered four malicious npm packages that exfiltrate up to 85% of a victim’s Ethereum or BSC wallet using obfuscated JavaScript.
Security News
TC39 advances 9 JavaScript proposals, including Array.fromAsync, Error.isError, and Explicit Resource Management, which are now headed into the ECMAScript spec.
Security News
Vite releases Rolldown-Vite, a Rust-based bundler preview offering faster builds and lower memory usage as a drop-in replacement for Vite.