Divider

The NDivider component is used to separate sections of content, including text and other components. It creates a colored line that spans the width or height of its parent container, and can be oriented horizontally or vertically.

Import

import {NDivider} from '@nova-org/components'

Usage

🚀 Nova UI

Beautiful, fast and modern Vue 3 UI library.

---

Beautiful

---

Fast

---

Modern

Code

Template

<template>
  <div>
    <n-text weight="medium" font-size="h5" html-tag="div" :text="'🚀 Nova UI'"/>
    <n-text weight="light" font-size="small" html-tag="div" :text="'Beautiful, fast and modern Vue 3 UI library.'"/>

    <n-divider/>

    <div style="display: flex; gap: 12px" class="n-mt-12">
      <n-text weight="light" font-size="paragraph" html-tag="div" :text="'Beautiful'"/>
      <n-divider vertical/>
      <n-text weight="light" font-size="paragraph" html-tag="div" :text="'Fast'"/>
      <n-divider vertical/>
      <n-text weight="light" font-size="paragraph" html-tag="div" :text="'Modern'"/>
    </div>

  </div>
</template>

Script

<script setup lang="ts">
import {NText, NDivider} from '@nova-org/components'
</script>

API

Props

PropertyTypeDefault valueDescription