PayAdvantage UI Components

Appearance

Divider ​

<pa-divider> | PaDivider

A simple horizontal divider component that creates a visual separator line between content sections in your Vue 3 applications.

Usage ​

Content above divider
Content below divider
vue
<template>
  <pa-sheet>
    <div>Content above divider</div>
    <pa-divider />
    <div>Content below divider</div>
  </pa-sheet>
</template>

Examples ​

Multiple Sections ​

Section 1

Content for the first section.

Section 2

Content for the second section.

Section 3

Content for the third section.

vue
<template>
  <pa-sheet>
    <h3>Section 1</h3>
    <p>Content for the first section.</p>
    <pa-divider />
    <h3>Section 2</h3>
    <p>Content for the second section.</p>
    <pa-divider />
    <h3>Section 3</h3>
    <p>Content for the third section.</p>
  </pa-sheet>
</template>

Importing ​

js
import { PaDivider } from '@payadvantage/ui-components'

Properties ​

The PaDivider component has no configurable properties.

Events ​

The PaDivider component does not emit any events.

Dependencies ​

  • Bootstrap 5 - Provides base styling for the divider line

For spacing-based dividers, see: