Page

A dynamic grid layout for your pages.

Usages

The AppPage component will allow you to structure your pages as a grid with a left or right column. When no slots are provided, the page will be a single column.

<template>
  <Page>
    <template #left>
      <!-- Your Left Content -->
    </template>
    <!-- <AppPageContent /> -->
    <template #right>
      <!-- Your Right Content -->
    </template>
  </Page>
</template>

Slots

Props

toolbarLinks

Pass an array to the links prop of the HorizontalNavigation component. Each link can have the following properties:

• label - The label of the link.
• labelClass - The class of the link label.
• icon - The icon of the link.
• iconClass - The class of the link icon.
• avatar - The avatar of the link. You can pass all the props of the Avatar component.
• badge - A badge to display next to the label. You can pass all the props of the Badge component.
• click - The click handler of the link.

toolbarActions

Pass an array of the UButton component. Each item can have the following properties:

• color - Besides all the colors from the ui.colors object, you can also use the white, gray and black colors with their pre-defined variants.
• variant - You can use options such as solid, link, outline, soft, ghost.
• icon - Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name}.
• disabled - Use the disabled prop to disable the Button.
• loading - Use the loading prop to show a loading icon and disable the Button.