Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(menu): support icons #1702

Merged
merged 1 commit into from
Nov 3, 2016
Merged

feat(menu): support icons #1702

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/demo-app/menu/menu-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@
</md-toolbar>

<md-menu x-position="before" #posXMenu="mdMenu" class="before">
<button md-menu-item *ngFor="let item of items" [disabled]="item.disabled">
<button md-menu-item *ngFor="let item of iconItems" [disabled]="item.disabled">
<md-icon>{{ item.icon }}</md-icon>
{{ item.text }}
</button>
</md-menu>
Expand Down
6 changes: 6 additions & 0 deletions src/demo-app/menu/menu-demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,11 @@ export class MenuDemo {
{text: 'Sign Out'}
];

iconItems = [
{text: 'Redial', icon: 'dialpad'},
{text: 'Check voicemail', icon: 'voicemail', disabled: true},
{text: 'Disable alerts', icon: 'notifications_off'}
];

select(text: string) { this.selected = text; }
}
8 changes: 8 additions & 0 deletions src/lib/core/style/_menu-common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,12 @@ $md-menu-vertical-padding: 8px !default;
&[disabled] {
cursor: default;
}

md-icon {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a link to the spec we could include here for this 16px value?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, as far as I could tell, no exact measurement for this case in the spec. This was the value in Material 1.

margin-right: 16px;

[dir='rtl'] & {
margin-left: 16px;
}
}
}
28 changes: 28 additions & 0 deletions src/lib/menu/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,34 @@ class MyComp {
</md-menu>
```

### Adding an icon

Menus also support displaying `md-icon` elements before the menu item text.

*my-comp.html*
```html
<md-menu #menu="mdMenu">
<button md-menu-item>
<md-icon> dialpad </md-icon>
<span> Redial </span>
</button>
<button md-menu-item disabled>
<md-icon> voicemail </md-icon>
<span> Check voicemail </span>
</button>
<button md-menu-item>
<md-icon> notifications_off </md-icon>
<span> Disable alerts </span>
</button>
</md-menu>
```

Output:

<img src="https://material.angularjs.org/material2_assets/menu/icon_menu_closed.png">
<img src="https://material.angularjs.org/material2_assets/menu/icon_menu_open.png">


### Customizing menu position

By default, the menu will display after and below its trigger. You can change this display position
Expand Down
4 changes: 4 additions & 0 deletions src/lib/menu/_menu-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@
color: md-color($foreground, 'disabled');
}

md-icon {
color: md-color($foreground, 'icon');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this necessary?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's the color in the spec and in Material 1's version. It looks pretty dramatic without it.

}

&:hover:not([disabled]), &:focus:not([disabled]) {
background: md-color($background, 'hover');
}
Expand Down