UIDivider

UIDivider

UIDivider is a component that visually separates content sections with a horizontal or vertical line. It provides options for customizing the divider appearance and can include a title positioned at different locations along the divider.

<template>
  <div>
    <p>Text above the divider</p>
    <UIDivider>Title</UIDivider>
    <p>Text below the divider</p>
  </div>
</template>

Props

• titlePlacement (‘left’ | ‘right’ | ‘center’, default: ‘center’): Position of the title
• dashed (boolean, default: false): Use dashed line style instead of solid line
• vertical (boolean, default: false): Display divider vertically instead of horizontally
• legacy (boolean, default: false): Use legacy styling for the divider

Slots

• default: Content for the optional divider title

Usage Examples

1. Basic Divider:

<template>
  <div>
    <section>First section content</section>
    <UIDivider />
    <section>Second section content</section>
  </div>
</template>

2. Divider with Title:

<template>
  <div>
    <section>First section content</section>
    <UIDivider>Section Title</UIDivider>
    <section>Second section content</section>
  </div>
</template>

3. Left-Aligned Title:

<template>
  <div>
    <section>First section content</section>
    <UIDivider titlePlacement="left">Section Title</UIDivider>
    <section>Second section content</section>
  </div>
</template>

4. Dashed Divider:

<template>
  <div>
    <section>First section content</section>
    <UIDivider :dashed="true">Optional Section</UIDivider>
    <section>Second section content</section>
  </div>
</template>

5. Vertical Divider:

<template>
  <div style="height: 100px; display: flex; align-items: center;">
    <span>Text</span>
    <UIDivider vertical />
    <span>Text</span>
    <UIDivider vertical />
    <span>Text</span>
  </div>
</template>

Best Practices

1. Content Organization:

   • Use dividers to logically group related content
   • Don’t overuse dividers which can lead to visual clutter
   • Consider alternative spacing methods when appropriate
   • Use divider titles to provide context for the content sections

2. Visual Styling:

   • Maintain consistent divider style throughout the interface
   • Choose appropriate color and thickness for the context
   • Consider the visual hierarchy when using titled dividers
   • Use dashed dividers to indicate optional or secondary divisions

3. Responsive Design:

   • Ensure dividers adapt well to different screen sizes
   • Consider using horizontal dividers for mobile views
   • Ensure sufficient spacing around dividers in all viewport sizes
   • Test vertical dividers in responsive layouts

4. Accessibility:

   • Ensure sufficient color contrast for dividers
   • Use semantic HTML where appropriate for content sections
   • Consider screen reader users when adding divider titles
   • Don’t rely solely on dividers to communicate structure