### File

`src/dialog/overflow-menu/overflow-menu.component.ts`

### Description

The OverFlow menu component encapsulates the OverFlowMenu directive, and the menu iconography into one convienent component

See demo

html:

     * <ibm-overflow-menu>
     *    <ibm-overflow-menu-option>Option 1</ibm-overflow-menu-option>
     *    <ibm-overflow-menu-option>Option 2</ibm-overflow-menu-option>
     * </ibm-overflow-menu>
     *

../../iframe.html?id=overflow-menu--basic

### Metadata

encapsulation | `ViewEncapsulation.None`
selector | `ibm-overflow-menu`
styles | `.bx--overflow-menu--open { opacity: 1 } /* Rotate the overflow menu container as well as the icon, since we calculate our menu position based on the container, not the icon. */ .bx--data-table-v2 .bx--overflow-menu { transform: rotate(90deg); } .bx--data-table-v2 .bx--overflow-menu__icon { transform: rotate(180deg); }`
template |
    <div
    	[ibmOverflowMenu]="options"
    	[ngClass]="{'bx--overflow-menu--open': open}"
    	[attr.aria-label]="buttonLabel"
    	[flip]="flip"
    	(onOpen)="open = true"
    	(onClose)="open = false"
    	role="button"
    	aria-haspopup="true"
    	class="bx--overflow-menu"
    	[placement]="placement"
    	tabindex="0">
    	<svg focusable="false" class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
    		<g fill-rule="evenodd">
    			<circle cx="1.5" cy="1.5" r="1.5" />
    			<circle cx="1.5" cy="7.5" r="1.5" />
    			<circle cx="1.5" cy="13.5" r="1.5" />
    		</g>
    	</svg>
    </div>
    <ng-template #options>
    	<ng-content></ng-content>
    </ng-template>

### Index

###### Properties
open overflowMenuDirective
###### Inputs
buttonLabel flip placement

### Constructor

`constructor(elementRef: ElementRef, i18n: I18n)`
Defined in src/dialog/overflow-menu/overflow-menu.component.ts:82
Parameters :
Name | Type | Optional
elementRef | `ElementRef` | No
i18n | `I18n` | No

### Inputs

`buttonLabel` | Default value : `this.i18n.get().OVERFLOW_MENU.OVERFLOW`
Defined in src/dialog/overflow-menu/overflow-menu.component.ts:74

`flip` | Default value : `false`
Defined in src/dialog/overflow-menu/overflow-menu.component.ts:76

`placement` | Type : `"bottom" | "top"` Default value : `"bottom"`
Defined in src/dialog/overflow-menu/overflow-menu.component.ts:78

### Properties

open
`open: ```
Default value : `false`
Defined in src/dialog/overflow-menu/overflow-menu.component.ts:82

overflowMenuDirective
`overflowMenuDirective: `OverflowMenuDirective``
Type : `OverflowMenuDirective`
Decorators : `@ContentChild(OverflowMenuDirective)`
Defined in src/dialog/overflow-menu/overflow-menu.component.ts:80

    import {
    	Component,
    	ElementRef,
    	Input,
    	ViewEncapsulation,
    	ContentChild
    } from "@angular/core";
    import { I18n } from "./../../i18n/i18n.module";
    import { OverflowMenuDirective } from "./overflow-menu.directive";

    /**
     * The OverFlow menu component encapsulates the OverFlowMenu directive, and the menu iconography into one convienent component
     *
     * [See demo](../../?path=/story/overflow-menu--basic)
     *
     * html:
     * ```
     * <ibm-overflow-menu>
     *	<ibm-overflow-menu-option>Option 1</ibm-overflow-menu-option>
     *	<ibm-overflow-menu-option>Option 2</ibm-overflow-menu-option>
     * </ibm-overflow-menu>
     * ```
     *
     * <example-url>../../iframe.html?id=overflow-menu--basic</example-url>
     */
    @Component({
    	selector: "ibm-overflow-menu",
    	template: `
    		<div
    			[ibmOverflowMenu]="options"
    			[ngClass]="{'bx--overflow-menu--open': open}"
    			[attr.aria-label]="buttonLabel"
    			[flip]="flip"
    			(onOpen)="open = true"
    			(onClose)="open = false"
    			role="button"
    			aria-haspopup="true"
    			class="bx--overflow-menu"
    			[placement]="placement"
    			tabindex="0">
    			<svg focusable="false" class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
    				<g fill-rule="evenodd">
    					<circle cx="1.5" cy="1.5" r="1.5" />
    					<circle cx="1.5" cy="7.5" r="1.5" />
    					<circle cx="1.5" cy="13.5" r="1.5" />
    				</g>
    			</svg>
    		</div>
    		<ng-template #options>
    			<ng-content></ng-content>
    		</ng-template>
    	`,
    	styles: [`
    		.bx--overflow-menu--open {
    			opacity: 1
    		}

    		/*
    		Rotate the overflow menu container as well as the icon, since
    		we calculate our menu position based on the container, not the icon.
    		*/
    		.bx--data-table-v2 .bx--overflow-menu {
    			transform: rotate(90deg);
    		}

    		.bx--data-table-v2 .bx--overflow-menu__icon {
    			transform: rotate(180deg);
    		}
    	`],
    	encapsulation: ViewEncapsulation.None
    })
    export class OverflowMenu {

    	@Input() buttonLabel = this.i18n.get().OVERFLOW_MENU.OVERFLOW;

    	@Input() flip = false;

    	@Input() placement: "bottom" | "top" = "bottom";

    	@ContentChild(OverflowMenuDirective) overflowMenuDirective: OverflowMenuDirective;

    	open = false;

    	constructor(protected elementRef: ElementRef, protected i18n: I18n) {}
    }

    		.bx--overflow-menu--open {
    			opacity: 1
    		}

    		/*
    		Rotate the overflow menu container as well as the icon, since
    		we calculate our menu position based on the container, not the icon.
    		*/
    		.bx--data-table-v2 .bx--overflow-menu {
    			transform: rotate(90deg);
    		}

    		.bx--data-table-v2 .bx--overflow-menu__icon {
    			transform: rotate(180deg);
    		}

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""