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. packy
    P
    • Profile
    • Following 0
    • Followers 0
    • Topics 6
    • Posts 14
    • Best 5
    • Groups 0

    packy

    @packy

    8
    Reputation
    481
    Profile views
    14
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    packy Follow

    Best posts made by packy

    • Route Animations

      I posted in here before but I guess did not explain it well enough. Basically other frameworks that use Vue such as Framework 7 have out of the box header and route animations that look like so:

      https://cdn.framework7.io/i/feats/swipeback.mp4
      https://cdn.framework7.io/i/feats/navbar.mp4

      When I look through the Quasar docs the only option I see is using the

      <q-transition
            appear
            enter="slideInRight"
            leave="slideOutRight"
            :duration='500'
          >
             <router-view />
      </q-transition>
      

      The issue with that is:

      • The animate.css transitions seem clunky like this (not smooth) when you shorten duration
      • Tabbed pages or single level pages should have no animation on enter from a tab, only when being reached via “back”
      • There is no drop shadow on pages being slid in
      • Header should animate in new elements separately with that slide cross-fade

      I know I can wrap elements in my specific components to achieve different animations on different elements/routes but this seems clunky still and a lot of extra code for a native feel. Is there any pre made native looking transitions (not animate.css)? Is there a tag on the layout I can use (I think Framework 7 you just add dynamic to the header to get that animation).

      Here is another framework with out of the box ios animations

      https://onsenui.github.io/vue-onsenui-kitchensink/

      Here you can see clicking on tabs has no animation, but then if you click on the far right tab you can view all native looking animations .

      With animations being such a big part of a nice looking app I would have to choose those 2 frameworks over Quasar even though I like this setup a lot more.

      posted in Help
      P
      packy
    • RE: Replace FontAwsome Icon

      So I guess you need to make sure to add !important after content. It doesnt need it on chrome emulator but on the actual device it does

      .fa-map:before
        content ''!important
        background url('~assets/route.svg')
        width 30px
        height 30px
      
      posted in Help
      P
      packy
    • RE: Using custom icons in Quasar components

      @eleina now that Quasar is going to use fontawsome icon you can change a standard icon like so with CSS/Sass/Stylus (not sure if thats what you were referring to in your post about ‘Found a way with CSS to put the icon there, but it’s a bit ugly’):

      .fa-facebook:before{
            content:url("path/to/your/img.svg");
      }
      
      posted in Framework
      P
      packy
    • RE: q-tab used to open drawer

      @rstoenescu Sorry, dumb oversight. Thanks!

      posted in Help
      P
      packy
    • RE: Route Animations

      Thanks @oliver. On the home page it states “Build responsive websites, hybrid mobile Apps (that look native!) and Electron apps using same code” so I just assumed there would be some native page animations like all the other frameworks out there. I really like everyting about this one, but do need to have some page transitions. Using Animate.css for those transitions always comes out bad in my opinion. Looks like I will have to either make something myself or move to Framework7.

      @rstoenescu @administrators is there proposed new feature for built in native route transitions coming soon? (please see my links in original post for what I am reffering too)

      posted in Help
      P
      packy

    Latest posts made by packy

    • RE: Route Animations

      Thanks @oliver. On the home page it states “Build responsive websites, hybrid mobile Apps (that look native!) and Electron apps using same code” so I just assumed there would be some native page animations like all the other frameworks out there. I really like everyting about this one, but do need to have some page transitions. Using Animate.css for those transitions always comes out bad in my opinion. Looks like I will have to either make something myself or move to Framework7.

      @rstoenescu @administrators is there proposed new feature for built in native route transitions coming soon? (please see my links in original post for what I am reffering too)

      posted in Help
      P
      packy
    • Route Animations

      I posted in here before but I guess did not explain it well enough. Basically other frameworks that use Vue such as Framework 7 have out of the box header and route animations that look like so:

      https://cdn.framework7.io/i/feats/swipeback.mp4
      https://cdn.framework7.io/i/feats/navbar.mp4

      When I look through the Quasar docs the only option I see is using the

      <q-transition
            appear
            enter="slideInRight"
            leave="slideOutRight"
            :duration='500'
          >
             <router-view />
      </q-transition>
      

      The issue with that is:

      • The animate.css transitions seem clunky like this (not smooth) when you shorten duration
      • Tabbed pages or single level pages should have no animation on enter from a tab, only when being reached via “back”
      • There is no drop shadow on pages being slid in
      • Header should animate in new elements separately with that slide cross-fade

      I know I can wrap elements in my specific components to achieve different animations on different elements/routes but this seems clunky still and a lot of extra code for a native feel. Is there any pre made native looking transitions (not animate.css)? Is there a tag on the layout I can use (I think Framework 7 you just add dynamic to the header to get that animation).

      Here is another framework with out of the box ios animations

      https://onsenui.github.io/vue-onsenui-kitchensink/

      Here you can see clicking on tabs has no animation, but then if you click on the far right tab you can view all native looking animations .

      With animations being such a big part of a nice looking app I would have to choose those 2 frameworks over Quasar even though I like this setup a lot more.

      posted in Help
      P
      packy
    • RE: Route and Header Animations

      @spectrolite I will take a look but the features I am describing are pretty common. In Framework 7 they come standard with the vue setup. Here is a link:

      https://cdn.framework7.io/i/feats/swipeback.mp4
      https://cdn.framework7.io/i/feats/navbar.mp4

      In their frame work you just add the tag of dynamic to the header for the fade transition and for the route you just add a tag to the link I think. Was just wondering if they had this out of the box for Quasar.

      posted in Help
      P
      packy
    • RE: Replace FontAwsome Icon

      So I guess you need to make sure to add !important after content. It doesnt need it on chrome emulator but on the actual device it does

      .fa-map:before
        content ''!important
        background url('~assets/route.svg')
        width 30px
        height 30px
      
      posted in Help
      P
      packy
    • Replace FontAwsome Icon

      So in the past I have replaced fontawsome icons with my own like so:

      .fa-map:before
        content ''
        background url('~assets/route.svg')
        width 30px
        height 30px
      

      This method works great when running in on my browser using quasar dev ios but when I run this on my actual device by doing a build and opening up XCode to run on my IPhone the icons for the old font awesome are there plus my replacement ones.

      See Below
      0_1499135350419_Screen Shot 2017-07-03 at 7.28.30 PM.png

      posted in Help
      P
      packy
    • RE: Using custom icons in Quasar components

      @eleina now that Quasar is going to use fontawsome icon you can change a standard icon like so with CSS/Sass/Stylus (not sure if thats what you were referring to in your post about ‘Found a way with CSS to put the icon there, but it’s a bit ugly’):

      .fa-facebook:before{
            content:url("path/to/your/img.svg");
      }
      
      posted in Framework
      P
      packy
    • RE: Future v0.14 Feature List

      Is there a potential release date? I am looking to use this over Framework 7 Vue but need some features in .14 before I can commit. Thanks!!! Looks great.

      posted in Announcements
      P
      packy
    • Offline mode

      I am really loving this framework, but unfortunately my enterprise app will be need in remote areas where service is not always good. Is there any way to have offline option and sync data when reconnect? Or I guess I should say, any good tutorials on how to do this?

      posted in Framework
      P
      packy
    • RE: Best flow to update iOS Native Build

      @rstoenescu @vic2017 I am also having this issue. Every time I after I work on the app, the changes look good when I am serving it (dev mode from the src folder). I then run quasar build. Then I open up the app in Xcode and deploy to my phone but dont see the changes I made (that I see in dev mode).

      OS: Mac Sierra ( 10.12.4 (16E195) )

      NODE: 7.2.1

      NPM: 4.0.5

      CORDOVA: 6.5.0

      posted in Framework
      P
      packy
    • Expected Spaces Not Tabs

      Is there a way to turn this off? I would prefer to use my common workflow in all my projects which use tabs not spaces, but when I do it in any vue file I get a compile error

      posted in CLI
      P
      packy