import { KbqDropdownModule } from '@koobiq/components/dropdown';Dropdown content that will be rendered lazily once the dropdown is opened.
Selector: ng-template[kbqDropdownContent]
| Name | Description |
|---|---|
| attached: Subject |
Emits when the dropdown content has been attached. |
| document: Document |
This directive is intended to be used inside an kbq-dropdown tag. It exists mostly to set the role attribute.
Selector: kbq-dropdown-item, [kbq-dropdown-item]
Exported as: kbqDropdownItem| Name | Description |
|---|---|
@Input() disabled: boolean
|
|
| focused: Subject |
Stream that emits when the menu item is focused. |
| highlighted: boolean | Whether the dropdown item is highlighted. |
| hovered: Subject |
Stream that emits when the dropdown item is hovered. |
| icon: KbqIcon | |
| isNested: boolean | Whether the dropdown item acts as a trigger for a nested dropdown. |
| parentDropdownPanel: KbqDropdownPanel | |
| textElement: ElementRef |
Selector: [kbqDropdownStaticContent]
Selector: kbq-dropdown
Exported as: kbqDropdown| Name | Description |
|---|---|
@Input() backdropClass: string
|
Class to be added to the backdrop element. |
@Input() hasBackdrop: boolean
|
Whether the dropdown has a backdrop. |
@Input() navigationWithWrap: boolean
|
|
@Input() overlapTriggerX: boolean
|
Whether the dropdown should overlap its trigger horizontally. |
@Input() overlapTriggerY: boolean
|
Whether the dropdown should overlap its trigger vertically. |
@Input('class')
panelClass: string
|
This method takes classes set on the host kbq-dropdown element and applies them on the dropdown template that displays in the overlay container. Otherwise, it's difficult to style the containing dropdown from outside the component. |
@Input() xPosition: DropdownPositionX
|
Position of the dropdown in the X axis. |
@Input() yPosition: DropdownPositionY
|
Position of the dropdown in the Y axis. |
@Output('closed')
closed: EventEmitter |
Event emitted when the dropdown is closed. |
| animationDone: Subject |
Emits whenever an animation on the dropdown completes. |
| classList: { [key: string]: boolean; } | Config object to be passed into the dropdown's ngClass |
| direction: Direction | Layout direction of the dropdown. |
| isAnimating: boolean | Whether the dropdown is animating. |
| items: QueryList |
List of the items inside of a dropdown. |
| panelAnimationState: "void" | "enter" | Current state of the panel animation. |
| parent: KbqDropdownPanel | Parent dropdown of the current dropdown panel. |
| triggerWidth: string |
This directive is intended to be used in conjunction with an kbq-dropdown tag. It is responsible for toggling the display of the provided dropdown instance.
Selector: [kbqDropdownTriggerFor]
Exported as: kbqDropdownTrigger| Name | Description |
|---|---|
@Input('kbqDropdownTriggerData')
data: any
|
Data to be passed along to any lazily-rendered content. |
@Input('kbqDropdownTriggerFor')
dropdown: KbqDropdownPanel
|
References the dropdown instance that the trigger is associated with. |
@Input() offsetX: number
|
Position offset of the dropdown in the X axis. |
@Input() offsetY: number
|
Position offset of the dropdown in the Y axis. |
@Input() openByArrowDown: boolean
|
|
@Input('kbqDropdownTriggerRestoreFocus')
restoreFocus: boolean
|
Whether focus should be restored when the menu is closed. Note that disabling this option can have accessibility implications and it's up to you to manage focus, if you decide to turn it off. |
@Output('dropdownClosed')
dropdownClosed: EventEmitter |
Event emitted when the associated dropdown is closed. |
@Output('dropdownOpened')
dropdownOpened: EventEmitter |
Event emitted when the associated dropdown is opened. |
| dir: Direction | The text direction of the containing app. |
| isBrowser: boolean | |
| lastDestroyReason: DropdownCloseReason | |
| opened: boolean | Whether the dropdown is open. |
| openedBy: "touch" | "mouse" | "keyboard" |
Default `kbq-dropdown` options that can be overridden.
| Name | Description |
|---|---|
| backdropClass: string | Class to be applied to the dropdown's backdrop. |
| hasBackdrop: boolean | Whether the dropdown has a backdrop. |
| overlapTriggerX: boolean | Whether the dropdown should overlap the dropdown trigger horizontally. |
| overlapTriggerY: boolean | Whether the dropdown should overlap the dropdown trigger vertically. |
| xPosition: DropdownPositionX | The x-axis position of the dropdown. |
| yPosition: DropdownPositionY | The y-axis position of the dropdown. |
type DropdownPositionX = 'before' | 'after';
type DropdownPositionY = 'above' | 'below';
Reason why the menu was closed.
type DropdownCloseReason = void | 'click' | 'keydown' | 'tab';
Injection token that determines the scroll handling while the dropdown is open.
const KBQ_DROPDOWN_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
const fadeInItems: AnimationTriggerMetadata;
const transformDropdown: AnimationTriggerMetadata;
Default top padding of the nested dropdown panel.
const NESTED_PANEL_TOP_PADDING: number;
const NESTED_PANEL_LEFT_PADDING: number;
Injection token to be used to override the default options for `kbq-dropdown`.
const KBQ_DROPDOWN_DEFAULT_OPTIONS: InjectionToken<KbqDropdownDefaultOptions>;