The Placer Toolkit alpha has
arrived! 🎉
Plenty of changes are coming your
way—some big, some breaking, some
even nuclear! Beware the changelog…
Dropdown Item
<pc-dropdown-item> Represents an individual item within a dropdown menu, supporting standard items, checkboxes and submenus.
This component must be used as a child of <pc-dropdown>. Additional demonstrations can be found in the dropdown demos.
Properties#
| Name | Description | Reflects | Default |
|---|---|---|---|
appearance | The type of menu item to render. Type: "default"
| "primary"
| "success"
| "warning"
| "danger" |
| "default" |
value | An optional value for the menu item. This is useful for determining which item was selected when listening to the dropdown’s pc-select event.Type: string | undefined |
| ‐ |
type | The dropdown item’s type. Type: "normal" | "checkbox" |
| "normal" |
checked | Set to true to check the dropdown item by default. This is only valid when the type attribute/property is set to checkbox.Type: boolean |
| false |
disabled | Disables the dropdown item. Type: boolean |
| false |
submenuOpen | Decides whether the submenu is currently open. Type: boolean |
| false |
updateComplete | A read‐only promise that resolves when the component has finished updating. | ‐ |
Learn more about attributes and properties.
Slots#
| Name | Description |
|---|---|
| (default) | The dropdown item’s label. |
icon | An optional icon to display before the label. |
details | Additional content or details to display after the label. |
submenu | Submenu items, typically <pc-dropdown-item> elements, to create a nested menu. |
Learn more about using slots.
Methods#
| Name | Description | Arguments |
|---|---|---|
openSubmenu() | Opens the submenu. | ‐ |
closeSubmenu() | Closes the submenu. | ‐ |
Learn more about methods.
Events#
| Name | Description | Event detail |
|---|---|---|
pc-focus | Emitted when the dropdown item gains focus. | ‐ |
pc-blur | Emitted when the dropdown item loses focus. | ‐ |
Learn more about events.
Parts#
| Name | Description |
|---|---|
checkmark | The checkmark icon (a <pc-icon> element) when the item is a checkbox. |
checkmark-svg | The svg part in the checkmark’s <pc-icon> element. |
icon | The container for the icon slot. |
label | The container for the label slot. |
details | The container for the details slot. |
submenu-icon | The submenu indicator icon (a <pc-icon> element). |
submenu-icon-svg | The svg part in the submenu icon’s <pc-icon> element. |
submenu | The submenu container. |
Learn more about customising CSS parts.
Importing#
If you’re using the autoloader or the standard loader, you can skip this section. But if you’re cherry picking, you can use any of the following snippets to import this component.
To manually import this component from the CDN, copy this code snippet and paste it in your HTML.
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.1/cdn/components/dropdown-item/dropdown-item.js"></script>To manually import this component from the CDN, copy this code snippet and paste it in your JavaScript file.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.1/cdn/components/dropdown-item/dropdown-item.js";To manually import this component from npm, copy this code snippet and paste it in your JavaScript file.
import "placer-toolkit/dist/components/dropdown-item/dropdown-item.js";Dependencies#
This component automatically imports these components: