Edit on GitHub

Layouts

Sidebar layouts split the page into one-third (for a control panel) and two-thirds (for the output). Each third is displayed in a card to visually separate it.

Matte.sidebar_layout — Function
sidebar_layout(leftpanel, rightpanel)

Create a side bar layout for your app: a 1/3 width control panel and a 2/3 width main/output panel.

source
Matte.side_panel — Function
side_panel(content...)

A narrow/side control (1/3 width) panel to be embedded in a sidebar_layout

Should only be used as part of a sidebar_layout

source
Matte.main_panel — Function
 main_panel(content...)

A main (2/3 width) panel to be embedded in a sidebar_layout

Should only be used as part of a sidebar_layout

source

Tab panel layout

Layout with pages/panels controlled by a tab bar.

Matte.tabs_layout — Function
tabs_layout(tabs...; vertical = false)

Create a tab layout – app (or inset) with pages that can be navigated to using a series of tabs

source
Matte.tab_panel — Function
tab_panel(title, content)

Define a panel for use in a tab layout

tab_panel should only be used as input to a tabs_layout

source
Matte.footer_control_layout — Function
footer_control_layout(main_panel, control_panel)

Creates a footer control layout, with a sticky/fixed-position footer at the bottom containing the controls for the app, and the main content at the top.

source
Matte.content_panel — Function
content_panel(content...)

Create the main content panel for your footer_control_layout. Should only be used as an input to footer_control_layout.

source
Matte.control_panel — Function
control_panel(content...)

Create the control panel for your footer_control_layout. Should only be used as an input to footer_control_layout.

source

Similar to a sidebar_layout except that the control panel appears at the bottom, underneath the main content/output of your app.

Note

The layout of footer_control_layout isn't working for apps with large amounts of content in the content_panel; the control panel obscures scrolling down.

Custom layouts

Functions to create custom flexgrid layouts using Vuetify's built-in container layout.

Matte.custom_grid_layout — Function
custom_grid_layout(content...)

Create a container to contain a custom layout.

Containers embed rows (which embed columns) to create layouts.

source
Matte.custom_grid_column — Function
custom_grid_column(content...; width = 12)

Create a layout column that covers width/12 of the row

Columns must be contained in rows (custom_grid_row)

source
Matte.custom_card — Function
custom_card(content...)

Create a 'card' to contain content. Cards are boxes with drop shadows.

For use in custom_grid_layouts, to define sections of the page inside a column

source

Customising look and feel

Customer header

Matte.header — Function
header(content, color, dark)

Define a custom app bar header. content should be html that will be included inside the <v-app-bar> tag. See Vuetify documentation for more information (or a simple example is included in the Matte documentation).

source

The header function allows you to define your own, custom HTML, header. The content in a header is wrapped inside a <v-app-bar> tag. You can include any valid elements inside a <v-app-bar> that are understood by Vuetify. This gives you a lot of flexibility, but has a steeper learning curve. As an example, here's how to add a title and some navigation icons to your custom header:

function ui() {
  header(
    "<v-toolbar-title>Page title</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-heart</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-magnify</v-icon>
      </v-btn>",
    "deep-purple accent-4",
    true  
  )
}
Matte.footer — Function
footer(content, bgcolor = "grey lighten-4")

Add a footer to your UI, containing content. If you need to include multiple elements inside content, wrap them as a tuple.

source