Divider

Divider is nothing but a partitioning element that has specific dimensions

Examples

Horizontal

Code

<script setup lang="ts">
import { BaseDivider } from '@point-hub/papp'
</script>

<template>
  <div class="flex">
    Left Content
    <component :is="BaseDivider" orientation="horizontal" />
    Middle Content
    <component :is="BaseDivider" orientation="horizontal" />
    Right Content
  </div>
</template>

Horizontal with text

Code

<script setup lang="ts">
import { BaseDivider } from '@point-hub/papp'
</script>

<template>
  <div class="flex">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus vel labore neque
    similique laudantium commodi illum architecto qui placeat, dolore totam iure, dolorem voluptates
    laborum, expedita voluptatibus sit officiis eius.
    <component :is="BaseDivider" orientation="horizontal" text="VS" />
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sunt ipsam maiores deserunt
    laudantium quia optio. Saepe iure soluta dignissimos quos suscipit? Itaque minima similique
    deleniti cumque? Odio, magni veritatis.
  </div>
</template>

Vertical

Code

<script setup lang="ts">
import { BaseDivider } from '@point-hub/papp'
</script>

<template>
  <div class="flex flex-col">
    Left Content
    <component :is="BaseDivider" orientation="vertical" />
    Middle Content
    <component :is="BaseDivider" orientation="vertical" />
    Right Content
  </div>
</template>

Vertical with text

Code

<script setup lang="ts">
import { BaseDivider } from '@point-hub/papp'
</script>

<template>
  <div class="flex flex-col">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus vel labore neque
    similique laudantium commodi illum architecto qui placeat, dolore totam iure, dolorem voluptates
    laborum, expedita voluptatibus sit officiis eius.
    <component :is="BaseDivider" orientation="vertical" text="VS" />
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ad sunt ipsam maiores deserunt
    laudantium quia optio. Saepe iure soluta dignissimos quos suscipit? Itaque minima similique
    deleniti cumque? Odio, magni veritatis.
  </div>
</template>

Divider API

Types

export type BaseDividerOrientation = 'horizontal' | 'vertical'

Props

Name	Type	Default	Description
orientation	BaseDividerOrientation		Divider orientation is required.
text	string		Divider text.