The most common layout

[mturoci]

Answer

from h2o_wave import Q, ui, main, app


@app('/demo')
async def serve(q: Q):
    q.page['meta'] = ui.meta_card(box='', layouts=[ui.layout(breakpoint='xs', zones=[
        ui.zone(name='main', size='100vh', zones=[
            ui.zone(name='header', size='80px'),
            ui.zone(name='body', size='1'),
            ui.zone(name='footer', size='60px'),
        ]),
    ])])

    q.page['header'] = ui.header_card(box='header', title='Header', subtitle='Subtitle')
    q.page['body'] = ui.form_card(box='body', items=[ui.text(content='I am body!')])
    q.page['footer'] = ui.footer_card(box='footer', caption='Footer caption')
    await q.page.save()

Explanation

The general idea is to predefine our app wrapper height in advance (100vh), render known height elements (header/footer) with fixed sizes and let our body fill the rest of the available space (size=1).

Note: 100vh means 100% of viewport height - visible screen size.

Result

Screen.Recording.2021-10-19.at.6.59.12.AM.mov

[mtanco]

🎉 awesome! @mturoci Can we get this in the IDE hints?!

[mturoci]

@mtanco sure, but we need to release them first :)