aboutsummaryrefslogtreecommitdiff
path: root/src/components/tab_switcher/tab_switcher.js
diff options
context:
space:
mode:
authorHJ <30-hj@users.noreply.git.pleroma.social>2019-09-26 05:27:59 +0000
committerHJ <30-hj@users.noreply.git.pleroma.social>2019-09-26 05:27:59 +0000
commit501208d350a9bd0fbcafb13d70a2fa6182fb8cf3 (patch)
treebeb8a09c2033d5c3da6dcf49a1fe259e1986c4d0 /src/components/tab_switcher/tab_switcher.js
parente55645aec16f083e4eedf6b01954b79689c244f1 (diff)
parent836cb817d18f5e3ee6dab446633b8e05733c2a3a (diff)
Merge branch 'emoji-selector-update' into 'develop'
Emoji selector update Closes #101 See merge request pleroma/pleroma-fe!895
Diffstat (limited to 'src/components/tab_switcher/tab_switcher.js')
-rw-r--r--src/components/tab_switcher/tab_switcher.js26
1 files changed, 23 insertions, 3 deletions
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 08d5d08f..3ca316b9 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -4,7 +4,26 @@ import './tab_switcher.scss'
export default Vue.component('tab-switcher', {
name: 'TabSwitcher',
- props: ['renderOnlyFocused', 'onSwitch', 'activeTab'],
+ props: {
+ renderOnlyFocused: {
+ required: false,
+ type: Boolean,
+ default: false
+ },
+ onSwitch: {
+ required: false,
+ type: Function
+ },
+ activeTab: {
+ required: false,
+ type: String
+ },
+ scrollableTabs: {
+ required: false,
+ type: Boolean,
+ default: false
+ }
+ },
data () {
return {
active: this.$slots.default.findIndex(_ => _.tag)
@@ -28,7 +47,8 @@ export default Vue.component('tab-switcher', {
},
methods: {
activateTab (index) {
- return () => {
+ return (e) => {
+ e.preventDefault()
if (typeof this.onSwitch === 'function') {
this.onSwitch.call(null, this.$slots.default[index].key)
}
@@ -87,7 +107,7 @@ export default Vue.component('tab-switcher', {
<div class="tabs">
{tabs}
</div>
- <div class="contents">
+ <div class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}>
{contents}
</div>
</div>