Divider ​

The VDivider component is used to separate sections of lists or layouts.

Usage ​

Basic Usage ​

Dividers in their simplest form display a horizontal line.

Inset ​

Inset dividers are moved 44px to the right. This will cause them to line up with list items.

Vertical ​

Vertical dividers give you more tools for unique layouts.

Props ​

Events ​

None

Slots ​

None

CSS Variables ​

:root {
  --v-divider-height: 1px;
  --v-divider-border-color: var(--color-gray-200);
  --v-divider-border-width: var(--v-divider-height);
  --v-divider-border-style: solid;
  --v-divider-inset-margin: 44px;
}

:root {
  --v-divider-height: 1px;
  --v-divider-border-color: var(--color-gray-200);
  --v-divider-border-width: var(--v-divider-height);
  --v-divider-border-style: solid;
  --v-divider-inset-margin: 44px;
}

Standalone Installation ​

You can also install the VDivider component individually via @morpheme/divider package:

npm i @morpheme/divider

npm i @morpheme/divider

<script setup lang="ts">
import VDivider from '@morpheme/divider';
</script>

<template>
  <VDivider />
</template>

<script setup lang="ts">
import VDivider from '@morpheme/divider';
</script>

<template>
  <VDivider />
</template>

Storybook ​

View Storybook documentation here.