docs/app/pages/Components/Menu/Menu.vue
<example src="./examples/Directions.vue" />
<example src="./examples/Sizes.vue" />
<example src="./examples/MenuAlignments.vue" />
<example src="./examples/AutoClose.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 id="menu-directions">Directions</h2>
<p>The position of the menu content is calculated based on 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 id="menu-alignments">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['menu-alignments']" />
</div>
<div class="page-container-section">
<h2 id="menu-sizes">Sizes</h2>
<p><code>md-menu</code> has 4 different sizes and an 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 id="menu-autoclose">AutoClose</h2>
<p><code>md-menu</code> can be auto closed on click or select:</p>
<code-example title="Auto close menu on events" :component="examples['auto-close']" />
</div>
<div class="page-container-section">
<h2 id="menu-rich">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-table :headings="events.headings" :props="events.props" slot="events" />
<note-block tip>All <a href="https://router.vuejs.org/en/api/router-link.html" target="_blank">options</a> of <code>router-link</code> can be simply used here.</note-block>
</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: 'DocMenu',
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-click',
type: 'Boolean',
description: 'When this options is true, the menu will be closed after any click event.',
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: 'Aligns the menu on the bottom left of the trigger',
defaults: '-'
},
{
offset: true,
name: 'md-direction="bottom-end"',
type: 'String',
description: 'Aligns the menu on the bottom right of the trigger',
defaults: '-'
},
{
offset: true,
name: 'md-direction="top-start"',
type: 'String',
description: 'Aligns the menu on the top left of the trigger',
defaults: '-'
},
{
offset: true,
name: 'md-direction="top-end"',
type: 'String',
description: 'Aligns the menu on the top right of the trigger',
defaults: '-'
},
{
name: 'md-align-trigger',
type: 'Boolean',
description: 'Aligns the content above the trigger. Also works in combination with <code>md-direction</code> values',
defaults: 'false'
},
{
name: 'md-offset-x',
type: 'Number',
description: 'Sets a custom offset in X axis',
defaults: '0'
},
{
name: 'md-offset-y',
type: 'Number',
description: 'Sets a custom offset in Y axis',
defaults: '0'
},
{
name: 'md-size',
type: 'String',
description: 'Sets the size of a menu. See below the detailed description of each size.',
defaults: 'small'
},
{
offset: true,
name: 'md-size="small"',
type: 'String',
description: 'Sets a menu with a small size (112px)',
defaults: '-'
},
{
offset: true,
name: 'md-size="medium"',
type: 'String',
description: 'Sets a menu with a medium size (168px)',
defaults: '-'
},
{
offset: true,
name: 'md-size="big"',
type: 'String',
description: 'Sets a menu with a big size (224px)',
defaults: '-'
},
{
offset: true,
name: 'md-size="huge"',
type: 'String',
description: 'Sets a menu with a huge size (280px)',
defaults: '-'
},
{
offset: true,
name: 'md-size="auto"',
type: 'String',
description: 'Sets a menu with a auto size',
defaults: '-'
}
]
},
events: {
headings: ['Name', 'Description', 'Value'],
props: [
{
name: 'md-opened',
description: 'Triggered when menu opens',
value: 'null'
},
{
name: 'md-closed',
description: 'Triggered when menu closes',
value: 'null'
}
]
}
})
}
</script>