Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. leopiccionia
    L
    • Profile
    • Following 0
    • Followers 0
    • Topics 0
    • Posts 38
    • Best 7
    • Groups 0

    leopiccionia

    @leopiccionia

    13
    Reputation
    1023
    Profile views
    38
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    leopiccionia Follow

    Best posts made by leopiccionia

    • RE: Full solution to Dynamic color scheme + extras

      @mesqueeb First mixin:

      strip-unit($value)
        unit($value, '')
      
      fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value)
        for $property in $properties
          {$property}: $min-value
      
        @media screen and (min-width: $min-vw)
          for $property in $properties
            {$property}: s('calc(%s + %s * (100vw - %s) / %s)', $min-value, strip-unit($max-value - $min-value), $min-vw, strip-unit($max-vw - $min-vw))
      
        @media screen and (min-width: $max-vw)
          for $property in $properties
            {$property}: $max-value
      
      /* Single property */
      html
        fluid-type(font-size, 320px, 1366px, 14px, 18px)
      
      /* Multiple properties with same values */
      h1
        fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em)
      
      posted in Help
      L
      leopiccionia
    • RE: v0.15: custom webpack config
      1. I think vue-loader works out of the box with Pug if you have pug-loader installed as (dev) dependency, so you don’t need to change Webpack configs for it.

      2. Webpack-related configurations are now handled in quasar.conf.js file. I’m not sure about the format, as the docs are still WIP, but I’d try to play with extendWebpack option.

      posted in Starter Kits
      L
      leopiccionia
    • RE: v-for to create menu (q-side-link item)

      @helpmelearn Vue 2.x doesn’t allow interpolations inside props/attributes. You should use v-bind:to="page.path" or shorthand :to="page.path".

      posted in Help
      L
      leopiccionia
    • RE: Full solution to Dynamic color scheme + extras

      @mesqueeb The following is functionally equivalent to second mixin, if I understood it correctly. If you’re curious, @(...){...} defines an anonymous mixin (much like an anonymous function). The second parameter can be either a named mixin or, in the following case, an anonymous mixin:

      $themes = {
        "theme-1": {
          "color": red
        },
        "theme-2": {
          "color": orange
        },
        "theme-3": {
          "color": yellow
        },
        "theme-4": {
          "color": green
        },
        "theme-5": {
          "color": blue
        }
      }
      
      themify($themes, $mixin)
        for $theme in $themes
          .{$theme} &
            $mixin($themes[$theme])
      
      .test
        themify($themes, @($theme) {
          color: $theme.color
        })
      
      posted in Help
      L
      leopiccionia
    • RE: Themeing, Stylus vs SCSS

      @celtic said in Themeing, Stylus vs SCSS:

      You are using the exotic css-preprocessor stylus, why this?!? I wasnt able to figure out any advantages by using this instead of SASS and migrating all our SASS universe might not be an option. We got booted because of this decision 🙂

      1. Nothing stops you from using Sass on your Quasar projects (see docs). The only con is that you won’t have access to Quasar internal variables (if you’re reusing your views, you probably won’t need them).
      2. Stylus is not exotic at all: it’s the most popular preprocessor after Sass and Less, and arguably more flexible and expressive than first two. Another advantage is that Stylus is written in Node, while Sass is written in Ruby (therefore requiring an additional dependence). So, when Quasar started, years ago, Stylus was probably the boldest choice – now, that it isn’t in active maintenance anymore, it’s not such a future-proof choice.
      posted in Framework
      L
      leopiccionia
    • RE: Datatable programmatically filter

      I’d suggest you to try binding data prop to a computed property.

      posted in Help
      L
      leopiccionia
    • RE: Is there a demo example app following recommended directory structure?

      The Quasar demo app, presented in the docs, is located here. It’s supposed to be a comprehensive showcase of all Quasar components, not a demo like TodoMVC, though.

      Answering your other question: the components are defined in the JS files themselves. But, instead of using <template> tags, it uses render functions (see Vue docs about render functions).

      posted in Framework
      L
      leopiccionia

    Latest posts made by leopiccionia

    • RE: Is there any Vue-centric way to access external APIs?

      There isn’t an official or “curated” Vue HTTP library for some time, as Vue team now understands that it wouldn’t fill any role that a third-party library like Axios couldn’t.

      However, maybe you were searching for something like this? https://github.com/huanleguang/v-model

      posted in Framework
      L
      leopiccionia
    • RE: using hex,hsl, or rgb color with component color attribute

      @dgk It seems that it’s being exposed in the parent element, you only need to add !important clause.
      https://codepen.io/anon/pen/jzGMZE

      posted in Framework
      L
      leopiccionia
    • RE: Can we get props from quasar.config.js? (0.15)

      @a47ae In this case, I’m not sure if this.$config would be reactive (what means creating extra listeners) or not.

      posted in Framework
      L
      leopiccionia
    • RE: Can we get props from quasar.config.js? (0.15)

      I think that a more Vue-centric solution would be registering a Vue mixin, either globally (you may need an app plugin for it) or locally.

      Example (global):

      Vue.mixin({
          foo: {
              bar: 'baz'
          }
      })
      

      Then access it as this.$options.foo.bar (please notice that vm.$options.* is not reactive).

      posted in Framework
      L
      leopiccionia
    • RE: using hex,hsl, or rgb color with component color attribute

      They are not colors from HTML/CSS, they are colors from Quasar Color Palette, that’s itself based on Material Design palette.

      Notice that you can add your custom colors. While Vue doesn’t re-introduce style interpolations, using v-bind:style accordingly should probably work (I haven’t tried).

      posted in Framework
      L
      leopiccionia
    • RE: Is there a demo example app following recommended directory structure?

      The Quasar demo app, presented in the docs, is located here. It’s supposed to be a comprehensive showcase of all Quasar components, not a demo like TodoMVC, though.

      Answering your other question: the components are defined in the JS files themselves. But, instead of using <template> tags, it uses render functions (see Vue docs about render functions).

      posted in Framework
      L
      leopiccionia
    • RE: If I add styles in one page they are applied on all [v0.15]

      More details: https://vue-loader.vuejs.org/en/features/scoped-css.html

      posted in Framework
      L
      leopiccionia
    • RE: Full solution to Dynamic color scheme + extras

      @mesqueeb

      The first mixin with the fluid font-size etc. Is it possible that it doesn’t work well with setting some height to vh?

      Your problem may be related to an issue where some browsers doesn’t allow vh and vw values inside calc() expressions.

      (what about rem and em?)

      It should work as expected, as my mixin and the one you provided in Sass should output the same on a demo using em. If the outputs are different, let me know.

      posted in Help
      L
      leopiccionia
    • RE: Themeing, Stylus vs SCSS

      @celtic said in Themeing, Stylus vs SCSS:

      You are using the exotic css-preprocessor stylus, why this?!? I wasnt able to figure out any advantages by using this instead of SASS and migrating all our SASS universe might not be an option. We got booted because of this decision 🙂

      1. Nothing stops you from using Sass on your Quasar projects (see docs). The only con is that you won’t have access to Quasar internal variables (if you’re reusing your views, you probably won’t need them).
      2. Stylus is not exotic at all: it’s the most popular preprocessor after Sass and Less, and arguably more flexible and expressive than first two. Another advantage is that Stylus is written in Node, while Sass is written in Ruby (therefore requiring an additional dependence). So, when Quasar started, years ago, Stylus was probably the boldest choice – now, that it isn’t in active maintenance anymore, it’s not such a future-proof choice.
      posted in Framework
      L
      leopiccionia
    • RE: q-modal gives body a padding-right of 17px ?

      @benoitranque If I remark correctly, the padding was there for the case when scrollbar was needed.

      posted in Framework
      L
      leopiccionia