Genie Discord forum

See the following simple app.jl.

module App
using GenieFramework
@genietools

@page("/", "app.jl.html")
end

And the app.jl.html file:

<q-layout view="hHh Lpr lff">
  <q-header style="background:darkblue">
    Header
  </q-header>
</q-layout>

When I run this I get: UndefVarError: q__header not defined. What's interesting is that quasar(:header, ...) works in a ui() function, so I expected q-headerto work in my example.

That is because the QHeader component has not been added to StippleUI yet. For unsupported components, you need to use the quasar call. You can embed it in your HTML as

<% quasar(:header,...)%>

See this for some more details https://learn.genieframework.com/docs/reference/reactive-ui/low-code-api#missing-components

Ok

Then I think the following documentation shall be fixed: https://learn.genieframework.com/docs/examples/reactive-ui/drawer-layout In the HTML UI code section, app.jl.html, the q-header appears like this:

<q-layout view="hHh Lpr lff">
   <q-header style="background:darkblue">
      <q-toolbar>

Also the missing components section shall specify how can I use q-header in HTML, like you described above. Currently, only the "ui" option is provided.

I answered too fast earlier and now I realise that, while what I said works, it doesn't make any sense. After all, the <% %> interpolation will inject the HTML for q-header into the page. I'll open an issue about this

For reference, this is how to make q-header work in HTML code

<q-layout view="hHh Lpr lff">
   <% 
    StippleUI.layout(view="hHh Lpr lff",
                     [
        quasar(:header, style="background:darkblue", toolbar(
            [
            btn(; dense=true, flat=true, round=true, icon="menu", @click("left_drawer_open = !left_drawer_open")),
            toolbartitle("Genie Component Gallery")
        ],
        ),
        ),
                                                     ])
 %>
</q-layout>

https://github.com/GenieFramework/StippleUI.jl/issues/126

I'll update the example as well, thanks again @marius.drulea !

personally I would consider this issue of low prio; I do prefer to make my layout without q-layout, q-header; just with columns, rows and cells;

the nginx setup issue is a lot more important in my point of view