Main

Um elemento principal que preenche a altura disponível da viewport.

Uso

O componente Main renderiza um elemento <main> que funciona em conjunto com o componente Header para criar um layout de altura total que se estende até a altura disponível da viewport.

O componente Main usa a variável CSS --ui-header-height para se posicionar corretamente abaixo do Header.

Exemplos

Dentro de `app.vue`

Use o componente Main no seu app.vue ou em um layout:

app.vue

<template>
  <NApp>
    <NHeader />

    <NMain>
      <NuxtLayout>
        <NuxtPage />
      </NuxtLayout>
    </NMain>

    <NFooter />
  </NApp>
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.

Slots

Slot	Type
`default`	`{}`

Tema

app.config.ts

export default defineAppConfig({
  ui: {
    main: {
      base: 'min-h-[calc(100vh-var(--ui-header-height))]'
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        main: {
          base: 'min-h-[calc(100vh-var(--ui-header-height))]'
        }
      }
    })
  ]
})

Changelog

No recent changes

Header

Um componente de header responsivo.

Sidebar

Uma sidebar recolhível com várias variantes visuais.