Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-16 22:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add swipe on Tabs header (#430)

Browse source 
* implement scroll on Tabs header

* update let to const on calculateIndicatorPos method

* rename prop to md-scrollable-navigation

* update docs

* fix style

* update style

* make navigation scrollable by default

* remove unused prop
This commit is contained in:
Igor Ribeiro 2017-03-20 21:40:18 -03:00 committed by Marcos Moura
parent f268648174
commit f80f1b5aa6
3 changed files with 49 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
docs/src/pages/components/Tabs.vue
View file

@ -177,7 +177,23 @@
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<md-tab id="pictures" md-label="Pictures" md-tooltip="This is the pictures tab!">
<md-tab id="pictures" md-label="Pictures">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<md-tab id="playlists" md-label="Playlists">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<md-tab id="albums" md-label="Albums">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<md-tab id="settings" md-label="Settings">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
<md-tab id="account" md-label="Account">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
</md-tab>
</md-tabs>
@ -199,7 +215,23 @@
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
&lt;/md-tab&gt;
&lt;md-tab id=&quot;pictures&quot; md-label=&quot;Pictures&quot; md-tooltip=&quot;This is the pictures tab!&quot;&gt;
&lt;md-tab id=&quot;pictures&quot; md-label=&quot;Pictures&quot; md-tooltip=&quot;&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
&lt;/md-tab&gt;
&lt;md-tab id=&quot;playlists&quot; md-label=&quot;Playlists&quot;&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
&lt;/md-tab&gt;
&lt;md-tab id=&quot;albums&quot; md-label=&quot;Albums&quot;&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
&lt;/md-tab&gt;
&lt;md-tab id=&quot;settings&quot; md-label=&quot;Settings&quot;&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
&lt;/md-tab&gt;
&lt;md-tab id=&quot;account&quot; md-label=&quot;Account&quot;&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
&lt;/md-tab&gt;
&lt;/md-tabs&gt;

13
src/components/mdTabs/mdTabs.scss
View file

@ -1,4 +1,5 @@
@import '../../core/stylesheets/variables.scss';
@import '../../core/stylesheets/mixins.scss';
$tab-width: 72px;
$tab-max-width: 264px;
@ -26,6 +27,7 @@ $tab-max-width: 264px;
z-index: 1;
display: flex;
transition: $swift-ease-out;
overflow: hidden;
&.md-has-icon.md-has-label {
min-height: 72px;
@ -50,12 +52,20 @@ $tab-max-width: 264px;
}
}
.md-tabs-navigation-container {
display: flex;
overflow-x: scroll;
@include layout-small-and-up {
margin-bottom: -15px;
}
}
.md-tab-header {
min-width: $tab-width;
max-width: $tab-max-width;
margin: 0;
padding: 0 12px;
display: inline-block;
position: relative;
cursor: pointer;
border: 0;
@ -65,6 +75,7 @@ $tab-max-width: 264px;
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
flex-shrink: 0;
&.md-disabled {
cursor: default;

4
src/components/mdTabs/mdTabs.vue
View file

@ -1,6 +1,7 @@
<template>
<div class="md-tabs" :class="[themeClass, tabClasses]">
<md-whiteframe md-tag="nav" class="md-tabs-navigation" :md-elevation="mdElevation" :class="navigationClasses" ref="tabNavigation">
<div class="md-tabs-navigation-container" ref="tabsContainer" @scroll="calculateIndicatorPos">
<button
v-for="header in tabList"
:key="header.id"
@ -21,6 +22,7 @@
</button>
<span class="md-tab-indicator" :class="indicatorClasses" ref="indicator"></span>
</div>
</md-whiteframe>
<div class="md-tabs-content" ref="tabContent" :style="{ height: contentHeight }">
@ -141,7 +143,7 @@
if (this.$refs.tabHeader && this.$refs.tabHeader[this.activeTabNumber]) {
const tabsWidth = this.$el.offsetWidth;
const activeTab = this.$refs.tabHeader[this.activeTabNumber];
const left = activeTab.offsetLeft;
const left = activeTab.offsetLeft - this.$refs.tabsContainer.scrollLeft;
const right = tabsWidth - left - activeTab.offsetWidth;
this.$refs.indicator.style.left = left + 'px';