Container

GitHub
Een lay-outelement om de breedte van uw inhoud te centreren en te beperken.

Gebruik

Gebruik de standaardsleuf om de breedte van uw inhoud te centreren en te beperken.

De maximale breedte wordt geregeld door de --ui-container CSS variabele.
<template>
  <UContainer>
    <Placeholder class="h-32" />
  </UContainer>
</template>

API

Props

Prop Default Type
as
'div'
any

The element or component this component should render as.

ui
{ base?: any; }

Slots

Slot Type
default
{}

Thema

app.config.ts
export default defineAppConfig({
  ui: {
    container: {
      base: 'w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8'
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        container: {
          base: 'w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8'
        }
      }
    })
  ]
})

Wijzigingsgelog

No recent changes

App

A wrapper to provide global configuration, toasts and tooltips to your app.

Error

A pre-built error component with NuxtError support.