---
title: Separator
desc: A visual way to separate sections of content or elements either horizontally or vertically.
ico: mdi:divide
keywords:
  - divide
  - divider
  - horizontal
  - rule
  - vertical

props:
  - class: .prs-separator
    type: component
    desc: For container
  - class: .prs-separator-vertical
    type: modifier
    desc: Flow vertically
  - class: .prs-separator-start
    type: modifier
    desc: Place object near the start
  - class: .prs-separator-end
    type: modifier
    desc: Place object near the end

controls:
  - name: text
    type: text
    label: Text
    desc: As always, keep it simple.
    default: Separator
  - name: orientation
    type: radio
    label: Orientation
    desc: Horizontal or vertical.
    default: horizontal
    options:
      - horizontal
      - vertical
  - name: position
    type: radio
    label: Position
    desc: Place the object near the start or end.
    default: default
    options:
      - default
      - start
      - end

previewHeight: 20
preview: |
  <div class="w-screen p-6 max-w-sm" :class="orientation === 'vertical' && 'min-h-[calc(17rem)] flex justify-center gap-4'">
    <div
      class="prs-separator"
      :class="{
        'prs-separator-vertical': orientation === 'vertical',
        'prs-separator-start': position === 'start',
        'prs-separator-end': position === 'end',
      }"
      x-text="text"
    ></div>
  </div>

code:
  html: |
    <div class="prs-separator{orientation}{position}">
      {text}
    </div>
  logic:
    text: "this.text"
    orientation: "this.orientation === 'vertical' ? ' prs-separator-vertical' : ''"
    position: "this.position !== 'default' ? (' prs-separator-'+ this.position) : ''"
---