Pageheader Siguiente

GitHub también
Un header responsive para tus páginas.

xph0000xUso

El componente PageHeader muestra un encabezado para su página.

Úselo dentro de la ranura predeterminada del componente Page, antes del componente PageBody:

<template>
  <UPage>
    <UPageHeader />

    <UPageBody />
  </UPage>
</template>

Nombre

Utilice el prop title para mostrar un título en el encabezado.

PageHeader

<template>
  <UPageHeader title="PageHeader" />
</template>

Descripción

Utilice el prop description para mostrar una descripción en el encabezado.

PageHeader

A responsive page header with title, description and actions.
<template>
  <UPageHeader
    title="PageHeader"
    description="A responsive page header with title, description and actions."
  />
</template>

Categoría

Utilice el prop headline para mostrar un titular en el encabezado.

Components

PageHeader

A responsive page header with title, description and actions.
<template>
  <UPageHeader
    title="PageHeader"
    description="A responsive page header with title, description and actions."
    headline="Components"
  />
</template>

Enlaces

Utilice el prop links para mostrar una lista de Button en el encabezado.

Components

PageHeader

GitHub
A responsive page header with title, description and actions.
<script setup lang="ts">
import type { ButtonProps } from '@nuxt/ui'

const links = ref<ButtonProps[]>([
  {
    label: 'GitHub',
    icon: 'i-simple-icons-github',
    to: 'https://github.com/nuxt/ui/tree/v4/src/runtime/components/PageHeader.vue',
    target: '_blank'
  }
])
</script>

<template>
  <UPageHeader
    title="PageHeader"
    description="A responsive page header with title, description and actions."
    headline="Components"
    :links="links"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { ButtonProps } from '@nuxt/ui'

const links = ref<ButtonProps[]>([
  {
    label: 'GitHub',
    icon: 'i-simple-icons-github',
    to: 'https://github.com/nuxt/ui/tree/v4/src/runtime/components/PageHeader.vue',
    target: '_blank'
  }
])
</script>

<template>
  <UPageHeader
    title="PageHeader"
    description="A responsive page header with title, description and actions."
    headline="Components"
    :links="links"
  />
</template>

Ejemplos

Si bien estos ejemplos utilizan Nuxt Content, los componentes se pueden integrar con cualquier sistema de gestión de contenido.

Dentro de una página

Utilice el componente PageHeader en una página para mostrar el encabezado de la página:

pages/[...slug].vue
<script setup lang="ts">
const route = useRoute()

definePageMeta({
  layout: 'docs'
})

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('docs').path(route.path).first()
})

const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path)
})
</script>

<template>
  <UPage>
    <UPageHeader
      :title="page.title"
      :description="page.description"
      :headline="page.headline"
      :links="page.links"
    />

    <UPageBody>
      <ContentRenderer :value="page" />

      <USeparator />

      <UContentSurround :surround="surround" />
    </UPageBody>

    <template #right>
      <UContentToc :links="page.body.toc.links" />
    </template>
  </UPage>
</template>

API (Edición española)

Props (accesorios)

Prop Default Type
as
'div'
any

The element or component this component should render as.

headline
string
title
string
description
string
links
ButtonProps[]

Display a list of Button next to the title. { color: 'neutral', variant: 'outline' }

ui
{ root?: SlotClass; container?: SlotClass; wrapper?: SlotClass; headline?: SlotClass; title?: SlotClass; description?: SlotClass; links?: SlotClass; }

Slots en línea

Slot Type
headline
{}
title
{}
description
{}
links
{}
default
{}

Temas

app.config.ts
export default defineAppConfig({
  ui: {
    pageHeader: {
      slots: {
        root: 'relative border-b border-default py-8',
        container: '',
        wrapper: 'flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4',
        headline: 'mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5',
        title: 'text-3xl sm:text-4xl text-pretty font-bold text-highlighted',
        description: 'text-lg text-pretty text-muted',
        links: 'flex flex-wrap items-center gap-1.5'
      },
      variants: {
        title: {
          true: {
            description: 'mt-4'
          }
        }
      }
    }
  }
})
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: {
        pageHeader: {
          slots: {
            root: 'relative border-b border-default py-8',
            container: '',
            wrapper: 'flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4',
            headline: 'mb-2.5 text-sm font-semibold text-primary flex items-center gap-1.5',
            title: 'text-3xl sm:text-4xl text-pretty font-bold text-highlighted',
            description: 'text-lg text-pretty text-muted',
            links: 'flex flex-wrap items-center gap-1.5'
          },
          variants: {
            title: {
              true: {
                description: 'mt-4'
              }
            }
          }
        }
      }
    })
  ]
})

Changelog (Edición española)

No recent changes

PageGrid

A responsive grid system for displaying content in a flexible layout.

PageHero

A responsive hero for your pages.