PageHeader

Maps to Arco PageHeader: content is the page title; the back area keeps Element Plus text. See the Element Plus docs for props.

Basic Header

Content maps to Arco title; the application handles the back event.

Back

Project details

<script setup lang="ts">
import { ref } from 'vue'
const status = ref('')
</script>

<template>
  <el-page-header content="Project details" @back="status = 'Back requested'" style="width: 100%" />
  <el-text aria-live="polite">{{ status }}</el-text>
</template>

Back Label & Actions

Title sets the Element Plus back label; the extra slot adds actions on the right.

Projects

Overview

<script setup lang="ts">
import { ref } from 'vue'
const status = ref('')
</script>

<template>
  <el-page-header title="Projects" content="Overview" @back="status = 'Projects requested'" style="width: 100%">
    <template #extra><el-button type="primary">Save</el-button></template>
  </el-page-header>
  <el-text aria-live="polite">{{ status }}</el-text>
</template>

Differences from Arco

• Back text always appears, unlike Arco; the arrow uses an Element Plus icon.