Bottom Tabs in Content Component



  • 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.


  • Admin

    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.



  • This did not work.

    0_1479856286847_Captura de Tela 2016-11-22 às 21.10.21.png

    
    <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>
    
    

  • Admin

    @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>
    


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

    0_1479933455041_Captura de Tela 2016-11-23 às 18.36.01.png


  • Admin

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



  • @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>
    
    
    

    0_1479939125171_Captura de Tela 2016-11-23 às 20.10.47.png


  • Admin

    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 :(



  • @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.



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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.