framework7-vue/components/tabs.js

Build full featured iOS & Android apps using Framework7 & Vue

import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode } from "vue";
const _hoisted_1 = ["init"];
function render(_ctx, _cache) {
  return _ctx.animated ? (_openBlock(), _createElementBlock("div", {
    key: 0,
    ref: "elRef",
    class: _normalizeClass(_ctx.classNames('tabs-animated-wrap', _ctx.classes))
  }, [_createElementVNode("div", {
    class: _normalizeClass(_ctx.tabsClasses)
  }, [_renderSlot(_ctx.$slots, "default")], 2)], 2)) : _ctx.swipeable ? (_openBlock(), _createElementBlock("swiper-container", {
    key: 1,
    ref: "elRef",
    class: _normalizeClass(_ctx.classNames(_ctx.tabsClasses, _ctx.classes)),
    init: _ctx.swiperParams ? 'false' : 'true'
  }, [_renderSlot(_ctx.$slots, "default")], 10, _hoisted_1)) : (_openBlock(), _createElementBlock("div", {
    key: 2,
    ref: "elRef",
    class: _normalizeClass(_ctx.classNames(_ctx.tabsClasses, _ctx.classes))
  }, [_renderSlot(_ctx.$slots, "default")], 2));
}
import { computed, ref, onMounted, provide } from 'vue';
import { classNames } from '../shared/utils.js';
import { colorClasses, colorProps } from '../shared/mixins.js';
export default {
  name: 'f7-tabs',
  render,
  props: {
    animated: Boolean,
    swipeable: Boolean,
    routable: Boolean,
    swiperParams: {
      type: Object,
      default: undefined
    },
    ...colorProps
  },
  setup(props) {
    const elRef = ref(null);
    onMounted(() => {
      if (!props.swipeable || !props.swiperParams) return;
      if (!elRef.value) return;
      Object.assign(elRef.value, props.swiperParams);
      elRef.value.initialize();
    });
    const classes = computed(() => classNames(colorClasses(props)));
    const tabsClasses = computed(() => classNames({
      tabs: true,
      'tabs-routable': props.routable
    }));
    const TabsSwipeableContext = computed(() => props.swipeable);
    provide('TabsSwipeableContext', TabsSwipeableContext);
    return {
      elRef,
      classes,
      tabsClasses,
      classNames
    };
  }
};