NABI NOTE
दस्तऐवज

उद्धरण ​

उद्धृत मजकूर किंवा वेगळा संदर्भ अनेक paragraphs मध्ये एकत्र करा. रिकाम्या paragraph मध्ये > नंतर Space टाइप करा, किंवा toolbar मधून निवडलेले paragraphs quote मध्ये बदला.

quote मध्ये सामान्य paragraphs तसेच lists आणि images सारखे blocks असू शकतात. तीच range पुन्हा switch केल्यास ती बाहेरील paragraphs मध्ये परत उलगडते.

विंग्ज
मूलभूत अक्षररूपअंतर
HTMLसंपादक लोड होत आहे…
JSONnabi-treeसंपादक लोड होत आहे…
स्थापित करा
npm install nabi-note
कोड
import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, quoteWing, detailsWing, dividerWing,
  mountViewTools,
} from 'nabi-note'

const selected = [
  quoteWing,
  detailsWing,
  dividerWing,
]
const { nabi, registry } = createNabiWith(selected)

const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!

// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale: 'mr' })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'mr' }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')! })
const context = mountContextToolbar({ ...shared, root: document.querySelector('#context')! })
mountHints({ toolbar, context, root, surface: content })
// The preview and fullscreen buttons — they stand their own box at the end of the row
mountViewTools({ ...shared, root, container: document.querySelector('#toolbar')! })

// on every change — hook up your own code here
// nabi.onChange(() => user_callback(nabi.getHtml()))
ts
const selected = wings().use('quote').build()

CSS शैली ​

border आणि spacing बदलून .nabi-content blockquote ने quotes style करा.

css
.article-body blockquote {
  margin-inline: 0;
  padding: .25rem 1rem;
  border-inline-start: 4px solid var(--nabi-accent);
  color: var(--nabi-muted);
  background: color-mix(in srgb, var(--nabi-soft) 72%, transparent);
}

blockquote मधील paragraph structure जशी आहे तशी ठेवा, आणि बाहेरील spacing, borders व color यांसारखे presentationच बदला.