Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-11 16:53:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'origin/develop' into improvement/documentation

Browse source 
* origin/develop:
  Add more alignment options (#109)
This commit is contained in:
Marcos Moura 2016-11-25 01:37:49 -02:00
commit 3897394153
2 changed files with 106 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

65
docs/src/pages/components/Menu.vue
View file

@ -44,6 +44,37 @@
</md-menu>
</demo-example>
<demo-example label="Alignments">
<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-align-trigger>
<md-button md-menu-trigger>Align 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-offset-x="154" md-offset-y="12">
<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>
</demo-example>
<demo-example label="Sizes">
<md-menu>
<md-button md-menu-trigger>Default</md-button>
@ -208,6 +239,40 @@
</code-block>
</demo-example>
<demo-example label="Alignments">
<code-block lang="xml">
&lt;md-menu&gt;
&lt;md-button md-menu-trigger&gt;Default&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
&lt;md-menu md-align-trigger&gt;
&lt;md-button md-menu-trigger&gt;Align trigger&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
&lt;md-menu :md-offset-x=&quot;154&quot; md-offset-y=&quot;12&quot;&gt;
&lt;md-button md-menu-trigger&gt;Custom offset&lt;/md-button&gt;
&lt;md-menu-content&gt;
&lt;md-menu-item&gt;My Item 1&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 2&lt;/md-menu-item&gt;
&lt;md-menu-item&gt;My Item 3&lt;/md-menu-item&gt;
&lt;/md-menu-content&gt;
&lt;/md-menu&gt;
</code-block>
</demo-example>
<demo-example label="Sizes">
<code-block lang="xml">
&lt;md-menu&gt;

89
src/components/mdMenu/mdMenu.vue
View file

@ -22,6 +22,18 @@
type: String,
default: 'bottom right'
},
mdAlignTrigger: {
type: Boolean,
default: false
},
mdOffsetX: {
type: [Number, String],
default: 0
},
mdOffsetY: {
type: [Number, String],
default: 0
},
mdCloseOnSelect: {
type: Boolean,
default: true
@ -63,81 +75,62 @@
this.menuContent.classList.remove('md-size-' + size);
},
removeLastDirectionMenuContentClass(direction) {
this.menuContent.classList.remove('md-direction-' + direction.replace(' ', '-'));
this.menuContent.classList.remove('md-direction-' + direction.replace(/ /g, '-'));
},
addNewSizeMenuContentClass(size) {
this.menuContent.classList.add('md-size-' + size);
},
addNewDirectionMenuContentClass(direction) {
this.menuContent.classList.add('md-direction-' + direction.replace(' ', '-'));
if (!this.mdAlignTrigger) {
this.menuContent.classList.add('md-direction-' + direction.replace(/ /g, '-'));
}
},
getBottomRightPos() {
getPosition(vertical, horizontal) {
let menuTriggerRect = this.menuTrigger.getBoundingClientRect();
let position = {
top: menuTriggerRect.top,
left: menuTriggerRect.left
};
position = getInViewPosition(this.menuContent, position);
let top = vertical === 'top'
? menuTriggerRect.top + menuTriggerRect.height - this.menuContent.offsetHeight
: menuTriggerRect.top;
return position;
},
getBottomLeftPos() {
let menuTriggerRect = this.menuTrigger.getBoundingClientRect();
let position = {
top: menuTriggerRect.top,
left: menuTriggerRect.left - this.menuContent.offsetWidth + menuTriggerRect.width
};
let left = horizontal === 'left'
? menuTriggerRect.left - this.menuContent.offsetWidth + menuTriggerRect.width
: menuTriggerRect.left;
position = getInViewPosition(this.menuContent, position);
top += parseInt(this.mdOffsetY, 10);
left += parseInt(this.mdOffsetX, 10);
return position;
},
getTopRightPos() {
let menuTriggerRect = this.menuTrigger.getBoundingClientRect();
let position = {
top: menuTriggerRect.top + menuTriggerRect.height - this.menuContent.offsetHeight,
left: menuTriggerRect.left
};
if (this.mdAlignTrigger) {
if (vertical === 'top') {
top -= menuTriggerRect.height;
} else {
top += menuTriggerRect.height;
}
}
position = getInViewPosition(this.menuContent, position);
return position;
},
getTopLeftPos() {
let menuTriggerRect = this.menuTrigger.getBoundingClientRect();
let position = {
top: menuTriggerRect.top + menuTriggerRect.height - this.menuContent.offsetHeight,
left: menuTriggerRect.left - this.menuContent.offsetWidth + menuTriggerRect.width
};
position = getInViewPosition(this.menuContent, position);
return position;
return {top, left};
},
calculateMenuContentPos() {
let position;
switch (this.mdDirection) {
case 'bottom left':
position = this.getBottomLeftPos();
break;
case 'top right':
position = this.getTopRightPos();
position = this.getPosition('bottom', 'left');
break;
case 'top left':
position = this.getTopLeftPos();
position = this.getPosition('top', 'left');
break;
case 'top right':
position = this.getPosition('top', 'right');
break;
default:
position = this.getBottomRightPos();
position = this.getPosition('bottom', 'right');
}
position = getInViewPosition(this.menuContent, position);
this.menuContent.style.top = position.top + 'px';
this.menuContent.style.left = position.left + 'px';
},