Making use of Quasar's q-parallax element

[josephsikich]

Question

First off, thank you for all your work. NiceGui has been a pleasure to experiment/work with so far. I especially appreciate all the documentation, and how active you are here and on Reddit, helping out.

My question is regarding making use of Quasar's q-parallax element. I realize that it hasn't been added to NiceGui yet, but I have researched here a bit, and it has been suggested (for other as of yet un-added Quasar elements) that you can still make use of them by doing a ui.element('...'). I have tried the following:

with ui.element('div').classes('q-pa-md q-gutter-md'):
    with ui.element('div').classes('row justify-between'):
        with ui.element('q-parallax').props('src=https://cdn.quasar.dev/img/parallax2.jpg'):
            ui.label("TEXT").classes('text-white')

That was based on the most basic example in Quasar's documentation. In any event, that code doesn't work, so I'm not sure if 1. My code is just bad, or 2. The Quasar library included with NiceGui is older, and doesn't have access to q-parallax, as it seems Quasar added it in v2.

The documentation I found in NiceGui's Styling section, is as follows: "NiceGUI uses the Quasar Framework version 1.0 and hence has its full design power."; however, poking around in the NiceGui GitHub repo, I found that falcoschindler updated the following dependency (in nicegui/nicegui/static/quasar.umd.prod.js) ~10 months ago:

/*!
* Quasar Framework v2.13.0
* (c) 2015-present Razvan Stoenescu
* Released under the MIT License.
*/

Thanks for any help you can provide. I apologize if any of my descriptions are poor, but I have not been involved in any front-end stuff up til now.

Edit:

I managed to get the following working:

with ui.element('q-parallax').props('src=https://cdn.quasar.dev/img/parallax2.jpg'):
    ui.label("TEXT").classes('text-white')

Not sure what adding the additional pieces I attempted to copy from the original example did.

[python-and-fiction]

for i in range(10):
        ui.label(str(i))
with ui.element().classes('w-full h-8') :
        with ui.element('q-parallax').add_slot('media'):
            ui.image(source='https://cdn.quasar.dev/img/parallax2.jpg').classes('w-full h-8')
            ui.label("TEXT").classes('text-white')

for i in range(20):
        ui.label(str(i))

[josephsikich]

python-and-fiction:

Thanks for trying to help me out, but that code did not work for me, for whatever reason.

With regards to using .add_slot, I was able to get the following to work:

with ui.element('q-parallax') as parallax:
    parallax.add_slot('media', '<img src="https://cdn.quasar.dev/img/parallax2.jpg">')

I wasn't, however, wasn't able to get one of Quasar's more complicated example's to work:

with ui.element('q-parallax') as parallax:
    parallax.add_slot('media', '<img src="https://cdn.quasar.dev/img/parallax2.jpg">')
    parallax.add_slot('content="scope"', '''
        <div
          class="absolute column items-center"
          :style="{
            opacity: 0.45 + (1 - scope.percentScrolled) * 0.55,
            top: (scope.percentScrolled * 60) + '%',
            left: 0,
            right: 0
          }"
        >
          <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" style="width: 150px; height: 150px">
          <div class="text-h3 text-white text-center">Quasar Framework</div>
          <div class="text-h6 text-grey-3 text-center">
            v{{ $q.version }}
          </div>
        </div>
    ''')

[python-and-fiction]

you need to add some items in you page, make page so long that need scroll. And you can see the result.

with ui.element():
        for i in range(40):
                ui.label(str(i))
with ui.element().classes('w-full h-[300px]'):
        with ui.element('q-parallax').props(':height="300"') as para:
            with para.add_slot('media'):
                ui.element('img').props('src=https://cdn.quasar.dev/img/parallax2.jpg')
            ui.label("TEXT").classes('text-white')
with ui.element():
        for i in range(40):
                ui.label(str(i))

[falkoschindler]

Nice! And I noticed you don't even need to use the media slot:

ui.label('Dummy text...').classes('border h-screen')

with ui.element('q-parallax').props(':height=300 src=https://cdn.quasar.dev/img/parallax2.jpg'):
    ui.label('Text').classes('text-white')

ui.label('Dummy text...').classes('border h-screen')

Would someone like to create a pull request for a ui.parallax element with parameters height, src and speed? 🙂

[josephsikich]

Hello, again. Thanks to the help from python-and-fiction, and a bunch of reading around here in other similar questions, I managed to get the following working:

# WORKS!
with ui.element().classes('w-full h-[500px]'):
    with ui.element('q-parallax').props(':height="500"') as para:
        with para.add_slot('media'):
            ui.element('img').props('src=https://cdn.quasar.dev/img/parallax2.jpg')
        para.add_slot('content', '''
                <div
                  class="absolute column items-center"
                  :style="{
                    opacity: 0.45 + (1 - props.percentScrolled) * 0.55,
                    top: (props.percentScrolled * 60) + '%',
                    left: 0,
                    right: 0
                  }"
                >
                  <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" style="width: 150px; height: 150px">
                  <div class="text-h3 text-white text-center">Quasar Framework</div>
                  <div class="text-h6 text-grey-3 text-center">
                    v{{ $q.version }}
                  </div>
                </div>
            ''')

That was me trying to get functional equivalency to the example up on Quasar's documentation page:

<template>
  <div class="q-pa-md">
    <q-parallax>
      <template v-slot:media>
        <img src="https://cdn.quasar.dev/img/parallax2.jpg">
      </template>

      <template v-slot:content="scope">
        <div
          class="absolute column items-center"
          :style="{
            opacity: 0.45 + (1 - scope.percentScrolled) * 0.55,
            top: (scope.percentScrolled * 60) + '%',
            left: 0,
            right: 0
          }"
        >
          <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" style="width: 150px; height: 150px">
          <div class="text-h3 text-white text-center">Quasar Framework</div>
          <div class="text-h6 text-grey-3 text-center">
            v{{ $q.version }}
          </div>
        </div>
      </template>
    </q-parallax>
  </div>
</template>

Basically, it uses a q-parallax to have a parallax controlled background image, superimposed with a gear icon image, "Quasar Framework", and the Quasar version displayed as "content" on top of the q-parallax. Additionally, by making use of "naming" the content "scope", it allows for some fancy code that changes the opacity of the q-parallax content based on how far the user has scrolled down.

Again, I got it working with the code I posted up above, but I was wondering if there was another way to do it - the opacity being controlled using the content slot's percentScrolled - rather than having to put everything "raw" in the .add_slot(name, template)'s template?

As always, thanks for everything.

[falkoschindler]

That's a great idea using templates to dynamically update the style of certain elements!
Alternatively you can subscribe to the "scroll" event and use the .style() method:

with ui.element('q-parallax').props(':height=500 src=https://cdn.quasar.dev/img/parallax2.jpg') as para:
    with ui.column(align_items='center') as content:
        ui.image('https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg').classes('w-[150px]')
        ui.label('Quasar Framework').classes('text-h3 text-white text-center')
    para.on('scroll', lambda e: content.style(f'opacity: {0.45 + (1 - e.args) * 0.55}; top: {0.6 * e.args:%}'))

I just left out the Quasar version string, which is a bit harder to get this way and probably off-topic anyway.