Encabezado de página

Si la ruta de la página es simple, se recomienda usar PageHeader en lugar de Breadcrumb.

Ejemplo completo

Uso Básico

Encabezado de página estándar, para escenarios simples.

Icono personalizado

El icono por defecto puede no cumplir con su satisfacción, puede personalizar el icono configurando el atributo icon como en el ejemplo.

Sin icono

A veces la página está llena de elementos y puede que no quiera que el icono aparezca en la página, puede establecer el atributo icon a null para deshacerse de él.

Breadcrumbs

El encabezado de la página le permite añadir breadcrumbs para dar información de ruta a los usuarios por medio del slot breadcrumb.

Sección de operación adicional

El encabezado puede ser tan complicado como sea necesario, puede añadir secciones adicionales a la cabecera, para permitir interacciones enriquecidas.

Contenido principal

A veces queremos que la cabecera se muestre con algún contenido correspondiente, puede usar el slot defaut para hacerlo.

Anatomía

El componente está compuesto por estas partes

<template>
  <el-page-header>
    <!-- Line 1 -->
    <template #breadcrumb />
    <!-- Line 2 -->
    <template #icon />
    <template #title />
    <template #content />
    <template #extra />
    <!-- Lines after 2 -->
    <template #default />
  </el-page-header>
</template>

API

Atributos

Nombre	Descripción	Tipo	Por defecto
icon	componente de icono del encabezado de página	`string` / `Component`	Back
title	título principal del encabezado de la página, por defecto es con a11y incorporada	`string`	''
content	contenido del encabezado de la página	`string`	''