Nmorph UI Kit

Divider

Defines the direction of the divider. Vertical dividers stretch inside flex and grid layouts.

Lorem ipsum

<script setup lang="ts">
import { NmorphDivider, NmorphCard } from "@nmorph/nmorph-ui-kit";
</script>

<template>
  <div class="divider-direction-overview">
    <div class="divider-wrapper">
      <div class="divider-horizontal">
        <div class="horizontal-elements">
          <div
            class="element"
            v-for="(_, idx) in Array.from({ length: 4 })"
            :key="idx"
          >
            <NmorphCard :paper="3">Lorem ipsum</NmorphCard>
          </div>
        </div>
        <NmorphDivider />
        <div class="horizontal-elements">
          <div
            class="element"
            v-for="(_, idx) in Array.from({ length: 4 })"
            :key="idx"
          >
            <NmorphCard :paper="3">Lorem ipsum</NmorphCard>
          </div>
        </div>
      </div>
      <div class="divider-vertical">
        <div class="vertical-elements">
          <div
            class="element"
            v-for="(_, idx) in Array.from({ length: 4 })"
            :key="idx"
          >
            <NmorphCard :paper="3">Lorem ipsum</NmorphCard>
          </div>
        </div>
        <NmorphDivider direction="vertical" />
        <div class="vertical-elements">
          <div
            class="element"
            v-for="(_, idx) in Array.from({ length: 4 })"
            :key="idx"
          >
            <NmorphCard :paper="3">Lorem ipsum</NmorphCard>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

Direction

NmorphDivider Api

Attributes

Resolution is not supported