NABI NOTE
Dokumentation

Zitat ​

Gruppiere zitierten Text oder trenne Kontext über mehrere Absätze hinweg. Tippe > gefolgt von einem Leerzeichen in einem leeren Absatz oder wechsle ausgewählte Absätze über die Symbolleiste in ein Zitat um.

Ein Zitat kann gewöhnliche Absätze sowie Blöcke wie Listen und Bilder enthalten. Das erneute Umschalten desselben Bereichs entpackt ihn wieder in äußere Absätze.

Flügel
StandardschriftartAbstand
HTMLEditor wird geladen…
JSONnabi-treeEditor wird geladen…
Installation
npm install nabi-note
Code
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: 'de' })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'de' }
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-Stile ​

Stilisieren Sie Zitate mit .nabi-content blockquote, indem Sie Rahmen und Abstände ändern.

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);
}

Behalte die Absatzstruktur innerhalb von blockquote bei und ändere nur das Erscheinungsbild wie äußere Abstände, Rahmen und Farbe.