Dash Line

Name: PXD UI Component Library
Author: libondev

Use controllable forms to create beautiful solid or dotted lines.

Default

<template>
  <PDashLine class="h-px" />
</template>

Position

<template>
  <div class="w-full h-10 flex flex-col">
    <PDashLine class="h-px" position="top" />

    <PDashLine class="h-4 flex-1" :position="['left', 'right']" />

    <PDashLine class="h-px" position="bottom" />
  </div>
</template>

Dash and Gap

<template>
  <PStack class="w-full h-10">
    <PDashLine class="h-px" dash-size="10" gap="0" />

    <PDashLine class="h-px" dash-size="10" gap="5" />

    <PDashLine class="h-px" dash-size="5" gap="20" />
  </PStack>
</template>

Color

<template>
  <PStack class="w-full h-10">
    <PDashLine class="h-px" color="var(--color-red-700)" />

    <PDashLine class="h-px" color="var(--color-blue-700)" />

    <PDashLine class="h-px" color="var(--color-gray-700)" />
  </PStack>
</template>

Props

Name	Type	Default	Description
position	`BasePosition \| BasePosition[]`	`() => ['top']`	Edge(s) to draw on: `top`, `bottom`, `left`, `right` or an array of them
line-size	`string \| number`	-	Stroke width of the line, defaults to `1px`
dash-size	`string \| number`	-	Length of each dash, defaults to `8px`
color	`string`	-	Stroke color, defaults to `var(--color-gray-600)`
gap	`string \| number`	-	Gap between dashes, defaults to `8px`