Details
Gruppieren Sie eine kurze Zusammenfassung und einen Textkörper in einem Block. Wenn Sie ihn über die Symbolleiste erstellen, geben Sie zuerst die Zusammenfassung ein und fahren Sie fort, Inhalte darunter zu schreiben.
Der mit dem Dreieck festgelegte Öffnungszustand wird im Dokument gespeichert und bestimmt den Anfangszustand der veröffentlichten Ansicht. Auch beim Bearbeiten lässt sich der Block durch Klicken auf das Dreieck öffnen und schließen.
Innerhalb einer Tabellenzelle oder eines anderen Blocks wird nur der betreffende Details-Block geöffnet oder geschlossen. Befindet sich der Cursor oder die Auswahl im gerade geschlossenen Inhalt, wird er beziehungsweise sie nach außen versetzt; eine Auswahl an anderer Stelle bleibt erhalten.
npm install nabi-noteimport {
createLocale, createNabiWith, mountSurface, mountToolbar,
mountContextToolbar, mountHints, watchSettle, quoteWing, detailsWing,
codeWing, mountViewTools,
} from 'nabi-note'
const selected = [
quoteWing,
detailsWing,
codeWing,
]
const locale = createLocale('de')
const { nabi, registry } = createNabiWith(selected, { locale })
// Bring your own highlighter (Prism, highlight.js, Shiki, …) — the wing stays as it is
// and only the attach is swapped (`makeCodeAttach` ships from the same door)
// { ...codeWing, attach: makeCodeAttach({ highlight: (source, lang) => [{ text: source }] }) }
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 })
const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
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()))
// Call from your language selector. Content and editing history stay intact.
// locale.setLocale('ko')const selected = wings().use('details').build()CSS-Stile
Stilieren Sie den Details-Block mit .nabi-content details und den Titel mit .nabi-content details > summary.
.article-body details {
padding: .75rem 1rem;
border: 1px solid var(--nabi-line);
border-radius: var(--nabi-radius);
background: var(--nabi-soft);
}
.article-body details > summary { cursor: pointer; font-weight: 700; }
.article-body details[open] > summary { margin-block-end: .75rem; }Das Attribut open ist der vom Autor gespeicherte Anfangszustand. CSS kann diesen Zustand stilisieren, aber es ist besser, den Zustand selbst nicht zu erzwingen.