0.1.9 • Published 9 months ago
@phase2/outline-dropdown v0.1.9
outline-dropdown
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
containingElement | HTMLElement \| undefined | The dropdown will close when the user interacts outside of this element (e.g. clicking). | ||
hasDropdown | boolean | |||
hasFooter | boolean | |||
hasHeader | boolean | |||
isDisabled | is-disabled | boolean | false | Disables the dropdown so the panel will not open. |
isLink | boolean | false | Determines if the dropdown trigger is a link or not. | |
isOpen | is-open | boolean | false | Indicates whether or not the dropdown is open.You can use this in lieu of the show/hide methods. |
panel | HTMLElement | |||
slots | SlotController | "new SlotController(this, true)" | ||
trigger | HTMLElement | |||
triggerLabel | trigger-label | string | ARIA label attribute to pass down to the resulting button or aelement. This is required for accessibility if we use a buttonwith an icon only. | |
triggerTarget | trigger-target | LinkTargetType | The target to use for a link, used in conjunction with the url attribute. | |
triggerText | trigger-text | string | Visible text for the button/link of the trigger element. | |
triggerUrl | trigger-url | string | The url to use for a link. This will render an anchor element.Do not set this prop if you want to render a button element. | |
triggerVariant | trigger-variant | ButtonVariant | "link" | The button style variant to use. |
Methods
| Method | Type | Description |
|---|---|---|
buttonTemplate | (): TemplateResult<ResultType> \| null | Template partial for the "button" rendering. |
dropdownTemplate | (): TemplateResult<ResultType> \| null | Template partial for the dropdown rendering. |
focusOnTrigger | (): void | |
footerTemplate | (): TemplateResult<ResultType> \| null | Template partial for the footer rendering. |
handleButtonTrigger | (event: KeyboardEvent): void | |
handleDocumentMouseDown | (event: MouseEvent): void | |
handleEnterKeyDown | (event: KeyboardEvent, isIcon?: boolean): void | |
handleEscKeyDown | (event: KeyboardEvent): void | |
handleFocusChange | (): void | |
handleHoverStyles | (): void | |
handleIconClick | (event: MouseEvent): void | |
handleIconTrigger | (event: KeyboardEvent): void | |
handleOpenChange | (): Promise<void> | |
handlePanelKeystrokes | (event: KeyboardEvent): void | |
headerTemplate | (): TemplateResult<ResultType> \| null | Template partial for the header rendering. |
hide | (): Promise<void> | Hides the dropdown panel. |
iconTemplate | (): TemplateResult<ResultType> \| null | Template partial for the icon rendering. |
iconWrapperTemplate | (): TemplateResult<ResultType> \| null | Template partial for the icon rendering. |
show | (): Promise<void> | Shows the dropdown panel. |
Events
| Event | Description |
|---|---|
outline-after-hide | Emitted after the dropdown closes and all animations are complete. |
outline-after-show | Emitted after the dropdown opens and all animations are complete. |
outline-hide | Emitted when the dropdown closes. |
outline-show | Emitted when the dropdown opens. |
Slots
| Name | Description |
|---|---|
dropdown | Content to be rendered in the dropdown. |
footer | Content to be rendered in the footer of the dropdown. |
header | Content to be rendered in the header of the dropdown. |
CSS Shadow Parts
| Part | Description |
|---|---|
base | The component's base wrapper. |
panel | The panel that gets shown when the dropdown is open. |
trigger | The container that wraps the trigger. |