Slotted Layout

<pa-slotted-layout> | PaSlottedLayout

A flexible layout system for creating page-level layouts with header, main content, and optional side panels. Perfect for dashboards, forms, and content management interfaces with consistent navigation and responsive design.

<pa-slotted-layout header-type="gradient" header-text="My Application">
  <div>Main content area</div>
</pa-slotted-layout>

Dev

Check issue with layout overflowing, see form layout.

Examples

Basic Layout

My Application

Main content area

<template>
  <pa-slotted-layout 
    header-type="gradient" 
    header-text="My Application"
  >
    <div>Your main content goes here</div>
  </pa-slotted-layout>
</template>

With Logo

Dashboard

Dashboard content with branded header

<template>
  <pa-slotted-layout 
    header-type="duotone" 
    header-text="Dashboard"
    logo="chart-line"
  >
    <div>Dashboard content</div>
  </pa-slotted-layout>
</template>

Form Layout

User Portal

Sign In

Access your account

<template>
  <pa-slotted-layout header-type="gradient" header-text="User Portal">
    <pa-slotted-layout-form
      hero-header="Sign In"
      hero-subheader="Access your account"
      action-btn-label="Login"
      @submit="handleLogin"
    >
      <pa-input v-model="email" placeholder="Email" />
      <pa-input v-model="password" type="password" placeholder="Password" />
    </pa-slotted-layout-form>
  </pa-slotted-layout>
</template>

<script setup>
import { ref } from 'vue'

const email = ref('')
const password = ref('')

const handleLogin = () => {
  // Handle form submission
}
</script>

Importing

import { PaSlottedLayout, PaSlottedLayoutForm } from '@payadvantage/ui-components'

Slots

PaSlottedLayout

Slot Name	Description
default	Main content area for the layout.
Named slots	Dynamic slots for right-hand panels controlled by v-model.

PaSlottedLayoutForm

Slot Name	Description
default	Form content area between hero section and action button.

Properties

PaSlottedLayout

Property	Type	Default	Description
headerType	String	'gradient'	Visual style of the header: 'gradient' or 'duotone'
modelValue	String	''	Controls which right-hand slot is visible (used with v-model)
logo	String	''	Icon name for the header logo
hideLogoBox	Boolean	false	Whether to hide the logo background box
logoUrl	String	''	URL for a custom logo image (alternative to icon)
headerText	String	''	Text displayed in the header alongside the logo

PaSlottedLayoutForm

Property	Type	Default	Description
heroIcon	String	''	Icon name for the hero section
heroIconVariant	String	'dark'	Visual variant for the hero icon
heroHeader	String	''	Main header text for the form
mobileHeroHeader	String	''	Mobile-specific header text
heroSubheader	String	''	Subheader text below the main header
actionBtnLabel	String	'Continue'	Label for the primary action button
hideActionBtn	Boolean	false	Whether to hide the action button
sfSelectorActionBtn	String	''	Custom selector for testing the action button

Events

PaSlottedLayout

Event	Parameters	Description
update:modelValue	slotName: string	Emitted when the right-hand slot visibility changes

PaSlottedLayoutForm

Event	Parameters	Description
submit	None	Emitted when the action button is clicked
close	None	Emitted when the close button is clicked

Methods

PaSlottedLayout

Method	Parameters	Description
showSlot2(slotName)	slotName: string	⚠️ Deprecated: Programmatically show a right-hand slot
hideSlot2()	None	⚠️ Deprecated: Hide the right-hand slot

Note: Use v-model instead of the deprecated methods for controlling slot visibility.

Dependencies

• Vue 3: Requires Vue 3 composition API and reactivity
• PaSlottedLayoutHeader: Internal header component with logo and navigation
• PaButton: Used for form action buttons and navigation controls
• PaIcon: Used for logos and hero icons
• PaHero components: PaHeroIcon, PaHeroHeader, PaHeroSubheader for form layouts

Usage Notes

Right-Hand Panels

Control side panels with v-model:

<template>
  <pa-slotted-layout v-model="activePanel">
    <div>Main content</div>
    
    <template #settings>Settings panel</template>
    <template #help>Help panel</template>
  </pa-slotted-layout>
  
  <pa-button @click="activePanel = 'settings'">Settings</pa-button>
</template>

<script setup>
import { ref } from 'vue'
const activePanel = ref('')
</script>

Architecture

• PaSlottedLayout: Main wrapper with header and content
• PaSlottedLayoutForm: Specialized form layouts with hero sections
• Header Types: gradient (default) or duotone styling
• Responsive: Automatic mobile/desktop adaptation