Bottom Tabs in Content Component

[xereda]

How do I put a “tab” bar on the bottom of a component in Quasar? The result I need is the same as the url below:

http://ionicframework.com/docs/v2/components/#tabs-icon

Thanks in advance for any help.

[rstoenescu]

Instead of slot="navigation" use slot="footer" on a Tabs (just like you would use navigational Tabs). This will ensure no matter the theme you’re using it will be contained by the footer.

[xereda]

This did not work.

<template>
  <div>
    <div class="layout-padding" style="margin:1em;">

      tela de contato com a docmob

    </div>
    <quasar-tabs slot="footer">
      <quasar-tab icon="view_quilt" route="/showcase/layout" exact replace>About</quasar-tab>
      <quasar-tab icon="view_day" route="/showcase/layout/toolbar" replace>Toolbar</quasar-tab>
      <quasar-tab icon="view_day" route="/showcase/layout/tabs" replace>Tabs</quasar-tab>
      <quasar-tab icon="input" route="/showcase/layout/drawer" replace>Drawer</quasar-tab>
    </quasar-tabs>

  </div>
</template>

[rstoenescu]

@xereda said in Bottom Tabs in Content Component:

<quasar-tabs slot=“footer”>
<quasar-tab icon=“view_quilt” route="/showcase/layout" exact replace>About</quasar-tab>
<quasar-tab icon=“view_day” route="/showcase/layout/toolbar" replace>Toolbar</quasar-tab>
<quasar-tab icon=“view_day” route="/showcase/layout/tabs" replace>Tabs</quasar-tab>
<quasar-tab icon=“input” route="/showcase/layout/drawer" replace>Drawer</quasar-tab>
</quasar-tabs>

<div slot="footer" class="toolbar">
      <quasar-tabs slot="footer">
        <quasar-tab icon="view_quilt" route="/showcase/layout" exact replace>About</quasar-tab>
        <quasar-tab icon="view_day" route="/showcase/layout/toolbar" replace>Toolbar</quasar-tab>
        <quasar-tab icon="view_day" route="/showcase/layout/tabs" replace>Tabs</quasar-tab>
        <quasar-tab icon="input" route="/showcase/layout/drawer" replace>Drawer</quasar-tab>
      </quasar-tabs>
    </div>

[xereda]

But I need inside a component and not in the main layouyt. Look how it looks inside my component:

[rstoenescu]

Put it outside of layout-padding div when you don’t need that padding.

[xereda]

@rstoenescu said in Bottom Tabs in Content Component:

Put it outside of layout-padding div when you don’t need that padding.

Its not working.

<template>
  <div>
    <div class="layout-padding">
    </div>
    <div slot="footer" class="toolbar">
      <quasar-tabs slot="footer">
        <quasar-tab icon="view_quilt" route="/showcase/layout" exact replace>About</quasar-tab>
        <quasar-tab icon="view_day" route="/showcase/layout/toolbar" replace>Toolbar</quasar-tab>
        <quasar-tab icon="view_day" route="/showcase/layout/tabs" replace>Tabs</quasar-tab>
        <quasar-tab icon="input" route="/showcase/layout/drawer" replace>Drawer</quasar-tab>
      </quasar-tabs>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import DmButton from './buttonFullWidth.vue'
// import { Toast, Dialog } from 'quasar'

export default {
  data () {
    return {
    }
  },
  mounted () {
    this.setHeaderTitle('Contato')
  },
  methods: {
    ...mapActions([
      'setHeaderTitle'
    ])
  },
  components: {
    DmButton
  },
  computed: {
  },
  watch: {
  }
}

</script>

<style>

</style>

[rstoenescu]

And also absolute position those tabs on the bottom of the container. Sorry for not saying full story from the beginning. I’m jumping from one work item to another and getting exhausted

[xereda]

@rstoenescu said in Bottom Tabs in Content Component:

And also absolute position those tabs on the bottom of the container. Sorry for not saying full story from the beginning. I’m jumping from one work item to another and getting exhausted

I can imagine how much it is working! I see that your effort will bring excellent results in the future.

With regard to “tabs” being absolutely at the bottom, within a component, there is no way to do. It is!?

Thank you for your help.

[joaopaulofilho]

Have you tried some of the css classes http://quasar-framework.org/api/css-positioning.html?