No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. elliedog
    E
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 2
    • Best 0
    • Groups 0

    elliedog

    @elliedog

    0
    Reputation
    1
    Profile views
    2
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    elliedog Follow

    Latest posts made by elliedog

    • RE: How to use slide transition between one component while switching pages?

      I tried that an am getting this error with no effects:

      [Vue warn]: invalid <transition> mode: “out-in”

      found in

      —> <QPageContainer>
      <LoginCoreView> at src/layouts/login/components/core/View.vue
      <QLayout>
      <Login> at src/layouts/login/Index.vue
      <App> at src/App.vue
      <Root>

      posted in Help
      E
      elliedog
    • How to use slide transition between one component while switching pages?

      Hi,

      I’m looking for advice on how to go about a “smooth” transition between two routes. By default I have the desired effect, just want the transition slowed down. Thanks in advance!

      /layouts/login/Login.vue

      <template>
        <div class="fit row wrap justify-center  content-start q-pt-xl">
          <q-card
            class="q-pl-xl q-pr-xl q-pb-xl q-mt-xl"
            style="width: 100%; max-width: 448px; background: #FFFFFF"
          >
            <q-card-section class="q-pl-none  q-mt-lg">
              <div style="color: #1a1f36;" class="text-h6 text-weight-regular">
                Sign in to your account
              </div>
            </q-card-section>
            <q-form>
              <span style="color: #3c4257; font-size: 14px;">Username</span>
              <q-input outlined v-model="username" class="q-pb-md q-pt-sm " />
              <div>
                <div class="row  ">
                  <div class="col self-end q-pb-sm">
                    <span style="color: #3c4257;">Password</span>
                  </div>
                  <div class="col text-right ">
                    <span>
                      <q-btn
                        no-caps
                        size="14px"
                        color="primary"
                        label="Forgot your password?"
                        class="test"
                        flat
                        to="/reset"
                    /></span>
                  </div>
                </div>
                <q-input class="q-pb-lg" outlined v-model="password" />
              </div>
              <div>
                <q-btn
                  color="primary"
                  label="Continue"
                  class="full-width q-pt-sm q-pb-sm"
                />
              </div>
            </q-form>
          </q-card>
        </div>
      </template>
      
      <style lang="stylus" scoped></style>
      
      <script>
      export default {
        data() {
          return {
            name: null,
            password: null,
            
          };
        }
      };
      </script>
      
      

      /layouts/login/pages/Reset.vue

      <template>
        <div class="fit row wrap justify-center  content-start q-pt-xl">
          <q-card
            class="q-pl-xl q-pr-xl q-pb-xl q-mt-xl"
            style="width: 100%; max-width: 448px; background: #FFFFFF"
          >
            <q-card-section class="q-pl-none  q-mt-lg">
              <div style="color: #1a1f36;" class="text-h6 text-weight-regular">
                Sign in to your account
              </div>
            </q-card-section>
            <q-form @submit="onSubmit" @reset="onReset">
              <span style="color: #3c4257; font-size: 14px;">Username</span>
              <q-input outlined v-model="username" class="q-pb-md q-pt-sm " />
              <div>
                <q-btn
                  color="primary"
                  label="Continue"
                  class="full-width q-pt-sm q-pb-sm"
                    to="/login"
               
                />
              </div>
            </q-form>
          </q-card>
        </div>
      </template>
      
      <style lang="stylus" scoped>
      
      </style>
      
      <script>
      export default {
        data() {
          return {
            username: null,
          }
        },
      
      };
      </script>
      

      /layouts/login/components/core/View.vue

      <template>
        <q-page-container>
      
              <router-view />
      
        </q-page-container>
      </template>
      
      <script>
      export default {
        name: "DashboardCoreView"
      };
      </script>
      

      /layouts/login/Index.vue

      <template>
        <q-layout view="lHh Lpr lFf">
          <dashboard-core-view />
        </q-layout>
      </template>
      
      <script>
      
      
      
      export default {
        name: 'Dashboard',
      
        components: {
      
          DashboardCoreView: () => import('./components/core/View'),
        },
      }
      </script>
      
      posted in Help
      E
      elliedog