carbon-components-angular documentation
  1. Directives
  2. OverflowMenuDirective

File

src/dialog/overflow-menu/overflow-menu.directive.ts

Description

Directive for extending Dialog to create overflow menus.

class: OverflowMenuDirective (extends DialogDirective)

selector: cdsOverflowMenu

Example :
<div [cdsOverflowMenu]="templateRef"></div>
<ng-template #templateRef>
    <!-- overflow menu options here -->
</ng-template>
Example :
<div [cdsOverflowMenu]="templateRef" [customPane]="true"></div>
<ng-template #templateRef>
 <!-- custom content goes here -->
</ng-template>

Extends

DialogDirective

Metadata

Providers DialogService
Selector [cdsOverflowMenu], [ibmOverflowMenu]
exportAs overflowMenu

Index

Properties
Methods
Inputs
Outputs
HostBindings
HostListeners
Accessors

Constructor

constructor(elementRef: ElementRef, viewContainerRef: ViewContainerRef, dialogService: DialogService, eventService: EventService)
Defined in src/dialog/overflow-menu/overflow-menu.directive.ts:71

Creates an instance of OverflowMenuDirective.

Parameters :
Name Type Optional
elementRef ElementRef No
viewContainerRef ViewContainerRef No
dialogService DialogService No
eventService EventService No

Inputs

cdsOverflowMenu
Type : TemplateRef<any>
Defined in src/dialog/overflow-menu/overflow-menu.directive.ts:55
customPane
Type : boolean
Default value : false
Defined in src/dialog/overflow-menu/overflow-menu.directive.ts:71

Set to true to for custom content
flip
Type : boolean
Default value : false
Defined in src/dialog/overflow-menu/overflow-menu.directive.ts:59

Controls wether the overflow menu is flipped
ibmOverflowMenu
Type : TemplateRef<any>
Defined in src/dialog/overflow-menu/overflow-menu.directive.ts:51
offset
Type : literal type
Inherited from DialogDirective
Defined in DialogDirective:63

This specifies any vertical and horizontal offset for the position of the dialog
wrapperClass
Type : string
Default value : ""
Inherited from DialogDirective
Defined in DialogDirective:67

Classes to add to the dialog container
appendInline
Type : boolean
Default value : false
Inherited from DialogDirective
Defined in DialogDirective:86

Set to true to open the dialog next to the triggering component
cdsDialog
Type : string | TemplateRef<any>
Inherited from DialogDirective
Defined in DialogDirective:52
closeTrigger
Type : "mouseout" | "mouseleave"
Default value : "mouseleave"
Inherited from DialogDirective
Defined in DialogDirective:66

Defines how the Dialog close event is triggered.

See here for more on the difference between mouseleave and mouseout.

Defaults to click when trigger is set to click.
data
Type : {}
Default value : {}
Inherited from DialogDirective
Defined in DialogDirective:90

Optional data for templates
disabled
Type : boolean
Default value : false
Inherited from DialogDirective
Defined in DialogDirective:96

This prevents the dialog from being toggled
gap
Type : number
Default value : 0
Inherited from DialogDirective
Defined in DialogDirective:82

Spacing between the dialog and it's triggering element
ibmDialog
Type : string | TemplateRef
Inherited from DialogDirective
Defined in DialogDirective:48
isOpen
Type : boolean
Default value : false
Inherited from DialogDirective
Defined in DialogDirective:92
placement
Type : string
Default value : "left"
Inherited from DialogDirective
Defined in DialogDirective:70

Placement of the dialog, usually relative to the element the directive is on.
shouldClose
Type : function
Inherited from DialogDirective
Defined in DialogDirective:100

This input allows explicit control over how the dialog should close
title
Type : string
Default value : ""
Inherited from DialogDirective
Defined in DialogDirective:43

Title for the dialog
trigger
Type : "click" | "hover" | "mouseenter"
Default value : "click"
Inherited from DialogDirective
Defined in DialogDirective:57

Defines how the Dialog is triggered.(Hover and click behave the same on mobile - both respond to a single tap). Do not add focusable elements if trigger is hover or mouseenter.

Outputs

isOpenChange
Type : EventEmitter
Inherited from DialogDirective
Defined in DialogDirective:116

Emits an event when the state of isOpen changes. Allows isOpen to be double bound
onClose
Type : EventEmitter<any>
Inherited from DialogDirective
Defined in DialogDirective:108

Emits an event when the dialog is closed
onOpen
Type : EventEmitter<any>
Inherited from DialogDirective
Defined in DialogDirective:112

Emits an event when the dialog is opened

HostBindings

attr.aria-haspopup
Type : boolean
Default value : true
Inherited from DialogDirective
Defined in DialogDirective:119
attr.aria-owns
Type : string
Inherited from DialogDirective
Defined in DialogDirective:120
attr.role
Type : string
Default value : "button"
Inherited from DialogDirective
Defined in DialogDirective:118

HostListeners

keydown
Arguments : '$event'
Defined in src/dialog/overflow-menu/overflow-menu.directive.ts:93

Methods

hostkeys
hostkeys(event: KeyboardEvent)
Decorators :
@HostListener('keydown', ['$event'])
Defined in src/dialog/overflow-menu/overflow-menu.directive.ts:93
Parameters :
Name Type Optional
event KeyboardEvent No
Returns : void
open
open()
Inherited from DialogDirective
Defined in DialogDirective:102
Returns : any
updateConfig
updateConfig()
Inherited from DialogDirective
Defined in DialogDirective:85
Returns : void
close
close(meta: CloseMeta)
Inherited from DialogDirective
Defined in DialogDirective:305

Helper method to close the dialogRef.

Parameters :
Name Type Optional Default value
meta CloseMeta No { reason: CloseReasons.interaction }
Returns : void
ngOnChanges
ngOnChanges(changes: SimpleChanges)
Inherited from DialogDirective
Defined in DialogDirective:148
Parameters :
Name Type Optional
changes SimpleChanges No
Returns : void
ngOnDestroy
ngOnDestroy()
Inherited from DialogDirective
Defined in DialogDirective:252

When the host dies, kill the popover.

  • Useful for use in a modal or similar.
Returns : void
ngOnInit
ngOnInit()
Inherited from DialogDirective
Defined in DialogDirective:185

Sets the config object and binds events for hovering or clicking before running code from child class.

Returns : void
Protected onDialogChanges
onDialogChanges(_changes: SimpleChanges)
Inherited from DialogDirective
Defined in DialogDirective:321

Empty method for child to override and specify additional on changes steps. run after DialogDirective completes it's ngOnChanges.

Parameters :
Name Type Optional
_changes SimpleChanges No
Returns : void
Protected onDialogInit
onDialogInit()
Inherited from DialogDirective
Defined in DialogDirective:315

Empty method for child classes to override and specify additional init steps. Run after DialogDirective completes it's ngOnInit.

Returns : void
toggle
toggle(meta: CloseMeta)
Inherited from DialogDirective
Defined in DialogDirective:294

Helper method to toggle the open state of the dialog

Parameters :
Name Type Optional Default value
meta CloseMeta No { reason: CloseReasons.interaction }
Returns : void

Properties

dialogConfig
Type : DialogConfig
Inherited from DialogDirective
Defined in DialogDirective:104

Config object passed to the rendered component
Static dialogCounter
Type : number
Default value : 0
Inherited from DialogDirective
Defined in DialogDirective:39
Protected dialogRef
Type : ComponentRef<Dialog>
Inherited from DialogDirective
Defined in DialogDirective:127

Keeps a reference to the currently opened dialog
hasPopup
Default value : true
Decorators :
@HostBinding('attr.aria-haspopup')
Inherited from DialogDirective
Defined in DialogDirective:119
role
Type : string
Default value : "button"
Decorators :
@HostBinding('attr.role')
Inherited from DialogDirective
Defined in DialogDirective:118
Private subscriptions
Type : Subscription[]
Default value : []
Inherited from DialogDirective
Defined in DialogDirective:129

Accessors

ibmOverflowMenu
setibmOverflowMenu(template: TemplateRef)
Defined in src/dialog/overflow-menu/overflow-menu.directive.ts:51

Takes a template ref of OverflowMenuOptionss

Parameters :
Name Type Optional
template TemplateRef<any> No
Returns : void 
import {
	Directive,
	ElementRef,
	ViewContainerRef,
	Input,
	TemplateRef,
	HostListener
} from "@angular/core";
import { DialogDirective } from "../dialog.directive";
import { DialogService } from "../dialog.service";
import { OverflowMenuPane } from "./overflow-menu-pane.component";
import { OverflowMenuCustomPane } from "./overflow-menu-custom-pane.component";
import { EventService } from "carbon-components-angular/utils";


/**
 * Directive for extending `Dialog` to create overflow menus.
 *
 * class: OverflowMenuDirective (extends DialogDirective)
 *
 *
 * selector: `cdsOverflowMenu`
 *
 *
 * ```html
 * <div [cdsOverflowMenu]="templateRef"></div>
 * <ng-template #templateRef>
 * 	<!-- overflow menu options here -->
 * </ng-template>
 * ```
 *
 * ```html
 * <div [cdsOverflowMenu]="templateRef" [customPane]="true"></div>
 * <ng-template #templateRef>
 *  <!-- custom content goes here -->
 * </ng-template>
 * ```
 */
@Directive({
	selector: "[cdsOverflowMenu], [ibmOverflowMenu]",
	exportAs: "overflowMenu",
	providers: [
		DialogService
	]
})
export class OverflowMenuDirective extends DialogDirective {
	/**
	 * @deprecated as of v5
	 * Takes a template ref of `OverflowMenuOptions`s
	 */
	@Input() set ibmOverflowMenu(template: TemplateRef<any>) {
		this.cdsOverflowMenu = template;
	}

	@Input() cdsOverflowMenu: TemplateRef<any>;
	/**
	 * Controls wether the overflow menu is flipped
	 */
	@Input() flip = false;
	/**
	 * This specifies any vertical and horizontal offset for the position of the dialog
	 */
	@Input() offset: { x: number, y: number };
	/**
	 * Classes to add to the dialog container
	 */
	@Input() wrapperClass = "";
	/**
	 * Set to true to for custom content
	 */
	@Input() customPane = false;

	/**
	 * Creates an instance of `OverflowMenuDirective`.
	 */
	constructor(
		protected elementRef: ElementRef,
		protected viewContainerRef: ViewContainerRef,
		protected dialogService: DialogService,
		protected eventService: EventService
	) {
		super(elementRef, viewContainerRef, dialogService, eventService);
	}

	updateConfig() {
		this.dialogConfig.content = this.cdsOverflowMenu;
		this.dialogConfig.flip = this.flip;
		this.dialogConfig.offset = this.offset;
		this.dialogConfig.wrapperClass = this.wrapperClass;
	}

	@HostListener("keydown", ["$event"])
	hostkeys(event: KeyboardEvent) {
		switch (event.key) {
			case "Enter":
			case " ":
				event.preventDefault();
				break;
		}
	}

	open() {
		return super.open(this.customPane ? OverflowMenuCustomPane : OverflowMenuPane);
	}
}

results matching ""

    No results matching ""