diff --git a/src/material-examples/example-module.ts b/src/material-examples/example-module.ts index 868749123e63..090ff68bd99a 100644 --- a/src/material-examples/example-module.ts +++ b/src/material-examples/example-module.ts @@ -72,6 +72,7 @@ import {ListSectionsExample} from './list-sections/list-sections-example'; import {ListSelectionExample} from './list-selection/list-selection-example'; import {MenuIconsExample} from './menu-icons/menu-icons-example'; import {MenuOverviewExample} from './menu-overview/menu-overview-example'; +import {MenuPositionsExample} from './menu-positions/menu-positions-example'; import {NestedMenuExample} from './nested-menu/nested-menu-example'; import {PaginatorConfigurableExample} from './paginator-configurable/paginator-configurable-example'; import {PaginatorOverviewExample} from './paginator-overview/paginator-overview-example'; @@ -482,6 +483,12 @@ export const EXAMPLE_COMPONENTS = { additionalFiles: null, selectorName: null }, + 'menu-positions': { + title: 'Menu positions', + component: MenuPositionsExample, + additionalFiles: null, + selectorName: null + }, 'nested-menu': { title: 'Nested menu', component: NestedMenuExample, @@ -868,6 +875,7 @@ export const EXAMPLE_LIST = [ ListSelectionExample, MenuIconsExample, MenuOverviewExample, + MenuPositionsExample, NestedMenuExample, PaginatorConfigurableExample, PaginatorOverviewExample, diff --git a/src/material-examples/menu-positions/menu-positions-example.css b/src/material-examples/menu-positions/menu-positions-example.css new file mode 100644 index 000000000000..7735ab2728da --- /dev/null +++ b/src/material-examples/menu-positions/menu-positions-example.css @@ -0,0 +1,14 @@ +.example-menu-positions-container { + display: flex; + justify-content: space-around; + margin-bottom: 16px; +} + +.example-radio-group { + display: inline-flex; + flex-direction: column; +} + +.example-radio-group .mat-radio-button { + margin-bottom: 8px; +} \ No newline at end of file diff --git a/src/material-examples/menu-positions/menu-positions-example.html b/src/material-examples/menu-positions/menu-positions-example.html new file mode 100644 index 000000000000..8983a0be75a6 --- /dev/null +++ b/src/material-examples/menu-positions/menu-positions-example.html @@ -0,0 +1,28 @@ + +
+
+

xPosition

+ + before + after + +
+
+

YPosition

+ + above + below + +
+
+

overlapTrigger

+ overlap trigger? +
+
+ + + + + + +
\ No newline at end of file diff --git a/src/material-examples/menu-positions/menu-positions-example.ts b/src/material-examples/menu-positions/menu-positions-example.ts new file mode 100644 index 000000000000..5d0e3bd9dba0 --- /dev/null +++ b/src/material-examples/menu-positions/menu-positions-example.ts @@ -0,0 +1,15 @@ +import {Component} from '@angular/core'; + +/** + * @title Menu positions + */ +@Component({ + selector: 'menu-positions-example', + templateUrl: 'menu-positions-example.html', + styleUrls: ['menu-positions-example.css'], +}) +export class MenuPositionsExample { + xPosition = 'after'; + yPosition = 'below'; + overlapTrigger = false; +}