Skip to main content

Meta / Notification bar

Display a notification bar notification_bar. meta Use this kind of notification when an immediate user feedback is needed. For cases when the feedback is not immediate (long-running jobs), use ui.notification as it will be visible even when the user is not currently focusing browser tab with your Wave app.

from h2o_wave import main, app, Q, ui


@app('/demo')
async def serve(q: Q):
    if not q.client.initialized:
        q.page['form'] = ui.form_card(box='1 1 2 4', items=[
            ui.button(name='top_right', label='Success top-right'),
            ui.button(name='top_center', label='Error top-center'),
            ui.button(name='top_left', label='Warning top-left'),
            ui.button(name='bottom_right', label='Info bottom-right'),
            ui.button(name='bottom_center', label='Info bottom-center'),
            ui.button(name='bottom_left', label='Info bottom-left'),
        ])
        q.client.initialized = True
    if q.args.top_right:
        q.page['meta'] = ui.meta_card(box='', notification_bar=ui.notification_bar(
            text='Success notification',
            type='success',
            position='top-right',
            buttons=[ui.button(name='btn1', label='Button 1', link=True)]
        ))
    if q.args.top_center:
        q.page['meta'] = ui.meta_card(box='', notification_bar=ui.notification_bar(
            text='Error notification message that should hopefully span at least two lines.',
            type='error',
            position='top-center',
            buttons=[
                ui.button(name='btn1', label='Button 1'),
                ui.button(name='btn2', label='Button 2')
            ]
        ))
    if q.args.top_left:
        q.page['meta'] = ui.meta_card(box='', notification_bar=ui.notification_bar(
            text='Warning notification',
            type='warning',
            position='top-left',
        ))
    if q.args.bottom_right:
        q.page['meta'] = ui.meta_card(box='', notification_bar=ui.notification_bar(
            text='Info notification',
            type='info',
            position='bottom-right',
        ))
    if q.args.bottom_center:
        q.page['meta'] = ui.meta_card(box='', notification_bar=ui.notification_bar(
            text='Info notification',
            position='bottom-center',
        ))
    if q.args.bottom_left:
        q.page['meta'] = ui.meta_card(box='', notification_bar=ui.notification_bar(
            text='Default notification',
            position='bottom-left',
        ))
    await q.page.save()

Tags:  meta  notification_bar