Skip to content

Commit

Permalink
comp(MdMenu): add menu component (#21)
Browse files Browse the repository at this point in the history 
* comp(MdMenu): add menus

* feat(MdMenu): move menu styles to md-menu-component

* test(MdMenu): fix broken tests

* comp(MdMenu): create menus

* docs(MdMenu): add docs for menus
  • Loading branch information
@marcosmoura
marcosmoura committed Oct 1, 2017
1 parent 2456ff9 commit 8241575
Show file tree
Hide file tree
Showing 25 changed files with 988 additions and 39 deletions.
2 changes: 1 addition & 1 deletion docs/app/components/ApiTable.vue
View file
Expand Up @@ -104,7 +104,7 @@ export default {
.description {
>>> code {
color: md-get-palette-color(blue, A200);
color: md-get-palette-color(red, A200);
font-family: 'Roboto Mono', monospace;
}
}
Expand Down
3 changes: 3 additions & 0 deletions docs/app/i18n/en-US.js
View file
Expand Up @@ -76,6 +76,9 @@ export default {
file: {
title: 'File'
},
menu: {
title: 'Menu'
},
switch: {
title: 'Switch'
},
Expand Down
44 changes: 33 additions & 11 deletions docs/app/pages/Components/Card/examples/Layouts.vue
View file
Expand Up @@ -22,9 +22,9 @@

<md-card>
<md-card-header>
<!-- <md-avatar> -->
<md-avatar>
<img src="assets/examples/avatar.png" alt="Avatar">
<!-- </md-avatar> -->
</md-avatar>

<div class="md-title">Title goes here</div>
<div class="md-subhead">Subtitle here</div>
Expand Down Expand Up @@ -141,9 +141,23 @@
<div class="md-subhead">Subtitle here</div>
</md-card-header-text>

<md-button class="md-icon-button">
<md-icon>more_vert</md-icon>
</md-button>
<md-menu md-size="big" md-direction="bottom-end">
<md-button class="md-icon-button" md-menu-trigger>
<md-icon>more_vert</md-icon>
</md-button>

<md-menu-content>
<md-menu-item @click="doACall">
<span>Call</span>
<md-icon>phone</md-icon>
</md-menu-item>

<md-menu-item @click="sendMessage">
<span>Send a message</span>
<md-icon>message</md-icon>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-card-header>

<md-card-content>
Expand All @@ -158,6 +172,20 @@
</div>
</template>

<script>
export default {
name: 'Layouts',
methods: {
sendMessage () {
window.alert('Send a message...')
},
doACall () {
window.alert('Calling someone...')
}
}
}
</script>

<style lang="scss" scoped>
.md-card {
width: 320px;
Expand Down Expand Up @@ -203,9 +231,3 @@
}
}
</style>

<script>
export default {
name: 'Layouts'
}
</script>
177 changes: 177 additions & 0 deletions docs/app/pages/Components/Menu/Menu.vue
View file
@@ -0,0 +1,177 @@
<example src="./examples/Directions.vue" />
<example src="./examples/Sizes.vue" />
<example src="./examples/Alignments.vue" />
<example src="./examples/MultipleContent.vue" />

<template>
<page-container centered :title="$t('pages.menu.title')">
<div class="page-container-section">
<p>Menus appear upon interaction with a button, action, or other control. They usually display a list of choices, with one choice per line, but can also show a rich content.</p>
<p>The <code>md-menu</code> component consists of a parent (<code>md-menu</code>), a trigger (<code>md-menu-trigger</code>), a content holder (<code>md-menu-content</code>) and optional items (<code>md-menu-item</code>).</p>
</div>

<div class="page-container-section">
<h2>Directions</h2>

<p>The position of the menu content is calculated based of the contraints of the trigger element. Based on this you can set a position using X and Y axis.</p>
<p>You can combine <code>top</code>/<code>bottom</code> with <code>start</code>/<code>end</code>:</p>
<code-example title="Start and End" :component="examples['directions']" />
</div>

<div class="page-container-section">
<h2>Alignments</h2>

<p>Sometimes the default position is not what we want. Maybe we need to show a menu in another location, and to achieve that you can use trigger alignment or custom offsets:</p>
<code-example title="Trigger alignment and Offsets" :component="examples['alignments']" />
</div>

<div class="page-container-section">
<h2>Sizes</h2>

<p><code>md-menu</code> have 4 different sizes and a auto mode:</p>
<code-example title="5 possible sizes" :component="examples['sizes']" />
<note-block>The max-width of a menu is 280px.</note-block>
</div>

<div class="page-container-section">
<h2>Rich Content and Icon Alignment</h2>

<p>Sometimes you may need to toggle your menu dynamically. You can also show arbitrary content inside a <code>md-menu-content</code>, like this card example:</p>
<code-example title="Open a menu programatically" :component="examples['multiple-content']" />
<note-block tip>A <code>md-menu</code> with items that have icons aligns perfectly with <code>md-icon-button</code>.</note-block>

<api-item title="API - md-menu">
<p>The following options can be used with any menu:</p>
<api-table :headings="props.headings" :props="props.props" slot="props" />
</api-item>
</div>
</page-container>
</template>

<script>
import examples from 'docs-mixins/docsExample'
import MdInteractionEvents from 'core/utils/MdInteractionEvents'
function getEventNames () {
return MdInteractionEvents.map(event => `<li>${event}</li>`).join('')
}
export default {
name: 'Menu',
mixins: [examples],
data: () => ({
props: {
headings: ['Name', 'Description', 'Default'],
props: [
{
name: 'md-active',
type: 'Boolean',
description: 'Used to show/hide a menu programatically.',
defaults: 'false'
},
{
name: 'md-close-on-select',
type: 'Boolean',
description: `
When this options is true, the menu will close after a click on a <code>md-menu-item</code>. This will only work if the menu have one of the events below: <br>
<ul>${getEventNames()}</ul>`,
defaults: 'true'
},
{
name: 'md-direction',
type: 'String',
description: 'Set the direction of a menu. See below the detailed description of each direction.',
defaults: 'bottom-start'
},
{
offset: true,
name: 'md-direction="bottom-start"',
type: 'String',
description: 'Align the menu on the bottom left of the trigger',
defaults: '-'
},
{
offset: true,
name: 'md-direction="bottom-end"',
type: 'String',
description: 'Align the menu on the bottom right of the trigger',
defaults: '-'
},
{
offset: true,
name: 'md-direction="top-start"',
type: 'String',
description: 'Align the menu on the top left of the trigger',
defaults: '-'
},
{
offset: true,
name: 'md-direction="top-start"',
type: 'String',
description: 'Align the menu on the top right of the trigger',
defaults: '-'
},
{
name: 'md-align-trigger',
type: 'Boolean',
description: 'Align the content above the trigger. Also works in combination with <code>md-direction</code> values',
defaults: 'false'
},
{
name: 'md-offset-x',
type: 'Number',
description: 'Set a custom offset in X axis',
defaults: '0'
},
{
name: 'md-offset-y',
type: 'Number',
description: 'Set a custom offset in Y axis',
defaults: '0'
},
{
name: 'md-size',
type: 'String',
description: 'Set the size of a menu. See below the detailed description of each size.',
defaults: 'small'
},
{
offset: true,
name: 'md-size="small"',
type: 'String',
description: 'Set a menu with a small size (112px)',
defaults: '-'
},
{
offset: true,
name: 'md-size="medium"',
type: 'String',
description: 'Set a menu with a medium size (168px)',
defaults: '-'
},
{
offset: true,
name: 'md-size="big"',
type: 'String',
description: 'Set a menu with a big size (224px)',
defaults: '-'
},
{
offset: true,
name: 'md-size="huge"',
type: 'String',
description: 'Set a menu with a huge size (280px)',
defaults: '-'
},
{
offset: true,
name: 'md-size="auto"',
type: 'String',
description: 'Set a menu with a auto size',
defaults: '-'
}
]
}
})
}
</script>
45 changes: 45 additions & 0 deletions docs/app/pages/Components/Menu/examples/Alignments.vue
View file
@@ -0,0 +1,45 @@
<template>
<div>
<md-menu>
<md-button md-menu-trigger>Default</md-button>

<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>

<md-menu md-size="medium" md-align-trigger>
<md-button md-menu-trigger>Align with trigger</md-button>

<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>

<md-menu md-size="medium" :md-offset-x="127" :md-offset-y="-36">
<md-button md-menu-trigger>Custom Offset</md-button>

<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>
</div>
</template>

<script>
export default {
name: 'Alignments'
}
</script>

<style lang="scss" scoped>
.md-menu {
margin: 24px;
}
</style>
55 changes: 55 additions & 0 deletions docs/app/pages/Components/Menu/examples/Directions.vue
View file
@@ -0,0 +1,55 @@
<template>
<div>
<md-menu md-direction="bottom-start">
<md-button md-menu-trigger>Bottom Start</md-button>

<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>

<md-menu md-direction="bottom-end">
<md-button md-menu-trigger>Bottom End</md-button>

<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>

<md-menu md-direction="top-start">
<md-button md-menu-trigger>Top Start</md-button>

<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>

<md-menu md-direction="top-end">
<md-button md-menu-trigger>Bottom End</md-button>

<md-menu-content>
<md-menu-item>My Item 1</md-menu-item>
<md-menu-item>My Item 2</md-menu-item>
<md-menu-item>My Item 3</md-menu-item>
</md-menu-content>
</md-menu>
</div>
</template>

<script>
export default {
name: 'Directions'
}
</script>

<style lang="scss" scoped>
.md-menu {
margin: 24px;
}
</style>

0 comments on commit 8241575

Please sign in to comment.